about.css

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}

body{
overflow: hidden;

}
nav{
    width:100%;
    height:3rem;
    display:flex;
    align-items: center;
    justify-content: flex-start;
  
    
}
.home{
    font-family: 'Redressed', cursive;
    margin-left:1.4rem;
    color:rgb(0, 0, 0);
    font-size:1.4rem;
    font-weight:bold;
}
.loadingscreen{
width:100%;
height:100vh;
background-color: black;
position:absolute;
top:0;
left:0;
display:flex;
align-items: center;
justify-content: center;
flex-direction: column;

}
.loadingscreen h1{
    font-size: 4rem;
    color:white;
    font-family: 'Heebo', sans-serif;
    width:7em;
    transform:translateY(300%)
}
.slider{
    width:100%;
    height:100vh;
    background:#73a8f8;
    position:fixed;
    top:0;
    transform:translateY(100%)
}
.hide{
    background-color: rgb(0, 0, 0);
    overflow:hidden;
}
main{
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#main1{

    width:100%;
    height:100vh;
    display:none;
    justify-content: center;
    align-items: center;
    flex-direction: column;

}

.welcome{
            width:60%;
            height:100%;
            font-size: 32px;
            display:flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
}


.why{
    display:flex;
    justify-content: center;
    align-items:center;
    margin-top: 3rem;
    width:100%;
    height:100%;
    overflow:hidden;

}
.maintext{
    margin-top: 30px;
    width:100%;
    text-align:center;
    font-size: 64px;
    font-family: 'Finger Paint', cursive;
 
}
.explanation{
    width:75%;
    margin-top: 40px;
    margin-left:5px;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 18px;
    font-weight: 300;
}
.trynowbutton{
    font-family: "Heebo";
    margin-top: 20px;
    padding:10px 20px;
    background-color:#665DF5;
    color:white;
    font-size: 1.3rem;
    border:none;
    cursor:pointer
}
.wrapper{
    width:100%;
    height:70%;
    background: url("back2.svg");
    background-repeat: no-repeat;
     background-size:100% 300%;
     background-position: top;
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.imgdiv{
    width: 30%;
    height: 100%;
}
.imgdiv img{
    width:100%;
    height:80%;
}
.imgdiv h1{
    text-align: center;
    font-family: 'Finger Paint', cursive;
}
.main2{
    width:100%;
    height:1450px;
    display:flex;
    flex-direction: column;
    justify-content:flex-start;
    align-items: flex-end;

}
.svgcontainer{
    width:45%;
    height:70vh;
    margin-left: 100px;


}
.svgcontainer svg{
    width:100%;
    height:100%;
}
.step1{
    margin-left: 120px;
    width:45%;
    height:50vh;
    display:flex;
    justify-content: center;
    align-items: center;
  
  
}  
.firstholder{
    margin-top: 50px;
    margin-top: 40px;
    width:100%;
    display:flex;
    justify-content: center;
    align-items: center;
    background: #f7f6f6;
}

.main3{
    width:100%;
    height:100vh;
 display:flex;
justify-content: center;
 align-items: center;
 flex-direction: column;
 position:relative;


}
.rock{
    z-index:2;
}
#instruct{
        margin-bottom: 50px;
        font-family: 'Nunito Sans', sans-serif;
       font-size: 50px;
}
.progress{
    position: absolute;
    top:0;
    left:0;
    width:0%;
    height:2px;
    background-color: #665DF5;
    transition:all 0.5s ease;
}
.anim{
width:100%;
height:100%;
display:flex;
justify-content: center;
align-items:center
   
    
}
.calculation-heading{
    position: absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    font-size: 50px;
    font-family:"Nunito Sans";
    font-weight: bolder;
}
.wpm-wrapper{
    width:700px;
    height:30vh;
 display: flex;
 justify-content: center;
 align-items: flex-start;
}
.accuracy-wrapper{
    width:700px;
    height:30vh;
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
  
}
footer{
    width:100%;
    height:20vh;
    background: rgb(238, 196, 196);
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.wpm{
height:80%;
width:25%;
border-right: 3px solid black;
display:flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
overflow:hidden
}
.wpmex{
    height:80%;
    width:70%;
    display:flex;
justify-content: center;
align-items: center;
margin-left: 20px;
flex-wrap: wrap;
overflow:hidden
}
.acc{
    height:80%;
    width:25%;
    display:flex;
justify-content: center;
align-items: center;
border-right: 3px solid black;
overflow:hidden;
flex-wrap: wrap;
}.accex{
    height:80%;
        width:70%;
        margin-left: 20px;
        display:flex;
        justify-content: center;
        align-items: center;
        overflow:hidden;
      
    }
    .wpm h3,.acc h3{
        font-family: "Nunito Sans";
        font-size: 32px;
    }
   .wpmex h3,.accex h3{
       font-family: "Nunito Sans";
       font-weight: normal;
       font-size: 18px;
   }
   .wpmex a{
       text-decoration: none;
       color:rgba(0, 0, 255, 0.753)
   }
   @media only screen and (max-width:600px){
    .maintext{
        font-size: 32px;
    }
    .welcome{
        width:100vw
    }
    .explanation{
        width:100%
    }
.trynowbutton{
    font-size: 1rem;
    padding: 5px 10px;
}
.loadingscreen{
    font-size: 1rem;
}
.loadingscreen span{
    font-size: 1rem;
}

.imgdiv h1{
    font-size: 20px;
}
.wpmex{
    width:30%
}
.accex{ 
width:30%
}
.wpm-wrapper{
    width:100%;
    height:40vh;

}
.accuracy-wrapper{
    width: 100%;
    height:40vh
}
.wpm h3,.acc h3{
    font-family: "Nunito Sans";
    font-size: 20px;
}
.wpmex h3,.accex h3{
   font-family: "Nunito Sans";
   font-weight: normal;
   font-size: 16px;
}

}
.footertxt{
    font-family: "Nunito Sans";
    font-size: 32px;
    cursor: pointer;
}