@theme {
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';
}

*{
    box-sizing: border-box;
}

body{
  margin:0px;
  padding: 0px;
  background-color: rgb(20, 21, 21);
}

header{
    display: flex;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-align: left;
    background: linear-gradient(264deg, rgba(63, 94, 251, 1) 0%, rgba(252, 70, 107, 1) 100%);
    height: 90px;
    width: 100%;
    justify-content: center;
    color: #212121;
}
.logo{
    width:15%;
    background-color:transparent;
}

.logo img{
    margin: 15px 0 0 10px;
    height: 60px;
}
.menu{
    min-width:50%;
    height: auto;
    text-align: left;
}

.menu a {
    text-decoration: none;
    font-size: 1.2em;
    color:#dad8d8;
    margin: 50px 10px;
    line-height:80px;
    }
.menu a:hover {
        color:white;
        transition: text-shadow 0.5s ease-out;
        text-shadow:1px 1px 8px rgb(246, 239, 137);
    }
.icon{
    display: none;
}

.topRheader{
    width:20%;
    color:rgb(230, 222, 222);
    display: flex; 
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    font-size: 18px;
}
.topRheader p{
    margin:5px;
}
.mobileMenu{
        display: none;
}

.img-front{
    display: flex;
    flex-direction: row;
    justify-content: center; 
}
.img-front img{
    width: 60%;
} 
.container{
    display: grid;
    grid-template-columns: 100px 1fr 100px;
    grid-template-rows: 1fr;
    justify-items:center;
    font-family: arial;
    background-color: #eaebf4;
}

.perfumlink{
    text-align: center;
}
.perfumlink a{
    text-decoration: none;
    padding-right: 15px;
}
        
.productList{
    grid-row: 1/1;
    grid-column: 2/3;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items:flex-start;
    background-color: #fafafa;
}
.card {
    background-color: #fff;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 3fr;
    width:280px;  
    height: 560px;
    text-align: center;
    border:1px solid #f3efef;
    border-radius: 5px;
    padding: 10px 0 20px;
    margin-top: 20px;
    }
.img{
    grid-column: 1/1;
    grid-row: 1/2;
} 
.img img{
    width: 180px; height:180px;
}

.card-txt{
    grid-column: 1/1;
    grid-row: 2/3;   
}
 .dscrptn{
        text-align: left;
        text-align: center;
        line-height: 110%;
        padding:0 30px 20px 10px;
    }
.bottomBox{
    grid-column: 1/1;
    grid-row: 3/4;
    width: 100%;
}
.price{
    font-size: 1.4rem;
}
.button {
    border: none;
    text-decoration: none;
    outline: 0;
    padding: 12px 40px;
    color: white;
    background-color: #000000;
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
    font-size: 18px;
}
.button:hover {
    opacity: 0.7;
}
                   
.brandList{
    grid-row: 1/1;
    grid-column: 2/3;
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
    margin-top: 50px;
    gap: 40px;
}
.brandBx{
    height: 50px;
    min-width: max-content;
    text-align: center;
    padding: 0px;
    font-size: 1.2em;
    font-weight:light;
}
.brandBx a{
    color:rgb(38, 37, 37);
    text-decoration: none;
    text-shadow: none;
    }
.brandBx a:hover{
    color: rgb(232, 23, 180);
    }
                    
.productCreate{
    margin-top: 20px;
    grid-row: 1/1;
    grid-column: 2/3;
    width: 100%;
}
    .centerbox{
    border: 1px solid #a9abac;
    border-radius: 15px;
    }
.cabeza h2{

    text-align: center;
    margin-top:10px;
    
}
.orderDetails{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}
.orderDetails p{
    margin-right: 5px;
}

.genericform form{
                      margin-left: 20%;
                      width: 60%;
}
.genericform select{
width: 100%;
padding: 16px 20px;
border-color: #e4e1e1;
border-radius: 4px;
}
.genericform div{
    padding: 5px;
}
.genericform label{
        margin-right:10px;
    }
.button{
    background-color: rgb(15, 109, 249);
    width: 50%;
    color:#fff; font-weight: 300;
    border:0px;
    border-radius: 15px;
    padding: 8px 12px;
    text-decoration: none;
}
footer{
margin-top:20px;
height:70px;
background:#212121;
text-align: center;
display:flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
footer a{
    margin:10px;
    text-decoration:none;
    color:#dad8d8;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

@media only screen and (max-width : 576px){
header{
    height: 60px;
}
.logo{
    width:90%;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.logo img{
    margin: 5px 0 0 10px;
    height: 50px;
    }
.menu{
    display: none;
}
.icon{
    display: block;
    position: absolute;
    color: #ffffff;
    right: 0;top: 0;
    font-size: 2rem;
    padding: 5px;
}
.topRheader{
    display: none;
}

.img-front img{
    width: 100%;
}
.mobileMenu{
    display: none;
    background:rgba(2, 2, 2);
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    height:70px;
    max-width: 100%;
    animation-duration: 0.3s;
    animation-timing-function: ease-in;
    animation-name: slide-in;
    text-align: center;
}
@keyframes slide-in {
    0% {
    height: 0px; opacity: 0;
    }
    100% {
    height:35px; opacity: 1;
    }
}
.mobileMenu a{
    text-decoration: none; 
    font-size: 0.9rem;
    margin-left:3px;
    line-height: 4rem;
      color:#dad8d8;
}

          
   .container{
        display: grid;
        grid-template-columns: 1px 1fr 1px;
        grid-template-rows: 1fr;
        justify-items:stretch;
        font-family: arial;
   }
          
          .card {
                display: grid;
                grid-template-columns: 1fr;
                grid-template-rows: 2fr;
                font-size: 0.8rem;
                width:48%;
                height:max-content;
                text-align: center;
                border-radius: 5px;
                padding:0;
          }
                .img{
                  grid-column: 1/1; 
                  grid-row: 1/2;
                }
                .img img{
                      padding-top: 10px;
                       width: 80px; 
                       height:80px;
                  }
                
                .card-txt{
                  grid-column: 1/1; 
                  grid-row: 2/3;
                  
                    
                }
                .dscrptn{
                      text-align: left;
                 
                      padding:5px;
                    }
                .bottomBox{
                  grid-column: 1/1;
                  grid-row: 3/4;
                  font-size: 8px;
                  width: 100%;
                  padding: 10px;
                }
                  .button {
                    border: none;
                    text-decoration: none;
                    outline: 0;
                    padding: 8px;
                    color: white;
                    background-color: #000;
                    border-radius: 18px;
                    text-align: center;
                    cursor: pointer;
       
                  }
                  .button:hover {
                    opacity: 0.7;
                  }
                
              
        
          .perfumlink{
            text-align: center;
          }
        .perfumlink a{
                      text-decoration: none;
                      padding-right: 15px;
                  }
            
            .brandList{
                grid-row: 1/1;
                grid-column: 2/3;
                display: flex;
          
                flex-direction: column;
              
                gap:5px;
                
            }
.brandBx{
    height:auto;
}
        
}

@media only screen and (min-width : 577px) and (max-width: 767px){
        header{
            height: 60px;
        }
        .logo{
            width:90%;
        }
        .logo img{
            margin: 5px 0 0 40px;
            height: 50px;
        }
        .menu{
            display: none;
        }
        .icon{
            display: block;
            position: absolute;
            color: #ffffff;
            right: 0;top: 0;
            font-size: 2rem;
            padding: 5px;
        }
        .topRheader{
            display: none;
        }

        .img-front img{
            width: 100%;
        }
        .mobileMenu{
            display: none;
            background:rgba(2, 2, 2);
            height:35px;
            font-size: small;
            max-width: 100%;
            animation-duration: 0.3s;
            animation-timing-function: ease-in;
            animation-name: slide-in;
            text-align: center;
        }
        @keyframes slide-in {
            0% {
            height: 0px; opacity: 0;
            }
            100% {
            height:35px; opacity: 1;
            }
        }
        .mobileMenu a{
            text-decoration: none; 
            margin-left:3px;
            line-height: 2rem;
        }

        .container{
           /* display: grid;
            grid-template-columns: 1px 1fr 1px;
            grid-template-rows: 1fr;*/
            justify-items:stretch;
            font-family: arial;
        }
        .card {
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: 2fr;
            font-size: 0.8rem;
            width:48%;
            height:max-content;
            text-align: center;
            border-radius: 5px;
            padding:0;
        }
        .img{
            grid-column: 1/1; 
            grid-row: 1/2;
        }
        .img img{
            padding-top: 10px;
            width: 80px; 
            height:80px;
        }

        .card-txt{
            grid-column: 1/1; 
            grid-row: 2/3;
        }
        .dscrptn{
            text-align: left;
            padding:5px;
        }
            
        .bottomBox{
            grid-column: 1/1;
            grid-row: 3/4;
            font-size: 8px;
            width: 100%;
            padding: 10px;
        }
        .button {
            border: none;
            text-decoration: none;
            outline: 0;
            padding: 8px;
            color: white;
            background-color: #000;
            border-radius: 18px;
            text-align: center;
            cursor: pointer;

        }
        .button:hover {
            opacity: 0.7;
        }
            
            

        .perfumlink{
            text-align: center;
        }
        .perfumlink a{
            text-decoration: none;
            padding-right: 15px;
        }

        .brandList{
            grid-row: 1/1;
            grid-column: 2/3;
            display: flex;
            flex-direction: column;
            gap:5px;
        }
        .brandBx{
            height:auto;
        }
      
}