body{
    /* background-color: rgb(255, 242, 242); */
    background: linear-gradient(#fff7f7, #f2fcff);
    display: grid;
    place-items: center;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
}
*{
  -webkit-tap-highlight-color: transparent;
}

:root {
    --font-main: Raleway;
  }
a{
    text-decoration: none;
    color: black;
    outline: none;
}
.ban{
    width: 100%;
    max-width: 600px;
    margin: 20px 0px;
    padding: 0px;
}
.planes{
    margin: 50px 0px;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    grid-template-columns: 50% 50%;
    overflow-x: hidden;

}

.tapeCor{
    width: 80px;
    position: absolute;
    top: 0px;
    left: -30px;
    transform: rotate(-45deg);
}
.proImg{
    width: 50vw;
    max-width: 200px;
   
}
.price{
    padding: 2px;
    margin: 2px;
    font-family: 'Bad Script', cursive;
    font-size: 8px;
}
.tape{
    width: 80px;
    position: absolute;
    top: -10px;
}
.product{
    width: 50vw;
    max-width: 200px;
    position: relative;
    display: grid;
    place-items: center; 
    margin: 10px 0px;
    background-color: white;
    box-shadow: rgb(156, 156, 156) 2px 2px 5px;
    
}
.name{
    padding: 2px;
    margin: 2px;
    font-family: var(--font-main) , cursive;
    font-size: 15px;
}
.stopScroll{
    overflow-y: hidden;
    margin: 0px;
    padding: 0px;
}
.name span{
    font-family: var(--font-main) ;
    font-size: 13px;
}
.desc{
    display: grid;
    place-items: center;
    grid-template-columns: 70% 30%;
    width: 100%;
    padding: 0px 5px;
}
.add{
    width: 20px;
    padding: 5px;
    cursor: pointer;
}
.product:nth-child(3n){
    transform: rotate(5deg) scale(0.95);

}

.product:nth-child(3n+1){
    transform: rotate(-2deg) translate(-5px,10px);

}
 .prodLeft .product:nth-child(2n){
    transform: rotate(-2deg) translate(40px,10px) scale(1.05);

}

.firstText{
    width: 100%;
    display: grid;
    place-items: center;
    grid-template-columns: 60% 20%;
    position: relative;
    
}
.right{
    width: 100%;
}
.testRight{
    font-size: 40px;
    writing-mode: vertical-rl;
text-orientation: mixed;
font-family: var(--font-main);
}
.prodLeft{
    margin: 50px 0px;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
}
.product.fullP{
    margin: 30px 0px;
    width: 250px;
transform: none;
}
.fullP .proImg{
    width: 250px;
}

.categ{
    position: fixed;
    top: 0px;
    left: 110vw;
    background-color: rgb(255, 249, 249);
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    z-index: 99;
    grid-template-rows: 10% 90%;
    transition: .3s ease;
}
.closeCat, .closeMenu{
    padding: 10px 15px;
    background-color: rgb(255, 255, 255);
    border-radius: 10px;
    margin: 0px;
    font-family: var(--font-main) , cursive;
    font-size: 13px;
    cursor: pointer;
}

.closeMenu{
    width: 200px;
    text-align: center;
}
.allCat{
    width: 100%;
    height: 90%;
    display: grid;
    place-items: center;
    z-index: 99;
    grid-template-columns: 50% 50%;
    padding: 0px;
    margin: 0px;
}
.categ img{
    width: 16vh;
    max-width: 130px;
    border-radius: 20px;
    box-shadow: rgb(156, 156, 156) 2px 2px 5px;
    transform: translate(100vw,0px);
}

.basket{
    z-index: 92;
    overflow: hidden;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    left: -100vw;
background-color: rgba(255, 249, 241, 0.699);
opacity: 0;
transition: .3s ease;

}

.basCard{
    position: absolute;
    width: 250px;
    filter: drop-shadow(rgb(224, 224, 224) 5px 5px 5px);
    transform: translate(-90vw,100px);
    z-index: 20;
    transition: .5s ease ;
}
.movebas{
    position: absolute;
    display: grid;
    place-items: center;
    transition: .5s ease .2s;

}

.prodFall{
    width: 120px;
    position: absolute;
    transform: translate(0px,-100vh) rotate(50deg);
    z-index: 19;
    transition: .5s ease;
}

.inCard{

    display: grid;
    place-items: center;
    transform: translate(-90vw,30px) rotate(-5deg);
    width: 150px;
    background-color: antiquewhite;
}
.imgInCard{
    position: absolute;
    width: 70px;
}
.imgInCard:nth-child(2){
transform: rotate(5deg) translate(30px);
}
.imgInCard:nth-child(1){
    z-index: 5;
    }
.imgInCard:nth-child(3){
    transform: rotate(-5deg) translate(-30px);
    z-index: 6;
    }

.logo{
    width: 200px;
}

.top{
    width: 100%;
    display: grid;
    place-items: center;
    margin: 20px 0px;
}

.tool{
    display: grid;
    width: 300px;
    place-items: center;
    grid-template-columns: 33% 34% 33%;
    margin: 20px 0px 0px 0px;
    /* background-color: rgb(255, 255, 255); */
}
.toolCat,.toolMenu,.toolCard{
    /* background-color: white; */
    padding: 10px 20px;
    display: grid;
    place-items: center;
    font-family: var(--font-main) , cursive;
    font-size: 15px;
    cursor: pointer;
}

.toolFix{
    position: fixed;
    top: -70px;
    left: 0px;
    display: grid;
    place-items: center;
    width: 100%;
    background-color: rgb(255, 244, 244);
    grid-template-columns: 33% 34% 33%;
    z-index: 90;
    padding: 5px 0px;
    box-shadow: rgb(189, 189, 189) 0px 2px 5px;
    transition: .3s ease;
    font-family: var(--font-main) , cursive;
    font-size: 15px;
  
}

.menuFull{
    position: fixed;
    top: -110vh;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgb(255, 244, 244);
    z-index: 99;
    display: grid;
    place-items: center;
    font-family: var(--font-main);
    font-size: 15px;
    text-decoration: none;
    transition: .5s ease;
}
.inMenu{
display: inherit;
place-items: center;
padding: 20px;
}
.me{
    text-align: justify;
    max-width: 500px;
}
.contact{
    font-family: var(--font-main);
    font-size: 15px;
    text-decoration: none;
}

.toolCard{
    position: relative;
}
.cardCount{
    position: absolute;
   width: 25px;
   height: 25px;
   background-color: rgb(255, 193, 193);
   display: grid;
   place-items: center;
   font-size: 12px;
   border-radius: 50%;
   transform: translate(40px,0px);
}




@keyframes basFull {
    from{left: -100vw;opacity: 0;}
    to{left: 0px; opacity: 1;}
}

@keyframes baskedGo {
    from{ transform: translate(-100vw,100px);}
    to{ transform: translate(0px,100px);} 
}

@keyframes baskedGoCard {
    from{ transform: translate(-100vw,65px);}
    to{ transform: translate(15px,65px);} 
}

@keyframes prodFall {
    from{transform: translate(0px,-100vh) rotate(50deg);}
    to{transform: translate(0px,50px) rotate(-10deg);}
}

@keyframes basFullBack {
    from{left: 0px; opacity: 1;}
    to{left: -100vw;opacity: 0;}
}

@keyframes cateGo {
    from{ transform: translate(100vw,0px);}
    to{ transform: translate(0px,0px);} 
}


@media screen and (min-width:1000px) {
    .planes{
        margin: 50px 0px;
        width: 100%;
        max-width: 1300px;
        height: 100%;
        display: grid;
        place-items: center;
        grid-template-columns: 25% 25% 25% 25%;
    
    }
    .prodLeft{
        margin: 50px 0px;
        width: 100%;
        max-width: 500px;
        height: 100%;
        display: grid;
        place-items: center;
        grid-template-columns: 50% 50%;
    }
    .product{
        width: 250px;
        position: relative;
        display: grid;
        place-items: center; 
        margin: 10px 0px;
        background-color: white;
        box-shadow: rgb(156, 156, 156) 2px 2px 5px;
    }
    .proImg{
        width: 250px;
       
    }
    .allCat{
        width: 60%;
        height: 90%;
        display: grid;
        place-items: center;
        z-index: 99;
        grid-template-columns: 25% 25% 25% 25%;
        padding: 0px;
        margin: 0px;
    }
    .categ img{
        width: 30vh;
        max-width: 185px;
        border-radius: 20px;
        box-shadow: rgb(156, 156, 156) 2px 2px 5px;
        transform: translate(100vw,0px);
    }
}