@import url('https://fonts.googleapis.com/css2?family=Libre+Bodoni:wght@700&family=Nanum+Gothic:wght@400;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libre+Bodoni:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');

/* RESET */
*{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   text-decoration: none;
   list-style: none;
}

body{
   font-family: 'Nanum Gothic', sans-serif;
   background-color: antiquewhite;

}

header{
   width: 100%;
   display: grid;
   grid-template-columns: 15% 85%;
   
   
}

@media screen and (min-width:951px) {
   
   header{
      grid-template-columns: 61% 39%;
      max-height: none;
   }
   .index-intro{
   display: grid;
   }
}

.index-intro{
   min-height: 100vh;
   padding-right: 4%;
   padding-left: 4%;
}

nav{
   padding-right: 0px; 
   text-align: right;
   display: flex;
   justify-content: flex-end;
   align-items:center;
  
}

.brand-logo-a{
   align-self: center;
   padding-top: 15px;
   padding-bottom: 15px;
}

.brand-logo{
   width: 50px;

}

.cart-icon{
   /* display: none; */
   width: 40px;
   padding: 5px;
   cursor: pointer;
   margin-right: 10px;
}

.menu-icon{
   width: 45px;
   padding: 5px;
   cursor: pointer;
}

.cart-icon:hover{
   background-color: #0000007e;
   border-radius: 20px;
}

.menu-icon:hover{
   background-color: #0000007e;
   border-radius: 20px;
}


@media screen and (min-width:556px){

   nav{ 
      padding-top: 30px;
   }

   .brand-logo-a{
      align-self: center;
      padding-top: 30px;
      padding-bottom: 30px;
   }

   .brand-logo{
      width: 70px;  
   }

   .cart-icon{
      display: block;
      width: 40px;
      margin-left: 10px;
   }

   .menu-icon{
      display: none;
   }

}

nav ul{
   display: inline-block;
   width: 100%;
   padding-right: 8px;
   margin-bottom: 18px;
}

nav li{
   display: inline-block;
   margin-left: 15px;
   margin-right: 15px;
}

.menuhr{
   display: none;
}

nav ul li a{
   color: #000000;
   transition: all 0.3a ease 0s;
}

nav ul li a:hover{
   color: #FF5A5F;
}

@media screen and (min-width:951px){
   .index-intro{
      padding-right: 8%;
   }
   
   nav{
      justify-content: flex-start;
      padding-right: 15px;

   }
   
}

@media screen and (min-width:1440px){

   nav{
      padding-right: 35px;

   }
   
}


@media screen and (max-width:556px){

   nav ul{
      background-color: #FF5A5F;
      position: absolute;
      top:83px;
      left:0;
      width: 100%;
      overflow: hidden;
      transition: max-height 0.5s;  
      padding-right: 0px;
   }

   nav li{
      display: block;
      margin:13px;
      padding-right: 8px;
   }

   .menuhr{
      display: block;
      height: 0.9px;
      background-color: #332E3C;
      border: none;
   }
   
}

.index-headline{
   /* border: 1px black solid; */
   display: flex;
   flex-direction: column;
   /* flex-wrap: wrap; don't do */ 
   justify-content: space-between;
   transition: all 0.3s ease 0s;
}

@media screen and (min-width:556px){
   .index-headline{
      flex-direction: row;
   }
}

.headline{
   display: flex;
   flex-direction: column;
   justify-content: center; 
   padding-bottom: 40px;
   padding-top: 55px;
   max-width: 550px;
}

.main-figure{
   display: none;
}

.main-img{
   margin-left: auto;
   margin-right: auto;
   width: 77%;
}

@media screen and (min-width:768px){

   .headline{
      padding-left: 0px;
      padding-top: 0px;
      /* padding-bottom: 15px; */
   }

}

@media screen and (min-width:951px){

   .headline{
      flex-basis: 61%;
   }

   .main-figure{
      flex-basis: 39%;
   }

   
}

@media screen and (min-width:1440px) {
   .headline{
      padding-left: 60px;
      max-width: 700px;
   }
   
}

.background{
   background-color: transparent;
   
}

@media screen and (min-width:950px) {

   .background{
      background-color: #DCA783;
   }

   .main-figure{
      display:flex;
      align-items: flex-end;
   }  
}


.col-2 h1{
   font-family: 'Libre Bodoni', serif;
   /* font-size: 50px;
   font-size: 2.5em;
   line-height: 55px; */
   font-size: 3.2em;
   line-height: 65px;
   font-weight: 600;
   padding-top: 0px;
   padding-bottom: 25px;
   text-transform: capitalize;
}

@media screen and (min-width:556px){
   .col-2 h1{
      padding-bottom: 5px;
   }
}

.shop-btn{
   width: 150px;
   font-size: 20px;
   padding: 20px 25px;
   border: 0;
   outline: 0;
   border-radius: 8px;
   cursor: pointer;
   background-color: #FF5A5F;
   transition: all 0.3s ease 0s;
   margin-top: 25px;

}

@media screen and (min-width:768px){
   .col-2 h1{
      padding-top: 68px;
      padding-bottom: 25px;  
   }

   .shop-btn{
      margin-top: 25px;
   }
   
}

.shop-btn:hover{
   background-color: #ff5a60e3;
   transition: all 0.3s ease 0s;
}

button{
   border: 0;
   outline: 0;
   background: none;
}


/* new releases */

.index-releases{
   padding: 50px 3%;
   background-color: white;
   display: flex;
   flex-direction: column;
   justify-content: center;
}


.releases-div{
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

.releases-div a{
   color: #332E3C;
}

.index-releases-header{
   text-align: center;
   flex-basis: 100%;
   text-decoration: underline;
   text-underline-offset: 5px;
   text-decoration-color: #FF5A5F;
}

.releases-div a{
   flex-basis:100%;
   margin-top: 50px;
   margin-inline: 15px;
   max-width: 330px;
   min-height: 249px;
   text-align: center;  
}

@media screen and (min-width: 768px){

   .releases-div{
      flex-direction: row;
   }
   .releases-div a{
      margin-inline: 20px;
      flex-basis: 35%;
   
   }
}

@media screen and (min-width: 1440px){
   .releases-div a{
      margin-inline: 35px;
   }
}

.releases-div img{
   width: 100%;
   position: relative;
   bottom: 0;
   cursor: pointer;
   margin-left: auto;
   margin-right: auto;
}

.releases-div figcaption{
   margin-top: 10px;
   font-weight: 700;

}


/* products-apparel */

.product-apparel{
   padding: 20px 3%;
   background-color: white;
   width:100%;
   min-height:580px;
   display: flex;
   justify-content: center;
   flex-wrap: wrap;

}

.products-header{
   padding-right: 4%;
   padding-left: 4%;
}

@media screen and (min-width:1440px){
   .product-apparel{
      padding: 50px 4%;
   }

}

.product-apparel-header::after{
   content: '';
   background: #FF5A5F;
   width: 115px;
   height:5px;
   position: absolute;
   transform: translateY(+600%) translateX(-90%);
}

.product-apparel-figure{
   flex-basis: 87%;
   max-width: 300px;
   margin-bottom: 5%;
   border-radius: 8px 8px 0px 0px;
   box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.1);
   cursor: pointer;
   padding: 15px;
   margin: 10px;
}

@media screen and (min-width:556px) {
   .product-apparel-figure{
      flex-basis: 87%;
      max-width: 290px;
      padding: 10px;
   }
  
}

@media screen and (min-width:768px) {
   .product-apparel h1{
      flex-basis: 100%;
      margin-bottom:4%;
      margin-left: 2%;
   }
  
}

.image-container{
   background-color: #63b1cd4a;
   border-radius: 8px 8px 0px 0px;
   border-bottom: 3px solid #FF5A5F;
   padding: 3%;


}


.product-apparel-figure img{
   width: 100%;
   height: auto;
   display: block;
}

.product-apparel-figure figcaption{
   padding: 4% 3% 2% 3%;
   text-align: left;
}


.apparel-price{
   font-weight: 700;
}


/* footer */
footer{
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   background-color: #332E3C;
   padding: 4%;
   padding-bottom: 10px;
   color: whitesmoke;
}

@media screen and (min-width: 768px) {
   footer{
      padding: 2%;
      padding-bottom: 10px;
   } 
}

footer img{
   cursor: pointer;
   width: 100%;
   max-width: 80px;
}

footer li{
   margin-bottom: 10px;
}

footer ul{
   flex-basis: 70%;
}
footer a{
   color: white;
   text-decoration: underline;
   text-underline-offset: 4px;
}