style.css

*{
  margin:0;
  
}
body{
  overflow:hidden
}
.header{
position:absolute;
top :0;
left:0;
width: 100%;
opacity: 1;
height:3rem;
text-align: center;
border-width:5px; 
display:flex;
align-items: center;
justify-content: space-between;

}
.headertext{  
    color:rgb(0, 0, 0);  
    font-family: 'Redressed', cursive;
    padding:0.1rem 1.5rem;
    font-size:1.4rem;
    width:10rem;
    font-weight: bold;
    z-index: 2;
}
.nav-content{
    color:rgb(0, 0, 0);  
    font-family: 'Redressed', cursive; 
    padding:0.1rem 1.5rem;
    font-size:1.4rem;
    width:10rem;
}

.links{
      text-decoration: none;
    }
  
    .wrapper{
      width: 100%;
      height:100vh;
      display:flex;
      align-items: center;
      justify-content: center;
      z-index: -1 ;
    }
.maintextbox{
   
    background-color:white;
    width:110vh;
    height:25vh;
    margin:10% auto;
  padding-bottom:20%;
  padding-left:29px;
    border-radius:20px;
   
    }

.instruction{
        margin:5%;
        margin-left:3px;
        color:black;
        border-radius: 20px;
    }

.time{
      margin-left: 46%;
        padding-top:1%;
        display:inline;
  
        visibility:hidden;
    }
.text{
     font-family: 'Poppins', sans-serif;
        font-size:4vh;
       float:left; 
       margin:1px; 
        width:1em;
       height:1.5em;
       text-align: center;
       padding-top:10px;
       margin-top: 5px;
       margin-bottom: 20px;
       padding-bottom:15px;
       background-color :#FFFFFF;
       color:#312a2a;
       border-radius:13%;
       visibility:hidden;
       animation-duration: 0.1s;
      animation-iteration-count:1;
      position:relative;
  
    }
.textfield{
  width:75%;
    position:absolute;
    padding-top:30px;
    padding-left:35px;
    display:block;
}
.entertostart{
  color:#000000;
  font-size: 250%;
  display:block;
  margin:20% auto;
  visibility:none;
  padding:0;
  margin-left: 25%;
}

@keyframes example {
  0%   {opacity:100%}
  25%  {opacity:5%}
  50%  {opacity:100%}
  75%  {opacity:5%}
  100% {opacity:100%}
}
@keyframes shake {
  0% { transform: translate(1px, 1px)  }
  10% { transform: translate(-1px, -2px) }
  20% { transform: translate(-3px, 0px)  }
  30% { transform: translate(3px, 2px)  }
  40% { transform: translate(1px, -1px)  }
  50% { transform: translate(-1px, 2px)  }
  60% { transform: translate(-3px, 1px) }
  70% { transform: translate(3px, 1px)  }
  80% { transform: translate(-1px, -1px) }
  90% { transform: translate(1px, 2px) }
  100% { transform: translate(1px, -2px)  }
}

.blinker{
 
  width:80%;
  height:3px;
  margin-left:5px;
  padding:0;
  background-color: #665DF5;
  border-radius: 1px;
  visibility:hidden;
  border-radius: 3px;
  position:absolute; bottom:0;
  animation-name: example;
  animation-duration: 3s;
  animation-iteration-count: infinite;  

}
.word{
  margin:10px auto;
  display: inline-block;
 
  }

.spanclass{
  color:rgb(29, 29, 66);
  margin-right: 5px;
  opacity:0;
  transition:all 1s ease;
  display:inline-block;
  transform:translateX(100px);
  

}

span.fade{
  font-family: 'Mulish', sans-serif;
  word-spacing:10px;
  opacity:1;
  transform:translateX(0px);
 animation-name: colorchange;
 animation-duration: 1s;
 animation-timing-function: ease-in-out;
 animation-iteration-count: infinite;
}
@keyframes colorchange{
0%{color:rgb(255, 153, 0) }
 
  60% {color:rgb(255, 0, 170)}

100%{color:rgb(255, 153, 0)}
}

.tryagainbutton{
  text-decoration: none;
  position: absolute;
  left:38%;
  margin-top: 20px;
    padding:10px 20px;
    background-color:#665DF5;
    color:white;
    font-size: 1.3rem;
    border:none;
 cursor:pointer;
}

.resultsbutton{
  text-decoration: none;
  position: absolute;
  left:58%;
  margin-top: 20px;
  padding:10px 20px;
  background-color:#665DF5;
  color:white;
  font-size: 1.3rem;
  color:rgb(255, 255, 255);
  border:none;
 cursor:pointer;
}

.results{
  position: relative;
  font-size:40px;
  width:150px;
  height:150px;
  float: left;
  display:none;
  margin-right: 8%;
  border-radius: 10px;
  color:deeppink;
  text-align: center;

}

.main-container{
  width:100%;
  height:100vh;
   display:none;
 align-items: center;
 justify-content: center;

}
.svgdiv{
  width:80%;
  height:80vh;
position:relative;
}
svg{
  z-index : -1;
  height:100%;
  width:100%;
  
}

.wrapper{
  width:100%;
  height:100%;
  position:relative;
}

.sample{
  width:38%;
  height:50%;
  
  position:absolute;
  top:20%;
  left:32%;
  
}
.styled-table  {
overflow: hidden;
display:flex;
justify-self: center;
 align-self: center;
 justify-content: center;
 align-items: center;
  border-collapse:collapse;
  font-size: 1.9rem;
  font-family: sans-serif;
  width:100%;
  height:102.5%;
  background-color:#FFFFFF;

}
td{
  border:3px solid #D7D9E1;
text-align: center;
border-collapse: collapse;
color:rgba(34, 120, 178, 0.651)
}

.styled-table td {
  padding: 0.3em 0.8em;
}


.styled-table tbody tr:nth-child(even) {
  background-color: #d563ff3a;
}

#netwpm ,#accuracy ,#correctkeystrokes, #wrongkeystrokes ,#uncorrectedletters{
color:#575A89
}
.analysismodal{
width:100%;
height:100%;
display:none;
background-color: rgba(0, 0, 0, 0.425);
position:fixed;
top:0;
left:0;
justify-content: center;
align-items: center;
z-index: 1;
}
a:hover{
  opacity:0.6;
}
.links:hover{
  opacity:0.6; 
}
.modal{
  width:55%;
  height:70%;
 background-color: white;
  border-radius: 0.5rem;
  position: relative;
  display:flex;
  align-items: center;
  justify-content:space-evenly;
  flex-direction: column;
  box-shadow: 3px 3px 3px #636161;
}
.modalclosebutton{
  position: absolute;
  top:5px;
  right:15px;
  font-size: 2rem;
  cursor:pointer;
  font-weight: bolder;
}
.modalimgdiv{
  width: 75%;
  height: 60%;

}
.svgholder{
  width:100%;
  height:100%;
  overflow: hidden;
 
}
.svgholder svg{
  width:100%;
  height: 100%;
}
.modalresults{
  width: 75%;
  height:25%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.modalclosebutton:hover{

  color:magenta
}
#modaljoysvg{
  display:none;
}
#modalsadsvg{
  display:none;

}
#modalhappysvg{
  display:none;
}
/*#emojicolor{
  animation-name:emojicolor;
  animation-duration:10s;
  animation-timing-function: ease-in-out;
 animation-iteration-count: infinite;
 transition: all 0.4s ease 0s;
}
@keyframes emojicolor{
  20%{
    fill:#FF0000;
  }
  50%{
    fill:#E432F3;

  }
  90%{
    fill:#6C63FF;
  }
}
*/
#bg{
  transform-origin:50% 50% ;
}
#floor{
  transform-origin:50% 50% ;
}
.oogabooga{
  font-family:redressed;
  font-size: 4.3rem;
  font-weight: bolder;
}
#modalresultsid{
  font-weight:100;
  font-family: mulish;
}
.oogabooga:hover{
  opacity:0.7;
}
.ooga2{
opacity:0.2;
color:rgb(65, 98, 247);

}
.oogastyle{
  font-family:redressed;
  font-size: 4.3rem;
  opacity:1;
  color:rgb(65, 98, 247);
  
  
}

.highwpm{
  width:500px;
  height:300px;
  position: fixed;
  top:63%;
  left:35%;
  border-radius: 1%;
  display:none;
  background: white;
}
.highwpmsvg{
  width:100%;
  height:100%;
}