body{
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
}

.hea{
    width: 100vw;
    height: auto;
    display: grid;
    place-items: center;
}
#soulbook {
    display: block;
    width: 200px;
    height: auto;
    margin: auto;
    padding: 20px;
}


.foot{
    height: 200vh;
}



#full{
    width: 100vw;
    position: sticky;
    top: 0px;
    height: 260px;
    display: grid;
    place-items: center;
    border-top: solid 1px black;
    border-bottom: solid 1px black;
    background-color: #FCE9F3;
    overflow: hidden;
    transition: 0.4s ease;


}
#move{

    width: 350px;
    overflow: hidden;
    /* background-color: darkgray; */
    height: 260px;
    display: grid;
    place-items: center;




}

#items{


    /* background-color: burlywood; */
    margin: 0;


    transform:  scale(0.48) translate(-445px,-300px) ;
    position: relative;
    transition: 0.4s ease ;

}



#fon{
    position: relative;
    width: 205mm;
    height: auto;
    /*z-index: 1;*/
}


.textVvid input[type=text]{
margin: 5px;
}











/************** Important ******************/


.one{
    padding: 0px;
    position: absolute;
    display: grid;
    place-items: center;
    width: 150px;
    height: 30px;
    top: 15px;
    left: -6px;
    /* background-color: burlywood; */
    overflow: hidden;

}
#one{
    font-size: 7px;
    margin: 0px;
    font-family:  Caveat;

}

 .oneONE{

    left: 93px;

}
#oneONE{
    font-size: 7px;
    margin: 0px;
    font-family:  Caveat;
}

.oneONEone{
    padding: 0px;
    position: absolute;
    display: grid;
    place-items: center;
    width: 260px;
    height: 30px;
    top: 15px;
    left: 140px;
    /* background-color: burlywood; */
    overflow: hidden;

}
#oneONEone{
    font-size: 7px;
    margin: 0px;
    font-family:  Caveat;
}

#inOne{
    position: absolute;
    top: 0px;
}


/************** Remember ******************/


.two{
    padding: 0px;
    position: absolute;
    display: grid;
    place-items: center;
    width: 150px;
    height: 40px;
    top: 35px;
    left: -5px;
    /* background-color: burlywood; */
    overflow: hidden;

}
#two ,#twoTWO , #twoTWOtwo {
    font-size: 8px;
    margin: 0px;
    font-family:  Pacifico;
    color: rgb(121, 121, 121);
    /* filter: drop-shadow(rgb(54, 54, 54) 0px 0px 5px); */
}


.twoTWO{
    padding: 0px;
    position: absolute;
    display: grid;
    place-items: center;
    width: 150px;
    height: 40px;
    top: 35px;
    left: 94px;
    /* background-color: burlywood; */
    overflow: hidden;

}


.twoTWOtwo{
    padding: 0px;
    position: absolute;
    display: grid;
    place-items: center;
    width: 150px;
    height: 40px;
    top: 35px;
    left: 194px;
    /* background-color: burlywood; */
    overflow: hidden;

}




/************** Enjoy ******************/


.three{
    padding: 0px;
    position: absolute;
    display: grid;
    place-items: center;
    width: 150px;
    height: 40px;
    top: 59px;
    left: 94px;
    /* background-color: burlywood; */
    overflow: hidden;

}
#three ,#threeTHREEthree, #threeTHREE{
    font-size: 11px;
    margin: 0px;
    font-family:  Amatic SC;
    color: rgb(121, 121, 121);
    /* filter: drop-shadow(rgb(54, 54, 54) 0px 0px 5px); */
}

.threeTHREE{
    padding: 0px;
    position: absolute;
    display: grid;
    place-items: center;
    width: 150px;
    height: 40px;
    top: 59px;
    left: -5px;
    /* background-color: burlywood; */
    overflow: hidden;

}



.threeTHREEthree{
    padding: 0px;
    position: absolute;
    display: grid;
    place-items: center;
    width: 150px;
    height: 40px;
    top: 59px;
    left: 194px;
    /* background-color: burlywood; */
    overflow: hidden;

}



/************** To Call ******************/


.four{
    padding: 0px;
    position: absolute;
    display: grid;
    place-items: center;
    width: 170px;
    height: 33px;
    top: 88px;
    left: 185px;
    /* background-color: burlywood; */
    overflow: hidden;

}
#four, #fourFOURfour,#fourFOUR {
    font-size: 7px;
    margin: 0px;
    font-family:  Rubik Mono One;
    color: rgb(255, 255, 255);
    filter: drop-shadow(rgb(165, 76, 98) 0px 0px 3px);
}



.fourFOUR{
    padding: 0px;
    position: absolute;
    display: grid;
    place-items: center;
    width: 170px;
    height: 33px;
    top: 88px;
    left: 84px;
    /* background-color: burlywood; */
    overflow: hidden;

}




.fourFOURfour{
    padding: 0px;
    position: absolute;
    display: grid;
    place-items: center;
    width: 170px;
    height: 33px;
    top: 88px;
    left: -14px;
    /* background-color: burlywood; */
    overflow: hidden;

}



/************** Workout ******************/


.five{
    padding: 0px;
    position: absolute;
    display: grid;
    place-items: center;
    width: 170px;
    height: 33px;
    top: 112px;
    left: 80px;
     /*background-color: burlywood; */
    overflow: hidden;

}
#five , #fiveFIVEfive,#fiveFIVE{
    font-size: 7px;
    margin: 0px;
    font-family:  Pacifico;
  color: rgb(255, 255, 255);
    filter: drop-shadow(rgb(15, 1, 95) 0px 0px 3px);
}


.fiveFIVE{
    padding: 0px;
    position: absolute;
    display: grid;
    place-items: center;
    width: 170px;
    height: 33px;
    top: 112px;
    left: -19px;
    /* background-color: burlywood; */
    overflow: hidden;

}



.fiveFIVEfive{
    padding: 0px;
    position: absolute;
    display: grid;
    place-items: center;
    width: 170px;
    height: 33px;
    top: 112px;
    left: 180px;
    /* background-color: burlywood; */
    overflow: hidden;

}



/************** Tomorrow ******************/


.six{
    padding: 0px;
    position: absolute;
    display: grid;
    place-items: center;
    width: 150px;
    height: 35px;
    top: 133px;
    left: -5px;
    /* background-color: burlywood; */
    overflow: hidden;

}
#six, #sixSIXsix, #sixSIX{
    font-size: 12px;
    margin: 0px;
    font-family:  Caveat;
    color: rgb(161, 160, 160);
    /* filter: drop-shadow(rgb(15, 1, 95) 0px 0px 3px); */
}


.sixSIX{
    padding: 0px;
    position: absolute;
    display: grid;
    place-items: center;
    width: 150px;
    height: 35px;
    top: 133px;
    left: 94px;
    /* background-color: burlywood; */
    overflow: hidden;

}


.sixSIXsix{
    padding: 0px;
    position: absolute;
    display: grid;
    place-items: center;
    width: 150px;
    height: 35px;
    top: 133px;
    left: 194px;
    /* background-color: burlywood; */
    overflow: hidden;

}





/************** Don`t forget ******************/


.seven{
    padding: 0px;
    position: absolute;
    display: grid;
    place-items: center;
    width: 150px;
    height: 35px;
    top: 159.5px;
    left: -5px;
    /* background-color: burlywood; */
    overflow: hidden;

}
#seven , #sevenSEVENseven,#sevenSEVEN{
    font-size: 6px;
    margin: 0px;
    font-family:  Rubik Mono One;
    color: rgb(255, 255, 255);
    filter: drop-shadow(rgb(73, 73, 73) 0px 0px 3px);



}

.sevenSEVEN{
    padding: 0px;
    position: absolute;
    display: grid;
    place-items: center;
    width: 150px;
    height: 35px;
    top: 159.5px;
    left: 94px;
    /* background-color: burlywood; */
    overflow: hidden;

}


.sevenSEVENseven{
    padding: 0px;
    position: absolute;
    display: grid;
    place-items: center;
    width: 150px;
    height: 35px;
    top: 159.5px;
    left: 194px;
    /* background-color: burlywood; */
    overflow: hidden;

}




/********************* To DO ***********/
.eight{
    padding: 0px;
    position: absolute;
    display: grid;
    place-items: center;
    width: 60px;
    height: 50px;
    top: 183px;
    left: 214.5px;
    /* background-color: burlywood; */
    overflow: hidden;
}


#eight ,#eightEIGHTeight,#eightEIGHT{
    font-size: 10px;
    margin: 0px;
    font-family:  Amatic SC;
    color: rgb(255, 255, 255);
    /* filter: drop-shadow(rgb(73, 73, 73) 0px 0px 3px); */
}

.eightEIGHT{
    padding: 0px;
    position: absolute;
    display: grid;
    place-items: center;
    width: 60px;
    height: 50px;
    top: 183px;
    left: 15.5px;
    /* background-color: burlywood; */
    overflow: hidden;
}





.eightEIGHTeight{
    padding: 0px;
    position: absolute;
    display: grid;
    place-items: center;
    width: 60px;
    height: 50px;
    top: 183px;
    left: 114px;
    /* background-color: burlywood; */
    overflow: hidden;
}






/********************* Notes ***********/
.nine{
    padding: 0px;
    position: absolute;
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    top: 178px;
    left: 262px;
    /* background-color: burlywood; */
    overflow: hidden;
}


#nine,#nineNINEnine,#nineNINE{

    font-size: 9px;
    margin: 0px;
    font-family:  Caveat;
    color: rgb(141, 141, 141);
    /* filter: drop-shadow(rgb(73, 73, 73) 0px 0px 3px); */
}


.nineNINE{
    padding: 0px;
    position: absolute;
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    top: 178px;
    left: 63px;
    /* background-color: burlywood; */
    overflow: hidden;
}





.nineNINEnine{
    padding: 0px;
    position: absolute;
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    top: 178px;
    left: 162px;
    /* background-color: burlywood; */
    overflow: hidden;
}












/*************** Quantity ***************/

.container{
    margin-top: 10px;
    position:relative;
    height: 220px;
    width: 100vw;
    display: grid;
    place-items: center;
}

.cifr{
    position: absolute;
    transform: translate(0px,-130px);
    width: 200px;
    height: 50px;
    background-color: #fff4f4;
    display: grid;
    place-items: center;
    border-radius: 10px;
    box-shadow: rgb(202, 200, 200) 5px -5px 5px;
    opacity: 0.8;
    transition: 0.2s ease;
    padding: 0px;
    margin: 0px;
}

.alignCifr{
    display: grid;
    place-items: center;
}
#quant{
    position: relative;
}

.quantImg{

    position: absolute;
    height: 220px;
    width: 350px;
    /* background-color: blanchedalmond; */
    display: grid;
    place-items: center;
}

/*********** База ****************/


    .img1{
        position: absolute;
width: 150px;
transform: translate(10px,0px) rotate(-70deg);
box-shadow: rgb(202, 200, 200) 5px -5px 5px;
transition: .5s ease;
}

    .img2{
        position: absolute;
width: 150px;
transform: translate(-10px,0px) rotate(-110deg);
box-shadow: rgb(202, 200, 200) 5px -5px 5px;
transition: .5s ease;
}

.img3{
        position: absolute;
width: 150px;
transform: translate(10px,0px) rotate(-70deg);
box-shadow: rgb(202, 200, 200) 5px -5px 5px;
transition: .5s ease;
opacity: 0;
}

    .img4{
        position: absolute;
width: 150px;
transform: translate(-10px,0px) rotate(-110deg);
box-shadow: rgb(202, 200, 200) 5px -5px 5px;
transition: .5s ease;
opacity: 0;
}

.img5{
        position: absolute;
width: 150px;
transform: translate(-10px,0px) rotate(-100deg);
box-shadow: rgb(202, 200, 200) 5px -5px 5px;
transition: .5s ease;
opacity: 0;
}

    .img6{
        position: absolute;
width: 150px;
transform: translate(-20px,0px) rotate(-120deg);
box-shadow: rgb(202, 200, 200) 5px -5px 5px;
transition: .5s ease;
opacity: 0;
}


.img7{
        position: absolute;
width: 150px;
transform: translate(-20px,-3px) rotate(-105deg);
box-shadow: rgb(202, 200, 200) 5px -5px 5px;
transition: .5s ease;
opacity: 0;
}

    .img8{
        position: absolute;
width: 150px;
transform: translate(-30px,0px) rotate(-115deg);
box-shadow: rgb(202, 200, 200) 5px -5px 5px;
transition: .5s ease;
opacity: 0;
}


.img9{
        position: absolute;
width: 150px;
transform: translate(-25px,0px) rotate(-115deg);
box-shadow: rgb(202, 200, 200) 5px -5px 5px;
transition: .5s ease;
opacity: 0;
}

    .img10{
        position: absolute;
width: 150px;
transform: translate(-35px,0px) rotate(-125deg);
box-shadow: rgb(202, 200, 200) 5px -5px 5px;
transition: .5s ease;
opacity: 0;
}






/************ Для 4 стікерів *************/
.img11{
        position: absolute;
width: 150px;
transform: translate(20px,0px) rotate(-60deg);
box-shadow: rgb(202, 200, 200) 5px -5px 5px;
transition: .5s ease;
}

    .img22{
        position: absolute;
width: 150px;
transform: translate(10px,0px) rotate(-80deg);
box-shadow: rgb(202, 200, 200) 5px -5px 5px;
transition: .5s ease;
}

.img33{
        position: absolute;
width: 150px;
transform: translate(-10px,0px) rotate(-100deg);
box-shadow: rgb(202, 200, 200) 5px -5px 5px;
transition: .5s ease;
opacity: 1;
}

    .img44{
        position: absolute;
width: 150px;
transform: translate(-20px,0px) rotate(-120deg);
box-shadow: rgb(202, 200, 200) 5px -5px 5px;
transition: .5s ease;
opacity: 1;
}

.img55{
        position: absolute;
width: 150px;
transform: translate(-10px,0px) rotate(-100deg);
box-shadow: rgb(202, 200, 200) 5px -5px 5px;
transition: .5s ease;
opacity: 1;
}

    .img66{
        position: absolute;
width: 150px;
transform: translate(-20px,0px) rotate(-120deg);
box-shadow: rgb(202, 200, 200) 5px -5px 5px;
transition: .5s ease;
opacity: 1;
}

/* 6 Стікерів */


.img111{
        position: absolute;
width: 150px;
transform: translate(30px,0px) rotate(-65deg);
box-shadow: rgb(202, 200, 200) 5px -5px 5px;
transition: .5s ease;
}

    .img222{
        position: absolute;
width: 150px;
transform: translate(20px,0px) rotate(-75deg);
box-shadow: rgb(202, 200, 200) 5px -5px 5px;
transition: .5s ease;
}

.img333{
        position: absolute;
width: 150px;
transform: translate(10px,-5px) rotate(-85deg);
box-shadow: rgb(202, 200, 200) 5px -5px 5px;
transition: .5s ease;
opacity: 1;
}

    .img444{
        position: absolute;
width: 150px;
transform: translate(-10px,-5px) rotate(-95deg);
box-shadow: rgb(202, 200, 200) 5px -5px 5px;
transition: .5s ease;
opacity: 1;
}

.img555{
        position: absolute;
width: 150px;
transform: translate(-20px,-3px) rotate(-105deg);
box-shadow: rgb(202, 200, 200) 5px -5px 5px;
transition: .5s ease;
opacity: 1;
}

    .img666{
        position: absolute;
width: 150px;
transform: translate(-30px,0px) rotate(-115deg);
box-shadow: rgb(202, 200, 200) 5px -5px 5px;
transition: .5s ease;
opacity: 1;
}


/* 8 Стікерів */


.img1111{
        position: absolute;
width: 150px;
transform: translate(35px,0px) rotate(-55deg);
box-shadow: rgb(202, 200, 200) 5px -5px 5px;
transition: .5s ease;
}

    .img2222{
        position: absolute;
width: 150px;
transform: translate(25px,0px) rotate(-65deg);
box-shadow: rgb(202, 200, 200) 5px -5px 5px;
transition: .5s ease;
}

.img3333{
        position: absolute;
width: 150px;
transform: translate(15px,0px) rotate(-75deg);
box-shadow: rgb(202, 200, 200) 5px -5px 5px;
transition: .5s ease;
opacity: 1;
}

    .img4444{
        position: absolute;
width: 150px;
transform: translate(5px,0px) rotate(-85deg);
box-shadow: rgb(202, 200, 200) 5px -5px 5px;
transition: .5s ease;
opacity: 1;
}

.img5555{
        position: absolute;
width: 150px;
transform: translate(-5px,0px) rotate(-95deg);
box-shadow: rgb(202, 200, 200) 5px -5px 5px;
transition: .5s ease;
opacity: 1;
}

    .img6666{
        position: absolute;
width: 150px;
transform: translate(-15px,0px) rotate(-105deg);
box-shadow: rgb(202, 200, 200) 5px -5px 5px;
transition: .5s ease;
opacity: 1;
}


.img7777{
        position: absolute;
width: 150px;
transform: translate(-25px,0px) rotate(-115deg);
box-shadow: rgb(202, 200, 200) 5px -5px 5px;
transition: .5s ease;
opacity: 1;
}

    .img8888{
        position: absolute;
width: 150px;
transform: translate(-35px,0px) rotate(-125deg);
box-shadow: rgb(202, 200, 200) 5px -5px 5px;
transition: .5s ease;
opacity: 1;
}


/* 10 Стікерів */


.img11111{
        position: absolute;
width: 150px;
transform: translate(90px,0px) rotate(-65deg);
box-shadow: rgb(202, 200, 200) 5px -5px 5px;
transition: .5s ease;
}

    .img22222{
        position: absolute;
width: 150px;
transform: translate(70px,0px) rotate(-70deg);
box-shadow: rgb(202, 200, 200) 5px -5px 5px;
transition: .5s ease;
}

.img33333{
        position: absolute;
width: 150px;
transform: translate(50px,0px) rotate(-75deg);
box-shadow: rgb(202, 200, 200) 5px -5px 5px;
transition: .5s ease;
opacity: 1;
}

    .img44444{
        position: absolute;
width: 150px;
transform: translate(30px,0px) rotate(-80deg);
box-shadow: rgb(202, 200, 200) 5px -5px 5px;
transition: .5s ease;
opacity: 1;
}

.img55555{
        position: absolute;
width: 150px;
transform: translate(10px,0px) rotate(-85deg);
box-shadow: rgb(202, 200, 200) 5px -5px 5px;
transition: .5s ease;
opacity: 1;
}

    .img66666{
        position: absolute;
width: 150px;
transform: translate(-10px,0px) rotate(-90deg);
box-shadow: rgb(202, 200, 200) 5px -5px 5px;
transition: .5s ease;
opacity: 1;
}


.img77777{
        position: absolute;
width: 150px;
transform: translate(-30px,0px) rotate(-95deg);
box-shadow: rgb(202, 200, 200) 5px -5px 5px;
transition: .5s ease;
opacity: 1;
}

    .img88888{
        position: absolute;
width: 150px;
transform: translate(-50px,0px) rotate(-100deg);
box-shadow: rgb(202, 200, 200) 5px -5px 5px;
transition: .5s ease;
opacity: 1;
}

.img99999{
        position: absolute;
width: 150px;
transform: translate(-70px,0px) rotate(-105deg);
box-shadow: rgb(202, 200, 200) 5px -5px 5px;
transition: .5s ease;
opacity: 1;
}

    .img1010{
        position: absolute;
width: 150px;
transform: translate(-90px,0px) rotate(-110deg);
box-shadow: rgb(202, 200, 200) 5px -5px 5px;
transition: .5s ease;
opacity: 1;
}

/***************** фініш ******************/

#arc{
    margin: 0px;
}



.topSel{
    margin-top: 70px;
    margin-bottom: 40px;
    width: 100vw;
    display: grid;
place-content: center;
}

.krut{
display: grid;
place-content: center;
margin: 0px;
}

.krut p{
    text-align: center;
    margin: 0px;
    margin-bottom: 0px;
}

.vart{
    display: none;
}

.slider {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  width: 200px; /* Full-width */
  height: 10px; /* Specified height */
  background: #fff4f4; /* Grey background */
  outline: none; /* Remove outline */
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
  border-radius: 10px;
  outline: none;
margin-top: 20px;
}

/* Mouse-over effects */
.slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 50px; /* Set a specific slider handle width */
  height: 50px; /* Slider handle height */
  background: #ffc4f0; /* Green background */
  cursor: pointer; /* Cursor on hover */
  border-radius: 50%;
  outline: none;
  transition: .3s ease;

}

.slider::-webkit-slider-thumb:focus{
    width: 75px; /* Set a specific slider handle width */
  height: 75px;
  transition: .3s ease;

}

.slider::-moz-range-thumb {
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #4CAF50; /* Green background */
  cursor: pointer; /* Cursor on hover */
  outline: none;
}





/************* newidea *********/


.full{
    display: grid;
    width: 100vw;
    place-items: center;
    /*background-color: ivory;*/
}
#container{
width: 335px;
height: 920px;

overflow: hidden;
background-color: #FCE9F3;
}

#fon{
width: 360px;
transform: scale(1) translate(0px,0px);
transition: 0.3s ease;

}

#fonImg{
width: 360px;
transform: scale(1) translate(0px,0px);
transition: 0.3s ease;
}

#vv{

display: grid;
place-items: center;
width: 250px;
visibility: hidden;

}


#text1{
padding: 0px;
position: absolute;
height: 600px;


display: grid;
place-items: center;
width: 250px;
height: 35px;

text-align: center;
background: none;
font-size: 20px;
transform: translate(0px,-865px);

border: none;
color: black;
margin: 0px;
font-family:  Caveat;

}

#text1:focus{
border: none;
outline: none;

}

#text1::placeholder{
color: black;
}



#text2{
padding: 0px;
position: absolute;
display: grid;
place-items: center;
width: 230px;
height: 50px;

text-align: center;
background: none;

transform: translate(10px,-795px);

border: none;
font-size: 26px;
margin: 0px;
font-family:  Pacifico;
color: rgb(121, 121, 121);
}

#text2:focus{
border: none;
outline: none;

}

#text2::placeholder{
color:  rgb(121, 121, 121);
}




#text3{
padding: 0px;
position: absolute;
display: grid;
place-items: center;
width: 230px;
height: 50px;

text-align: center;
background: none;

transform: translate(10px,-713px);

border: none;
font-size: 37px;
margin: 0px;
font-family:  Amatic SC;
color: rgb(121, 121, 121);

}

#text3:focus{
border: none;
outline: none;

}

#text3::placeholder{
color:  rgb(121, 121, 121);
}


#text4{
padding: 0px;
position: absolute;
display: grid;
place-items: center;
width: 250px;
height: 50px;

text-align: center;
background: none;

transform: translate(0px,-632px);

border: none;
font-size:23px;
margin: 0px;
font-family:  Rubik Mono One;
color: rgb(255, 255, 255);
filter: drop-shadow(rgb(165, 76, 98) 0px 0px 3px);
}

#text4:focus{
border: none;
outline: none;

}

#text4::placeholder{
color: rgb(255, 255, 255);
}


#text5{
padding: 0px;
position: absolute;
display: grid;
place-items: center;
width: 250px;
height: 50px;

text-align: center;
background: none;

transform: translate(-6px,-553px);

border: none;
font-size: 21px;
margin: 0px;
font-family:  Pacifico;
color: rgb(255, 255, 255);
filter: drop-shadow(rgb(15, 1, 95) 0px 0px 3px);
}

#text5:focus{
border: none;
outline: none;

}

#text5::placeholder{
color: rgb(255, 255, 255);}



#text6{
padding: 0px;
position: absolute;
display: grid;
place-items: center;
width: 230px;
height: 50px;

text-align: center;
background: none;

transform: translate(8px,-475px);

border: none;
font-size: 33px;
margin: 0px;
font-family:  Caveat;
color: rgb(161, 160, 160);
}

#text6:focus{
border: none;
outline: none;

}

#text6::placeholder{
color:  rgb(121, 121, 121);
}


#text7{
padding: 0px;
position: absolute;
display: grid;
place-items: center;
width: 230px;
height: 50px;

text-align: center;
background: none;

transform: translate(8px,-392px);

border: none;
font-size: 20px;
margin: 0px;
font-family:  Rubik Mono One;
color: rgb(255, 255, 255);
filter: drop-shadow(rgb(73, 73, 73) 0px 0px 3px);
}

#text7:focus{
border: none;
outline: none;

}

#text7::placeholder{
color: rgb(255, 255, 255);}



#text8{
padding: 0px;
position: absolute;
display: grid;
place-items: center;
width: 80px;
height: 50px;

text-align: center;
background: none;

transform: translate(2.5px,-287px);

border: none;
font-size: 30px;
margin: 0px;
font-family:  Amatic SC;
color: rgb(255, 255, 255);
}

#text8:focus{
border: none;
outline: none;

}

#text8::placeholder{
color: rgb(255, 255, 255);}

#text9{
padding: 0px;
position: absolute;
display: grid;
place-items: center;
width: 80px;
height: 50px;

text-align: center;
background: none;

transform: translate(160px,-284px);

border: none;
font-size: 28px;
margin: 0px;
font-family:  Caveat;
color: rgb(141, 141, 141);
}

#text9:focus{
border: none;
outline: none;

}

#text9::placeholder{
color:  rgb(121, 121, 121);}


.test{
height: 500px;

}

.test2{
height: 100px;

}

#text{
transform: translate(0px,-258px);
}


.cifr #quant{
    font-family:  Caveat;
    font-size: 30px;
    transition: 0.2s ease;
    padding: 0px;

}



/*************** Перевірка *******************/

.ca{
    display: grid;
    place-items: center;
    margin-top: 30px;
}


.finalCheck{
    display: grid;
    place-items: center;
    margin-top: 50px;
    border: solid 1px ;
    border-radius: 20px;
    width: 300px;
}

.pids{
    display: grid;
    place-items: center;
    height: 60px;
    margin: 10px;
    padding: 0px;
}

.pids p{
    padding: 0px;
    margin: 0px;
}

#checkPrice{
    display: grid;
    place-items: center;
    height: 60px;
    margin: 10px;
    padding: 0px;
}

#checkPrice p{
    padding: 0px;
    margin: 0px;
}


.warning{
    /* display: grid;
    place-items: center; */
    display: none;
    margin: 10px;
}

.warning p{

    margin: 10px;
    text-align: center;
}



#novaStart{
    background-color: #ffcce5;
    border: none;
    padding: 15px;
    margin: 35px;
    border-radius: 10px;
    display: block;
    outline: none;
    font-family: Caveat;
    font-size: 20px;
}

li{
    color: black;
}





#vse{
    height: 350px;
    width: 300px;
    border: solid 1px red;

    margin: auto;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 30px;
   display: grid;
   place-items: center;


}



#vse input[type=text] ,input[type=number] , input[type=tel]{
font-size: 20px;
    margin: 10px auto ;
    border: none;
    border-bottom: solid 1px rgb(253, 122, 122);
    width: 150px;
display: block;
    transition: 0.3s ease;
     -webkit-transition: 0.3s ease;
padding-left: 0;
background-image: none;
background-size: 0;
background-position: 0 ;
text-align:center;
font-family: Caveat;
}
#vse input[type=text]:focus ,input[type=number]:focus, input[type=tel]:focus{
    display: block;
    margin: auto;
    border: none;
    border-bottom: solid 1px rgb(253, 122, 122);
    outline: none;
    width: 250px;
    font-size: 30px;
    border-radius: 0px;
    text-align:start;
}

#vse input[type=text]::placeholder, input[type=number]::placeholder , input[type=tel]::placeholder{
color: rgb(253, 122, 122);
}

#novalogo{
    width: 200px;
    height: auto;

}


#ofor{
    /* display: none; */
padding-top: 0px;
    height: 100vh;
    background-color: white;

width: 100vw;
    position: fixed;
    top: 0px;
overflow-y: auto;
    z-index: 20;
  right: -120vw;
    transition: 0.4s ease;

margin-bottom: 50px;
}

#zamovl{
    margin-top: 20px;
    /* margin-bottom: 70px; */
}

#backEdit{
    margin-bottom: 70px;
}

#card{
    margin-top: 15px;
    margin-top: 15px;
    width: 200px;
}




#order{
    background-color: #ffcce5;
    border: none;
    padding: 20px;
    margin: auto;
    border-radius: 10px;
    display: block;
    outline: none;
    font-family: Caveat;
    font-size: 20px;

}

#backEdit{
    background-color: #ffcce546;
    border: none;
    padding: 8px;
    margin: 10px;
    border-radius: 10px;
    display: block;
    outline: none;
    color:  #f09bc5;
    font-family: Caveat;
    font-size: 15px;
}

.hea p {
    font-family: Caveat;
    font-size: 20px;
     text-align:start;
     margin:5px;
}

.hea li {
    font-family: Caveat;
    font-size: 20px;
     text-align:start;
     margin:5px;
}

 #mott{
    font-family: Amatic SC;
    font-size: 40px;
    text-align:center;
    margin:5px;
    color:#ffcce5;
}





.topMenu{
    width:350px;
    display: grid;
   place-items: center;
   grid-template-columns: 70% 30%;

}

#openMenu{
    width:40px;
     transition: .3s ease;
}


.sidePlace{
    z-index: 20;
    position: fixed;
    top: 0px;
    width: 100%;
    background-color: white;
    display: grid;
      overflow-y: auto;
      height:100%;
      margin: 0px;
      transition: .3s ease;
      transform: translate(-120%,0%);
}

.sideMenu{
    position: relative;
     z-index: 21;
 width: 350px;
 height: auto;
 margin: 0px;
}
.sideTop{
    width:100%;
    display: grid;
   place-items: center;
   grid-template-columns: 70% 30%;
   position: sticky;
   top: 0px;
   background-color: white;
   box-shadow: rgb(202, 200, 200) 0px 5px 5px;
   border-top-right-radius: 20px;
   border-bottom-right-radius: 20px;
}


.sideTop img{
    width:40px;
}


.contact{
     display: grid;
   place-items: center;
}


.oferta , .about{
    display: grid;
   place-items: center;
    padding: 10px;

}