@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import 'colors.css';

*{
    padding: 0;
    margin: 0;
}
/* first desktop */

body{
    font-family: 'Open sans', sans-serif;
    box-sizing: border-box;
    display: flex;
    background: rgb(255, 255, 255);
}

header{
    position: absolute;
    width: calc(100% - 140px);
    height: 120px;
    left: 140px;
}
header.active{
    width: calc(100% - 400px);
    left: 400px;
}

header .container{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

header .logo{
    width: 120px;
    height: 100%;   
    margin-right: 1rem;
}
header img{
    width: 100%;
}
header .menu{
    height: 100%;
    width: 90px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
header .bx-menu{
    font-size: 2rem;
}
nav{
    width: 140px;
    height: 100vh;
    background: rgb(255, 255, 255);
    overflow: hidden;
    transition-duration: 300ms;
}

nav.active{
    width: 400px;
    padding-left: 2rem;
}

nav.active h2,
nav.active h3,
nav.active p {
    visibility: visible;
    transition-delay: 100ms;
}

nav h2,
nav h3,
nav p {
    visibility: hidden;
}


nav .links:hover{
    background: rgb(122, 162, 165);
    
}
nav .boxCart h2:hover{
    color: rgb(255, 217, 0);
}

.astro{
    visibility: visible;
    position: relative;
    width: 60px;
    left: 140px;
    padding-right: 1rem ;
}

.astro.active{
    visibility: inherit;
    position: inherit;
    width: 60px;
    padding-right: 1rem ;
}

.pageTitle{
    width: 100%;
    height: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.pageTitle h2{
    font-size:  2.7rem;
    font-weight: 100;
}

.linksProducts{
    width: 100%;
    height: 30%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center; 
}
.links{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: flex-start;
    width: 80%;
    border-radius: 50px;
}
.links h2 a{
    color: rgb(49, 49, 49);
    font-size: 1.3rem;
    font-weight: 50;
    text-decoration: none;
}
.icon{
    width: 10%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.bx-chevron-right{
    font-size: 2.7rem;
    margin-left: 6rem;
    color: rgb(0, 0, 0);
    z-index: 50;
}

.bx-chevron-right.active{
    font-size: 2rem;
    margin-left: inherit;
}

.boxCart{
    width: 100%;
    height: 40%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}


.boxCart h2{
    font-weight: 150;
    font-size: 1.5rem;
}
.bx-cart{
    font-size: 40px;
    margin-left: 4rem;
}

.bx-cart.active{
    margin: inherit;

}

.copyright{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 10%;
}


.mainDisplay{
    width: calc(100% - 140px);
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mainDisplay.active{
    width: calc(100% - 400px);
}




.mainView{
    background: rgb(255, 255, 255);
    width: 100%;
    height: 60%;
    border-radius: 50px;
    padding: 1.5rem;
    box-shadow: 8px  8px 30px rgb(122, 162, 165);
    margin-right: 1rem;



}

.productTtile{
    width: 10%;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.productTtile h2{
    font-size: clamp(1rem, 3vw, 2.7);
    width: 100%;
}

.products{
    width: 100%;
    height: 80%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 0.95fr));
    gap: 1.5rem;
    overflow-y: scroll;
}

.product{
    width: 95%;
    height: 350px;
    margin-left: 10px;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
}

.productImage{
    width: 100%;
    height: 75%;
    display: flex;
    justify-content: center;
}

.productImage img{
    width: 300px;
    height: 100%;
}

.productDescription{
    box-shadow: 5px 5px 15px grey;
    background: rgb(241, 241, 241);
    width: 100%;
    height: 25%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    border-radius: 15px;
}

.productName{
    grid-area: 1/1/2/3;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.productName h3{
    font-size: clamp(1.5rem, 1.7vw, 1.8rem);
    padding-left: 1rem;
    
}
.order{
    grid-area: 2/1/3/3  ;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.productPrice{
    display: flex;
    align-items: center;
}
.productPrice p{
    font-size: 1.5rem;
}

.boton{
    background: rgb(204, 204, 0);
    border: none;
    width: 100px;
    height: 80%;
    border-radius: 50px;
}
.boton:hover{
    background: rgb(255, 255, 0);
}