body{

.bitcount-grid-double-<uniquifier> {
  font-family: "Bitcount Grid Double", system-ui;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "slnt" 0,
    "CRSV" 0.5,
    "ELSH" 0,
    "ELXP" 0;


.suse-mono-<uniquifier> {
  font-family: "SUSE Mono", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;

  // <weight>: Use a value from 100 to 900
// <uniquifier>: Use a unique and descriptive class name

.roboto-<uniquifier> {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}
}
}
    
header{
    height: 100px;
    width:600px;
    background-color: aliceblue;
    opacity: 0%;
    z-index:2;
}


section{
    color: rgb(0, 0, 0);
    border-radius:5px;
    opacity: 100%;
    text-align: center;
    position:sticky;
    padding-top: 35px;
    font:normal;
    right: 44   0px;
    top: -20px;
    z-index: 5;
    position: relative;
    font-family: "Bitcount Grid Double", system-ui;
    size: 0px;
}



nav{
    width: 500px;
    height: 100px;
    text-align: center;
    border-radius: 4px;
    margin:auto;
    position:relative;
    padding-top: 20px;
    left: 00px;
    z-index: 6;
    right: 500px;
    display: block ;
    unicode-bidi: isolate;
    color: black;
    top: 380px;

}

a{ 
    color:rgb(0, 0, 0);
    text-decoration: none;
    font-size:20px;
    padding-left:10px;
    padding-right: 10px;
    text-align: center;
}

.questions{
    color: black;
    font-size:30px;
    position: absolute;
    z-index: 14;
    font-family:Georgia, 'Times New Roman', Times, serif ;
    top: 1900px;
    left: 350px;
    margin: 2   0px;
    white-space: 10px;

}



.squiggle1{
    position: relative;
    background-color: rgb(255, 255, 255);
    width: 150px;
    height: 50px;
    top: 1250px;
    border-radius: 50px;
    right: 100px;
    z-index: 11;

}

.squiggle1:before{
    content: 'aaaaaaaaaaaa';
    position:absolute;
    top: -42;
    left:0;
    font-size: 4cm;
    color: transparent;
    text-decoration-style: wavy;
    text-decoration-color:rgb(180, 201, 244);
    text-decoration-line: underline;
    animation: animate 1s linear infinite;

}


.FAQ{
    color:rgb(180, 201, 244);
    font-size: 2cm;
    position:absolute;
    bottom: 650px;
    left: 710px;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;

}

.Beans{
    color:rgb(180, 201, 244);
    font-size: 2cm;
    position:absolute;
    top:1100px;
    left: 700px;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

.squiggle{
    position: relative;
    background-color: rgb(255, 255, 255);
    width: 150px;
    height: 50px;
    top: 600px;
    border-radius: 50px;
    right: 100px;
}

.squiggle:before{
    content: 'aaaaaaaaaaaa';
    position:absolute;
    top: -42;
    left:0;
    font-size: 4cm;
    color: transparent;
    text-decoration-style: wavy;
    text-decoration-color:rgb(180, 201, 244);
    text-decoration-line: underline;
    animation: animate 1s linear infinite;

}

@keyframes animate
{
    0%
    {
    transform: translateX(-1px);
    }
    100%
    {
    transform: translateX(-50px;)
    }

}

.hold3{
    height: 150px;
    width:180px;
    background-color:rgb(208, 208, 208);
    border-radius: 20px;
    position:relative;
    padding-bottom: 53px;
    right: 150px;
    top: 150px;
}

.text3{
    text-align:center;
    position:relative;
    width: 160px;
    left: 10px;
    color: rgb(0, 0, 0);
    opacity: 100%
}

.hold2{
    height: 150px;
    width:180px;
    background-color:rgb(208, 208, 208);
    border-radius: 20px;
    position:relative;
    padding-bottom: 17px;
    right: 150px;
    top: 150px;
}

.text2{
    text-align:center;
    position:relative;
    width: 160px;
    left: 10px;
    color: rgb(0, 0, 0);
    opacity: 100%
}

.hold1{
    height: 150px;
    width:180px;
    background-color:rgb(208, 208, 208);
    border-radius: 20px;
    position:relative;
    
    right: 150px;
    top: 150px;
}

.text1{
    text-align:center;
    position:relative;
    width: 160px;
    left: 10px;
    color: rgb(0, 0, 0);
    opacity: 100%
}


.stars{
    display: flex;
    flex-direction:column;
    flex-wrap:wrap;
    height:20px;
    width: 10px;
}


.star{
    position:relative;
    top: 120px;
    right: 15px;
    width: 20px;
    height:20px;
    background-color:rgb(255, 231, 74);
    clip-path: polygon(
        50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 
        21% 91%, 32% 57%, 2% 35%, 39% 35%
    );
}

.name{
    position: relative;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    text-align: center;
    top: 80px;
    font-style: italic;
}   

.circle{
    height:25px;
    width:25px;
    position:absolute;
    background-color: rgb(195, 195, 195);
    z-index: 15;
    border-radius: 15px;
    top: 23px;
    left: 83px;
}

.oval{
    height:25px;
    width:40px;
    position:absolute;
    background-color: rgb(195,195,195);
    z-index: 15;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
    top: 60px;
    left: 76px;
}

.circle2{
    height:25px;
    width:25px;
    position:absolute;
    background-color: rgb(195, 195, 195);
    z-index: 15;
    border-radius: 15px;
    top: 23px;
    left: 83px;
}

.oval2{
    height:25px;
    width:40px;
    position:absolute;
    background-color: rgb(195,195,195);
    z-index: 15;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
    top: 60px;
    left: 76px;
}

.circle3{
    height:25px;
    width:25px;
    position:absolute;
    background-color: rgb(195, 195, 195);
    z-index: 15;
    border-radius: 15px;
    top: 23px;
    left: 83px;
}

.oval3{
    height:25px;
    width:40px;
    position:absolute;
    background-color: rgb(195, 195, 195);
    z-index: 15;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
    top: 60px;
    left: 76px;
}

.profile{
    background-color: rgb(174, 174, 174);
    position:relative;
    height:70px;
    width:70px;
    border-radius: 40px;
    left: 60px;
    top: 15px;
}

.holder{
    display: flex;
    flex-direction:column;
    flex-wrap:wrap;
    height:400px;
    width: 300px;
}

.reviews:hover{
    transform:  scale(1.3);
     box-shadow: 5px 5px 10px 2px rgb(145, 145, 145);
}


.reviews{
    background-color:rgb(238, 238, 238);
    height: 300px;
    width: 200px;
    border-radius: 25px;
    position: relative;
    flex-wrap: wrap;
    top: 1000px;
    white-space: 10px;
    box-shadow: 5px 5px 10px 2px rgb(145, 145, 145);
    margin: 5px;
    z-index: 11;
}

.swirly11{
  height:90px;
    width:83px;
    z-index:7;
    background-size:cover;
    position:absolute;  
    top: 1500px;  
    right: 270px;
    rotate: 199deg;


}

.swirly10{
  height:90px;
    width:83px;
    z-index:7;
    background-size:cover;
    position:absolute;  
    top: 1000px;  
    right: 100px;
    rotate: 100deg;


}

.swirly9{
  height:90px;
    width:83px;
    z-index:7;
    background-size:cover;
    position:absolute;  
    top: 1500px;  
    right: 1200px;
    rotate: 19deg;


}


.swirly8{
  height:90px;
    width:83px;
    z-index:7;
    background-size:cover;
    position:absolute;  
    top: 1200px;  
    right: 1200px;
    rotate: 199deg;


}


.swirly7{
  height:90px;
    width:83px;
    z-index:7;
    background-size:cover;
    position:absolute;  
    top: 710px;  
    right: 1220px;
    rotate: 180deg;


}


.swirly6{
  height:900px;
    width:830px;
    z-index:7;
    background-size:cover;
    position:absolute;  
    top: 1300px;  
    right: 1500px;
    rotate: 219deg;


}


.swirly5{
  height:90px;
    width:83px;
    z-index:7;
    background-size:cover;
    position:absolute;  
    top: 600px;  
    right: 340px;
    rotate: 129deg;


}


.swirly4{
  height:100px;
    width:83px;
    z-index:7;
    background-size:cover;
    position:absolute;  
    top: 400px;  
    right: 1140px;
    rotate: 29deg;


}



.swirly2{
  height:90px;
    width:83px;
    z-index:7;
    background-size:cover;
    position:absolute;  
    bottom: 201px;
    right: 100px;
    rotate: 45deg;

}

.swirly3{
  height:90px;
    width:83px;
    z-index:7;
    background-size:cover;
    position:absolute;  
    top: 21px;
    right: 240px;
    rotate: 321deg;


}

.swirly{
  height:90px;
    width:83px;
    z-index:7;
    background-size:cover;
    position:absolute;  
    top: 400px;  
    right: 240px;
    rotate: 359deg;

}

.image11{
    height:90px;
    width:83px;
    z-index:7;
    background-size:cover;
    position:absolute;  
    top: 1730px;
    right: 1200px;
    rotate: 249deg;

}

.image10{
    height:90px;
    width:83px;
    z-index:7;
    background-size:cover;
    position:absolute;  
    top: 460px;
    right: 270px;
    rotate: 59deg;

}

.image9{
    height:90px;
    width:83px;
    z-index:7;
    background-size:cover;
    position:absolute;  
    top: 1900px;
    right: 100px;
    rotate: 319deg;

}


.image8{
    height:90px;
    width:83px;
    z-index:7;
    background-size:cover;
    position:absolute;  
    top:1000px;
    right: 50px;
   rotate: 229deg;
    
}

.image7{
    height:90px;
    width:83px;
    z-index:7;
    background-size:cover;
    position:absolute;  
    top:500px;
    left: 280px;
   rotate: 38deg;
}

.image6{
    height:90px;
    width:83px;
    z-index:7;
    background-size:cover;
    position:absolute;  
    top:1400px;
    left: 250px;
   rotate: 60deg;
}

.image5{
    height:90px;
    width:83px;
    z-index:7;
    background-size:cover;
    position:absolute;  
    top:100px;
    right: 150px;
   rotate: 317deg;
}

.image4{
    height:90px;
    width:83px;
    z-index:7;
    background-size:cover;
    position:absolute;  
    top:50px;
    left: 150px;
   rotate: 35deg ;
}

.swirly11:hover{
    transform:  scale(1.3);
    
}

.swirly10:hover{
    transform:  scale(1.3);
    
}

.swirly9:hover{
    transform:  scale(1.3);
    
}

.swirly8:hover{
    transform:  scale(1.3);
    
}

.swirly7:hover{
    transform:  scale(1.3);
    
}

.swirly6:hover{
    transform:  scale(1.3);
    
}

.swirly5:hover{
    transform:  scale(1.3);
    
}
.swirly4:hover{
    transform:  scale(1.3);
    
}

.swirly3:hover{
    transform:  scale(1.3);
    
}

.swirly2:hover{
    transform:  scale(1.3);
    
}

.swirly:hover{
    transform:  scale(1.3);
    
}

.image11:hover{
    transform:  scale(1.3);
    
}

.image10:hover{
    transform:  scale(1.3);
    
}

.image9:hover{
    transform:  scale(1.3);
    
}

.image8:hover{
    transform:  scale(1.3);
    
}

.image7:hover{
    transform:  scale(1.3);
    
}

.image6:hover{
    transform:  scale(1.3);
    
}

.image5:hover{
    transform:  scale(1.3);
    
}

.image4:hover{
    transform:  scale(1.3);
    
}
.image3:hover{
    transform:  scale(1.3);
    
}

.image3{
    height:90px;
    width:83px;
    z-index:8;
    background-size:cover;
    position:relative;  
    bottom:50px;
    right:300px;
   

}
  
.image2{
    height:500px;
    width:500px;
    z-index:4;
    background-size:cover;
    top: -900px;
    position:relative;
    right: 50px;
}

.image1{
    height:500px;
    width:600px;
    margin:auto;
    background-size:cover;
    z-index:4;
    padding-top:20px;
    position:relative;
    bottom: 750px;
    left: 400px;
 
}

main{
    border-radius: 25px;
    height:2250px;
    width:600px;
    background-color: rgb(255, 255, 255);
    padding-left:101px;
    padding-right:100px;    
    margin:auto;
    z-index:3;
    
    
}

.box{
    
    background: rgb(171, 195, 243);
    left: 0;
    height: 2500px;
    position:absolute;
    right: 0;
}

footer{

    background-color:rgb(180, 201, 244);
    width:600px;
    height:200px;
    padding-left:101px;
    padding-right:100px;
    position:relative;
    right:101px;
    top: 410px;
    opacity:70%;
    border-bottom-right-radius: 25px;
    border-bottom-left-radius: 25px;
}

.INFO{
    font-size: 15px;
    text-align: center ;
    position:relative;
    top: 100px;
    font-family: "Roboto", sans-serif;    
    color: rgb(40, 122, 255);
    opacity: 100%;
}

.container{ 
    display: flex;
    flex-direction:row;
    flex-wrap: wrap;
}