@import url("reset.css");

.luckiest-guy-regular {
    font-family: "Luckiest Guy", cursive;
    font-weight: 400;
    font-style: normal;
  }
  .pompiere-regular {
    font-family: "Pompiere", serif;
    font-weight: 400;
    font-style: normal;
  }

.material-symbols-outlined {
  z-index: 5;
  display: flex;
  justify-content: end;
  margin-right: 13%;
  font-size: 9vb;
  position: relative;
  top: 5vb;
  color: white;
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}

body{
    background-color: rgb(38, 38, 211);
}
.logo{
    height: 15vh;
}
ul {
    font-size: xx-large;
    width: 45%;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: flex;
    justify-content: space-around;
    font-family: Luckiest Guy;
  }
  
  li {
    float: left;
  }
  
  li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
  
  li a:hover {
    color: rgb(87, 87, 255);;
  }
nav{
    background-color: orangered;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    position: sticky;
    top: 0;
    z-index: 3;
}
.hero-image {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("heroimage.jpg");
    height: 350px;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }

.hero-text {
    text-align: center;
    color: white;
    font-family: Luckiest Guy;
    font-size: xxx-large;
  }
  h3 {
    color: white;
    font-family: Luckiest Guy;
    font-size: xx-large;
    margin-left: 10%;
    margin-top: 3%;
  }


.item1 { grid-area: imag1; }
.item2 { grid-area: imag2; }
.item3 { grid-area: imag3; }
.item4 { grid-area: imag4; }
.item5 { grid-area: imag5; }
.item6 { grid-area: imag6; }
.item7 { grid-area: imag7; }
.item8 { grid-area: imag8; }
.item9 { grid-area: imag9; }
.item10 { grid-area: imag10; }
.item11 { grid-area: imag11; }
.item12 { grid-area: imag12; }
.item13 { grid-area: imag13; }
.item14 { grid-area: imag14; }
.item15 { grid-area: imag15; }
.item16 { grid-area: imag16; }
.item17 { grid-area: imag17; }
.item18 { grid-area: imag18; }

.grid-container {
  display: grid;
  grid-template-areas:
    'imag1 imag2 imag3'
    'imag4 imag5 imag6'
    'imag7 imag8 imag9'
    'imag10 imag11 imag12'
    'imag13 imag14 imag15'
    'imag16 imag17 imag18';
  gap: 10px;
  padding: 10px;
}

.grid-container > div {
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

#round{
    border-radius: 5%;
}
.showcases{
  margin-top: 2.5vh;
  margin-bottom: 2.5vh;
  width: 80%;
  height: 80vh;
  background-color: orangered;
  display: flex;
  justify-self: center;
  justify-content: center;
  border-radius: 25px;
  flex-direction: column;
  position: relative;
  top: -9vh;
}
.das{
  text-align: center;
}
.center{
  display: flex;
  justify-content: center;
  width: 100%;
}
p{
  text-align: center;
    color: rgb(0, 0, 0);
    font-family: Pompiere;
    font-size: 3vb;
}
.sc1 { grid-area: sc1; }
.sc2 { grid-area: sc2; }

.grid-container2 {
  display: grid;
  grid-template-areas:
    'sc1 sc1 sc2';
  gap: 10px;
  padding: 10px;
  width: 75%;
  margin-top: 5vh;
  margin-left: auto;
  margin-right: auto;
}

.grid-container2 > div {
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
/* unvisited link */
.linky:link {
  color: orangered;
}


.linky:visited {
  color: orangered;
}

/* selected link */
.linky:active {
  color: orangered;
}
@media only screen and (max-width: 640px) {
  .grid-container {
    display: grid;
    grid-template-areas:
      'imag1' 
      'imag2' 
      'imag3'
      'imag4' 
      'imag5' 
      'imag6'
      'imag7' 
      'imag8' 
      'imag9'
      'imag10' 
      'imag11' 
      'imag12'
      'imag13' 
      'imag14' 
      'imag15'
      'imag16' 
      'imag17' 
      'imag18';
    gap: 10px;
    padding: 10px;
  }
  ul{
    display: none;
  }
  p{
    text-align: center;
      color: rgb(0, 0, 0);
      font-family: Pompiere;
      font-size: 1.7vb;
  }
  .das{
    font-size: small;
    position: relative;
    top: 5vh;
    z-index: 14;
  }
  .grid-container2 {
    display: grid;
    grid-template-areas:
      'sc1' 
      'sc2';
    gap: 10px;
    padding: 10px;
    width: 75%;
    margin-top: 5vh;
    margin-left: auto;
    margin-right: auto;
  }
}