/* General Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
  }

  html{
    scroll-behavior: smooth;
  }
  
  body {
    background-color:beige ;
  }

  a{
   text-decoration: none;
  }

/* Title */

header{
    background-color: #F26B6B;
    padding: 1em;
    font-family: "Erica One", sans-serif; 
    font-style: normal;

 h1{
    color: black ;
    font-weight: 400;
    font-size: 4rem;
 }

 h2{
    color: rgb(255, 255, 255) ;
    font-weight: 400;
    font-size: 1.3rem;
 }
}


/*header nav*/
nav{
   position: absolute;
   right: 2rem;
   top: 4rem;


ul li{
    display: inline-block;
    padding-right: 3rem;
    color: rgb(255, 255, 255) ;
    font-weight: 400;
    font-size: 1.3rem;

 }

 a {
    color: black;
    text-decoration: none;
    transition: all 0.5s ease;
 }

 a:hover{
    color: #183B59;
    transition: 0.3s ease-in;
 }
}

.about{
    text-align: center;
    background-color: #A6775B;
    color: white;
    font-family: "Erica One", sans-serif; 
    font-style: normal;
    font-weight: 400;
    font-size: 2.5rem;
}

.description{
    color: black;
    padding: 2rem;
    font-family: "Caprasimo", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1rem;
   
}

.outline{
   border: 0.3rem solid #304018;
   padding: 1rem;
}

#font-stores{
   font-family: "Special Elite", system-ui;
  font-weight: 400;
  font-style: normal;
  padding-left: 1rem;

  h4{
   padding: 0.5rem;
   font-size: 1.1rem;
  }

  h5{
   padding-left: 0.5rem;
   padding-bottom: 0.2rem;
   font-size: 1.2rem;
  }
}
.title{
   color: black;
   padding-left: 1rem;
   padding-top: 1rem;
   font-family: "Caprasimo", serif;
   font-weight: 400;
   font-style: normal;
   font-size: 2.5rem;
}

.location{
   font-family: "Special Elite", system-ui;
  font-weight: 400;
  font-style: normal;
  font-size: 1.5rem;
  padding-left: 1rem;
  padding-bottom: 1rem;

}


.yellow-text{
   color: #F2B705;
}

#logo{
   opacity: 0.5;
   float: right;
}

#logo:hover{
   opacity: 1;
}

#expand{
   transition: transform 0.5s;
}

#expand:hover{
   transform: scale(1.1);
}

/*scroll grid*/
.scroller{
   display: grid;
   grid-auto-flow: column;
   position: relative;
   overflow: auto;
   padding-top: 1rem;
   gap: 1rem;
}

.scroller figure{
      box-shadow: 1px 2px 10px rgba(170, 162, 162, 0.95), 
      44px 44px 24px rgba(204, 204, 204, 0.25);
      transition: 0.3s ease-in-out transform, 0.3s ease-in-out box-shadow;
   }

.scroller figure:hover{
   transform: translateY(2rem);
      box-shadow: 1px 2px 10px rgba(214, 185, 222, 0.95), 
        70px 70px 24px rgba(204, 204, 204, 0.15);
   }
/* scrollbar */

::-webkit-scrollbar {
   width: 1rem;
 }
::-webkit-scrollbar-thumb {
   background:  #183B59; 
   border-radius:1rem;
 }
::-webkit-scrollbar-thumb:hover {
   background:  #357dbb; 
 } 

footer p{
   text-align: center;
   color: white;
   background-color: #F26B6B;
   font-family: "Caprasimo", serif;
   font-weight: 400;
   font-style: normal;
   font-size: 1rem;
}



@media only screen and (min-width: 400px) {
   nav {
      position: absolute;
   right: 2rem;
   top: 0.7rem;
   }

   ul li {
      display: inline-block;
    padding-right: 1rem;
    color: rgb(255, 255, 255) ;
    font-weight: 400;
    font-size: 0.5rem;
   }
}

@media only screen and (min-width: 1200px) {
   nav {
      position: absolute;
   right: 2rem;
   top: 4rem;
   }

   ul li {
      display: inline-block;
    padding-right: 3rem;
    color: rgb(255, 255, 255) ;
    font-weight: 400;
    font-size: 1.3rem;
   }
}