* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
    font-family: quicksand, sans-serif;
    touch-action: auto;
  }
 
   
  html {
    font-size: 62.5%;
}

.container {
   margin: 0 auto;
   
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    overflow: hidden;
}

.form-wrapper {
    background-color: #eee;
    height: 95%;
    width: 95%;
   
    box-shadow: 0em 0em 5em rgb(81, 124, 243);
    
   
    position: absolute;
    overflow: hidden;
     border-radius: 3rem;
 
}

 .material-icons.information {
  
   position: absolute;
left: 46.7%;
top: 80%;
  cursor: pointer;
  color: #0f68f7;

}




.topText {
    
    font-size: 1vh;
    top: 2%;
        left: 50%;
      
     transform: translate(-50%);
    color: red;
    position: absolute;
   bottom: 50%;
    white-space: nowrap;
    transition: top 1.5s;
    overflow: hidden;
   
    
}




.congratsText {
    font-size: 2.5vh;
    top: 40%;
        left: 50%;
       transform: translate(-50%);
   
    color: white;
    position: absolute;
   bottom: 50%;
    white-space: nowrap;
    transition: top 1.5s;
    overflow: hidden;
   
    
}


.compName {
  position: absolute;
    transition: top 1.5s;
   
    bottom: 50%;
   
    left: 50%;
   transform: translate(-50%);
  
letter-spacing: 2.5px;


font-family: tachyon, sans-serif;

font-weight: 400;
font-style: normal;

font-size: 15px;
color: #0f68f7;

background: transparent;

  }  
 

 span {
   
   
    font-family: tachyon, sans-serif;

font-weight: 400;

font-style: normal;
font-size: 14px;
 text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  color: #fded73;
 }  


   
    .bottom-bg button {
        position: absolute;
      /*  top: -7%; */
      top: 15%;
     /* left: 50%; */
        left: 50%;
       transform: translate(-50%);
        width: 16vh;
        height: 5vh;
        background-color: transparent;
        border: .1rem solid white;
        border-radius: 3rem;
     
        letter-spacing: 0.1rem;
        color: blue;
        cursor: pointer;
        font-size: 1.5vh;
    }
    
   .accountInfo button {
        position: absolute;
        top: 50%;
        left: 50%; 
       transform: translate(-50%);
        width: 16vh;
        height: 5vh;
        background-color: transparent;
        border: .1rem solid white;
        border-radius: 3rem;
      
        letter-spacing: 0.1rem;
        color: blue;
        cursor: pointer;
        font-size: 1.5vh;
    } 

    
    .signup-form input {
        position: absolute;
       width: 90%;
        height: 8%;
        top: 12%;
       
        background-color: rgb(255, 255, 255);
       /* border: 2px solid white; */
       border: none;
        border-radius: 0.5rem;
        font-size: 5vh;
        display: flex;
       text-align: center;
       font-family: Roboto Mono, sans serif;
       
    }

    .bottom-bg {
        width: 100%;
        height: 50%;
        background: linear-gradient(to bottom, #f4d109, #9e880c);
           background: #e0b804;
        position: absolute;
        bottom: 0;
        left: 0;
        
        transition: height 1.5s cubic-bezier(.19, 1, 0.22, 1);
        z-index: 200;
         border-radius: 0 0 3rem 3rem;
    }
    
     

    .green-bg {
        width: 100%;
        height: 52%;
        background: linear-gradient(to top, #f4d109, #9e880c);
        background: #e0b804;
        position: absolute;
       left: 0;
        top: 0;
       z-index: 200;
        transition: height 1.5s cubic-bezier(.19, 1, 0.22, 1);
          border-radius: 3rem 3rem 0 0;
    }
    

    .container.change .bottom-bg {
        height: 10%;
         background: linear-gradient(to bottom, #e0b804, #e0b804, #e0b804, #e0b804, orange);
         transition: background 1.5s linear-gradient(to bottom, #e0b804, #e0b804, #e0b804, #e0b804, orange);
    }
    
    

    .container.change .green-bg {
        height: 10%;
         background: linear-gradient(to top, #e0b804, #e0b804, #e0b804, #e0b804, orange);
         transition: background 1.5s linear-gradient(to top, #e0b804,  #e0b804, #e0b804, #e0b804, orange);
       
    }
    
    .change .green-bg p {
        top: 10rem;
       
    }
.change .bottom-bg p{
   
   top: -10%;
   height: 50%;
 
   text-align: center;
}

.change .tag-Line p{
    top: 60%;
   height: 40%;
   font-size: 2vh;
 
   text-align: center;
}

  
   
    .change .bottom-bg button {  
    top: 150%;
    }
    
    .change .accountInfo button {  
    top: 150%;
    }
    

    .change .end-bg button {  
       top: 25%;
        height: 50%;
        }
     
        

 
    .signup-form {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
      padding: 8rem 0 8rem 0;
       background-color: rgba(0, 0, 0, 0);
       z-index: 100;
  
    }

  
    
    
    
     .signup-form .coverButton {
        position: absolute;
        width: 1000%;
        height: 10%;
        top: 12%;
        padding: 0.5rem 0 0.5rem 0;
        background-color: rgba(0, 0, 0, 0);
        border: none;
        border-radius: 0.5rem;
        font-size: 3rem;
        display: flex;
       text-align: center;
       font-family: Roboto Mono, sans serif;
   
    }
    
    .correctAnswer {
        position: absolute;
        color: rgba(0, 0, 0, 0);
        font-size: 3vh;
        top: 22%;
         width: 90%;
         text-align: center;
          overflow: hidden;
    overflow-y: auto;
    font-family: Roboto Mono, sans serif;
    }
    
.partOfSpeech {
    position: absolute;
  
   height: 5%;
   width: 45%;
    font-size: 2.5vh;
    top: 31%;
    text-align: center;
     overflow: hidden;
    overflow-y: auto;
    
     border: 1px solid white;
    border-radius: 0.5rem;
    background-color: lightyellow;
    padding: 0, 2rem, 0, 2rem;

}
.origin {
   
    position: absolute;

   height: 5%;
   width: 43%;
    font-size: 2.5vh;
    top: 38%;
    text-align: center;
     overflow: hidden;
    overflow-y: auto;
    
     border: 1px solid white;
    border-radius: 0.5rem;
    background-color: lightyellow;
    padding: 0, 2rem, 0, 2rem;
}

.wordS {
    position: absolute;
  
    width: 90%;
    height: 8.5%;
    top: 12%;
  
  
     overflow: hidden;
     overflow-y: auto;
     border-radius: 0.5rem;
     font-size: 5vh;
     text-align: center;
     font-family: Roboto Mono, sans serif;
  
   }
   
   .wordSP {
    position: absolute;
  
    width: 90%;
    height: 8.5%;
    top: 12%;
  
  
     overflow: hidden;
     overflow-y: auto;
     border-radius: 0.5rem;
     font-size: 5vh;
     text-align: center;
     font-family: Roboto Mono, sans serif;
  
   }

.detailedO {
   font-size: 2vh;
    position: absolute;
  height: 10%;
   width: 90%;
  top: 35%;
    text-align: center;
     overflow: hidden;
    overflow-y: auto;
    background-color: lightyellow;
    border: 1px solid white;
    border-radius: 0.5rem;
   
    padding: 0, 2rem, 0, 2rem;
}

.detailedOP {
   font-size: 2vh;
    position: absolute;
  height: 10%;
   width: 90%;
  top: 35%;
    text-align: center;
     overflow: hidden;
    overflow-y: auto;
    background-color: lightyellow;
    border: 1px solid white;
    border-radius: 0.5rem;
   
    padding: 0, 2rem, 0, 2rem;
}

.speechS {
   font-size: 2vh;
    position: absolute;
  height: 4.5%;
   width: 90%;
  top: 22%;
    text-align: center;
     overflow: hidden;
    overflow-y: auto;
    
    border: 1px solid white;
    border-radius: 0.5rem;
   
    padding: 0, 2rem, 0, 2rem;
}

.speechSP {
   font-size: 2vh;
    position: absolute;
  height: 4.5%;
   width: 90%;
  top: 22%;
    text-align: center;
     overflow: hidden;
    overflow-y: auto;
    
    border: 1px solid white;
    border-radius: 0.5rem;
   
    padding: 0, 2rem, 0, 2rem;
}


.definitionS {
   font-size: 3vh;
    position: absolute;
  height: 19%;
   width: 90%;
  top: 33.5%;
    text-align: center;
    overflow: hidden;
    overflow-y: auto;
    border: 1px solid white;
    border-radius: 0.5rem;
    background-color: lightblue;
    padding: 0, 2rem, 0, 2rem;
}

.definitionSP {
   font-size: 3vh;
    position: absolute;
  height: 19%;
   width: 90%;
  top: 33.5%;
    text-align: center;
    overflow: hidden;
    overflow-y: auto;
    
    border: 1px solid white;
    border-radius: 0.5rem;
    background-color: lightblue;
    padding: 0, 2rem, 0, 2rem;
}

.sentenceS {
   font-size: 2vh;
    position: absolute;
  height: 10%;
   width: 90%;
  top: 63.5%;
    text-align: center;
     overflow: hidden;
    overflow-y: auto;
    background-color: lightyellow; 
    border: 1px solid white;
    border-radius: 0.5rem;
   
    padding: 0, 2rem, 0, 2rem;
}

.sentenceSP {
   font-size: 2vh;
    position: absolute;
  height: 10%;
   width: 90%;
  top: 63.5%;
    text-align: center;
     overflow: hidden;
    overflow-y: auto;
    background-color: lightyellow; 
    border: 1px solid white;
    border-radius: 0.5rem;
   
    padding: 0, 2rem, 0, 2rem;
}

.pluralL {
   
    position: absolute;
  height: 3%;
   width: 44%;
  top: 80%;
    text-align: left;
     overflow: hidden;
    overflow-y: auto;
    font-size: 1.5vh;
    
    border: 1px solid white;
    border-radius: 0.5rem;
   
    padding: 0, 2rem, 0, 2rem;

}

.comment {
   
    position: absolute;
  height: 6.5%;
   width: 44%;
  top: 80%;
    text-align: left;
     overflow: hidden;
    overflow-y: auto;
    font-size: 1.5vh;
    
    border: 1px solid white;
    border-radius: 0.5rem;
  
    padding: 0, 2rem, 0, 2rem;

}

.setN {
   
    position: absolute;
  height: 3%;
   width: 44%;
  top: 80%;
    text-align: right;
     overflow: hidden;
    overflow-y: auto;
    font-size: 1.5vh;
    
    border: 1px solid white;
    border-radius: 0.5rem;
   
    padding: 0, 2rem, 0, 2rem;
}

.aka {
   
    position: absolute;
  height: 3%;
   width: 44%;
  top: 85%;
    text-align: right;
     overflow: hidden;
    overflow-y: auto;
    font-size: 1.5vh;
    
    border: 1px solid white;
    border-radius: 0.5rem;
  
    padding: 0, 2rem, 0, 2rem;
    color: magenta;
}

.otherTerm {
   
    position: absolute;
  height: 3%;
   width: 44%;
  top: 85%;
    text-align: right;
     overflow: hidden;
    overflow-y: auto;
    font-size: 1.5vh;
    
    border: 1px solid white;
    border-radius: 0.5rem;
  
    padding: 0, 2rem, 0, 2rem;
}
.pluralLP {
   
    position: absolute;
  height: 3%;
   width: 44%;
  top: 80%;
    text-align: left;
     overflow: hidden;
    overflow-y: auto;
    font-size: 1.5vh;
    
    border: 1px solid white;
    border-radius: 0.5rem;
   
    padding: 0, 2rem, 0, 2rem;

}

.commentP {
   
    position: absolute;
  height: 6.5%;
   width: 44%;
  top: 80%;
    text-align: left;
     overflow: hidden;
    overflow-y: auto;
    font-size: 1.5vh;
    
    border: 1px solid white;
    border-radius: 0.5rem;
  
    padding: 0, 2rem, 0, 2rem;

}

.setNP {
   
    position: absolute;
  height: 3%;
   width: 44%;
  top: 80%;
    text-align: right;
     overflow: hidden;
    overflow-y: auto;
    font-size: 1.5vh;
    
    border: 1px solid white;
    border-radius: 0.5rem;
   
    padding: 0, 2rem, 0, 2rem;
}

.akaP {
   
    position: absolute;
  height: 3%;
   width: 44%;
  top: 85%;
    text-align: right;
     overflow: hidden;
    overflow-y: auto;
    font-size: 1.5vh;
    
    border: 1px solid white;
    border-radius: 0.5rem;
  
    padding: 0, 2rem, 0, 2rem;
    color: magenta;
}

.otherTermP {
   
    position: absolute;
  height: 3%;
   width: 44%;
  top: 85%;
    text-align: right;
     overflow: hidden;
    overflow-y: auto;
    font-size: 1.5vh;
    
    border: 1px solid white;
    border-radius: 0.5rem;
  
    padding: 0, 2rem, 0, 2rem;
}

.pronounceL {
   
    position: absolute;

   height: 10%;
   width: 90%;
    font-size: 2vh;
    top: 38%;
    text-align: center;
     overflow: hidden;
    overflow-y: auto;
    
    
    border: 1px solid white;
    border-radius: 0.5rem;
   
    padding: 0, 2rem, 0, 2rem;
}

.pronounceLP {
   
    position: absolute;

   height: 10%;
   width: 90%;
    font-size: 2vh;
    top: 38%;
    text-align: center;
     overflow: hidden;
    overflow-y: auto;
    
    
    border: 1px solid white;
    border-radius: 0.5rem;
   
    padding: 0, 2rem, 0, 2rem;
}

.scoreNumber {
    position: absolute;
    display: flex;
    font-family: keania one, sans-serif;
    font-size: 3.5vh;
    height: 5%;
    width: 40%;
    font-weight: 400;
    color: grey;
    font-style: normal;
    justify-content: center;

}

.itemNumber {
    position: absolute;
    right: 5%;
    top: 43%;
    font-size: 2vh;
    
width: 40%;
font-weight: 400;
color: grey;
font-style: normal;

}


.timer {
    position: absolute;
    left: 5%;
    
    top: 32%;
       font-family: orbitron, sans-serif;
    font-size: 2.5vh;
    width: 12vh;

font-weight: 400;
font-style: normal;
background-color: none;

}

.nameSet {
    position: absolute;
    left: 5%;
    font-size: 2vh;
    top: 40%;
    
width: 40%;
font-weight: 400;

font-style: normal;
color: grey;

}

    
   .material-icons.next {
color: green;
  animation: blinker 1s linear infinite;
    display: flex;
  position: absolute;
cursor: pointer;
width: 10%;
justify-content: center;

}

 .material-icons.smileStudy {
      display: flex;
  position: absolute;
cursor: pointer;
color: orange;
width: 10%;
justify-content: center;
height: 4vh;

}

 

 .material-icons.studyNextButton {
    display: flex;
  position: absolute;

cursor: pointer;
color: green;
width: 10%;
justify-content: center;
 

}

.material-icons.studyBackButton {
  display: flex;
  position: absolute;

cursor: pointer;
color: green;
width: 10%;
justify-content: center;

}


 .material-icons.exitX {
 
color: red;

 position: absolute;
 display: flex;
 
cursor: pointer;
width: 10%;
font-size: 5vh;
justify-content: left;


height: 4vh;

    
}

.material-icons.exitCongrats {
 
color: red;

 position: absolute;
 display: flex;
 
cursor: pointer;
width: 10%;
font-size: 5vh;

justify-content: center;

    
}

.material-icons.exitCongratsSpelling {
 
color: red;

 position: absolute;
 display: flex;
 
cursor: pointer;
width: 10%;
font-size: 5vh;

justify-content: center;

    
}

.material-icons.studySpelling {
top: -100%;
   color: purple;
    display: flex;
  position: absolute;
cursor: pointer;

width: 10%;
justify-content: center;
 
}

.material-icons.studyVocab {

   color: purple;
   top: -100%;
   
  display: flex;
  position: absolute;
cursor: pointer;

width: 10%;
justify-content: center;
}

.material-icons.exitStudySpelling {

 top: -100%; 
   color: red;
  
    display: flex;
  position: absolute;
cursor: pointer;

width: 10%;
justify-content: center;

   
}

.material-icons.exitStudyVocab {

   color: red;
 
   
    display: flex;
  position: absolute;
cursor: pointer;
width: 10%;
justify-content: center;


}

.material-icons.exitWordReview {

   color: red;
 
   
    display: flex;
  position: absolute;
cursor: pointer;
width: 10%;
justify-content: center;
font-size: 5vh;

}


.material-icons.submit {
  color: magenta;
  animation: blinker 1s linear infinite;
    display: flex;
  position: absolute;
cursor: pointer;
width: 10%;
justify-content: center;

}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

.material-icons.allSound {
  
  
  color: #0f68f7;
  
   display: flex;
  position: absolute;
cursor: pointer;

width: 10%;
justify-content: center;


}

.material-icons.wordSoundFromVocab {
  

  color: #0f68f7;
  
   display: flex;
  position: absolute;
cursor: pointer;

width: 10%;
justify-content: center;

}

.material-icons.allSoundFromVocab {
  

  color: #0f68f7;
  
   display: flex;
  position: absolute;
cursor: pointer;

width: 10%;
justify-content: center;

}

  

.material-icons.allSoundSt {
  
   display: flex;
  position: absolute;

cursor: pointer;
color: blue;
width: 10%;
justify-content: center;

}

.material-icons.wordSoundSt {
  display: flex;
  position: absolute;
cursor: pointer;
color: blue;
width: 10%;
justify-content: center;
}

.material-icons.wordSoundFromSpell {

 cursor: pointer;
 color: #0f68f7;
 
  display: flex;
  position: absolute;
cursor: pointer;

width: 10%;
justify-content: center;
 
 

}

.material-icons.allSoundFromSpell {
  

 cursor: pointer;
 color: #0f68f7;
  display: flex;
  position: absolute;
cursor: pointer;

width: 10%;
justify-content: center;

}




    .image-bg button{
        position: absolute;
        bottom: 90%;
        left: 50%;
       transform: translate(-50%);
        width: 16vh;
        height: 5vh;
        background-color: transparent;
        border: .1rem solid #fff;
        border-radius: 3rem;
      
        letter-spacing: 0.1rem;
        color: red;
        cursor: pointer;
        z-index: -5;
      

    }

    .end-bg button {
        position: absolute;
        top: 1200%;
        left: 50%;
       transform: translate(-50%);
        width: 16vh;
        height: 5vh;
        background-color: transparent;
        border: .1rem solid white;
        border-radius: 3rem;
     
        letter-spacing: 0.1rem;
        color: blue;
        cursor: pointer;
        z-index: -5;
        font-size: 1.5vh;
}



@media screen and (min-height: 600px) {
   
     .compName {
        font-size: 15px;
    }
    
    span {
        font-size: 15px;
    }
    .end-bg button{
        height: 40px;
        width: 100px;
        
    }
   .change .image-bg p{
   top: 30%;
   left: 50%;
   height: 50%;
 font-size: 15px;
   text-align: center;
   
}
}

   
 


  @media screen and (min-width: 900px) {
      
    
    .compName {
        font-size: 20px;
    }
    
    .change .image-bg p{
   
   top: 40%;
   height: 50%;
 font-size: 20px;
   text-align: center;
}
    
    span {
        font-size: 20px;
    }
    .end-bg button{
        height: 40px;
        width: 100px;
        
     
    }
    .signup-form input {
        width: 90%;
        height: 10%;
        font-size: 5vh;
    }
    .form-wrapper {
        width: 70%;
        height: 95%;
    }
  
  }
  
    .textareaDefine {
       position: absolute;
   /*max-width: 500px;*/
 
        width: 90%;
    height: 18%;
 top: 67%;
    border: 1px solid white;
    overflow: hidden;
    overflow-y: auto;
    border-radius: 0.5rem;
font-size: 2.845vh;
text-align: center;
background-color: lightblue;
padding: 5rem, 5rem, 5rem, 5rem;

  }
  .textareaSentence {
   position: absolute;
        width: 90%;
    height: 7%;
   /* max-height:  10%;*/
    border: 1px solid white;
  top: 83%;
    overflow: hidden;
    overflow-y: auto;
    border-radius: 0.5rem;
    font-size: 2vh;
    text-align: center;
    background-color: lightyellow;
    padding: 0, 2rem, 0, 2rem;
  }
  
#active_log {
  color: rgb(81, 124, 243);
}

.keyboard {
    width: 90%;
    height: 18%;
    position: absolute;
    bottom: 5%;
  
    display: inline;
    /*flex-direction: column;*/
    justify-content: space-around;
   text-align: center;
  
 
   padding: 0 0 0 0;
   z-index: 100;
}

.keyboard button {
    color: #0f68f7;
    background-color: lightyellow;
    justify-content: center;
    width: 4.1vh;
    height: 4.4vh;
    border-radius: 0.5rem;
    cursor: pointer;
}

.keyboard .spaceB {
    cursor: pointer;

width: 8.5vh;
}

.vocabThis {
    position: absolute;
  
    width: 90%;
    height: 8.5%;
    top: 12%;
  
  
     overflow: hidden;
     overflow-y: auto;
     border-radius: 0.5rem;
     font-size: 5vh;
     text-align: center;
     font-family: Roboto Mono, sans serif;
  
   }

   .vocabPron{
    position: absolute;
    top: 24%;
   
    width: 90%;
    height: 5%;
    text-align: center;
    font-size: 2vh;
   }

   .vocabQues{
    position: absolute;
    top: 30%;
   
    width: 90%;
    height: 12%;
    text-align: center;
    font-size: 2.5vh;
    color: purple;
     overflow: hidden;
    overflow-y: auto;
     border: 1px solid white;
    border-radius: 0.5rem;
   
    padding: 0, 2rem, 0, 2rem;
   }

.aVocabButton {
    position: absolute;
    top: 53%;
    right: 5%;
    width: 15%;
    height: 10%;
font-size: 4vh;
font-weight: 800;
color: #0f68f7;
background-color: lightblue;
border-radius: 0.5rem;
cursor: pointer;
   }

   .aC {
    position: absolute;
    top: 53%;
    right: 20%;
    
height: 10%;
width: 75%;
font-size: 2.5vh;
overflow: hidden;
overflow-y: auto;
border-radius: 0.5rem;
text-align: center;
background-color: lightyellow;
border: 1px solid white;
   }

 .bVocabButton {
    position: absolute;
    top: 63.5%;
    right: 5%;
    width: 15%;
    height: 10%;
    font-size: 4vh;
    font-weight: 800;
    color: #0f68f7;
    background-color: #add8e6;
    border-radius: 0.5rem;
    cursor: pointer;
   }

   .bC {
    position: absolute;
    top: 63.5%;
    right: 20%;
   
height: 10%;
width: 75%;
font-size: 2.5vh;

overflow: hidden;
overflow-y: auto;
border-radius: 0.5rem;
text-align: center;
background-color: lightyellow;
border: 1px solid white;

   }
   .cVocabButton {
    position: absolute;
    top: 74%;
    right: 5%;
    width: 15%;
    height: 10%;
    font-size: 4vh;
font-weight: 800;
color: #0f68f7;
background-color: lightblue;
border-radius: 0.5rem;  
cursor: pointer;

   }

   .cC {
    position: absolute;
    top: 74%;
    right: 20%;
   
height: 10%;
width: 75%;
font-size: 2.5vh;
border: 1px solid white;
overflow: hidden;
overflow-y: auto;
border-radius: 0.5rem;
text-align: center;
background-color: lightyellow;

   }

   .material-icons.nvButton {
color: green;
  animation: blinker 1s linear infinite;
    display: flex;
  position: absolute;
cursor: pointer;
width: 10%;
justify-content: center;

  
   }

   .material-icons.wsButton {
    position: absolute;
  display: flex;
    cursor: pointer;
    width: 10%;
    border-radius: 0.5rem;
    color: #0f68f7;
  
    justify-content: center;
    
   }

   .asButton {
    position: absolute;
    top: 41%;
    right: 22%;
    width: 8%;
    border-radius: 0.5rem;
   
   }
   
   .scoreV {
       position: absolute;
    display: flex;
    font-family: keania one, sans-serif;
    font-size: 3.5vh;
    height: 5.5%;
    width: 40%;
    font-weight: 400;
    color: grey;
    font-style: normal;
    justify-content: center;
   
   }
   .timeV {
    position: absolute;
    left: 37%;
    top: 45%;
    
    text-align: center;
    font-family: orbitron, sans-serif;
    font-size: 2.5vh;
    color: #66ff99;
    width: 26%;
    height: 4%;
    
   }

   .setV {
    position: absolute;
    
 
 
    height: 3%;
    text-align: left;

   
    font-size: 2vh;
  
   }

   .itemV {
    position: absolute;

   
    height: 3%;
    text-align: left;
   
    font-size: 2vh;
 
   }

.chooseTestTypes {
    display: absolute;
   width: 100%;
  
    position: absolute;
    color: red;
    text-align: center;
    font-size: 2vh;
   
     overflow: hidden;
    overflow-y: auto;
   
   
}

.chooseTestTypesP {
    display: flex;
    top: 30%;
   
    position: absolute;
    color: red;
    text-align: center;
    font-size: 2vh;
   
}

.congrats {
   
     position: absolute;
    color: red;
    text-align: center;
    font-size: 4vh;
  
width: 90%;
left: 0%;
     font-family: 'Sacramento';
   
}

.emailOfUserP {
   top: 15%;
     position: absolute;
    color: red;
    text-align: center;
    font-size: 4vh;
  
width: 100%;
left: 0%;
    
   
}

.signup-form .inputChallenge {
   display: flex;
  
  /* top: 35%;*/
    top: 20%;
    height: 5vh;
   
    position: absolute;
  font-size: 2vh;
    text-align: center;

    padding: 8px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    border: 2px solid red;
 
}

.signup-form .inputChallengeP {
    display: flex;
    top: 35%;
    height: 5vh;
   
    position: absolute;
  font-size: 2vh;
    text-align: center;

    padding: 8px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    border: 2px solid red;
}

.commentsChallenge {
    top: 43%;
    position: absolute;
    color: red;
    text-align: center;
    font-size: 2vh;
}

.commentsChallengeP {
    top: 30%;
    position: absolute;
    color: red;
    text-align: center;
    font-size: 2vh;
}

.signup-form .submitChallengex {
     position: absolute;
    top: 50%;
    width: 16vh;
    height: 4vh;
    background-color: blue;
        border: .1rem solid blue;
        border-radius: 3rem;
        color: white;
          cursor: pointer;
          font-size: 1.5vh;
            letter-spacing: 0.1rem;
           
          
}


.signup-form .submitChallenge {
  position: absolute;
  background-color: blue;
     border: .1rem solid blue;
    letter-spacing: 0.1rem;
  top: 50%;
    width: 16vh;
    height: 4vh;
  border-radius: 3em;
  font-size: 1.5vh;
  color: white;
  /*padding: 0.8em 1.8em;*/
  cursor:pointer;
  /*user-select:none;*/
  /*text-align: center;*/
  /*text-decoration: none;*/
  cursor: pointer;
  transition-duration: 0.4s;
  -webkit-transition-duration: 0.4s; /* Safari */
}

.signup-form .submitChallenge:hover {
  transition-duration: 0.1s;
  background-color: #0041c2;
  
}

.signup-form .submitChallenge:after {
  content: "";
  display: block;
  position: absolute;
  border-radius: 4em;
  left: 0;
  top:0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: all 0.5s;
  box-shadow: 0 0 10px 40px white;
   animation: vibrate 0.5s;
}

.signup-form .submitChallenge:active:after {
  box-shadow: 0 0 0 0 white;
  position: absolute;
  border-radius: 4em;
  left: 0;
  top:0;
  opacity: 1;
  transition: 0s;
}

.signup-form .submitChallenge:active {
  top: 1px;
}








.signup-form .submitChallengeP {
     position: absolute;
    top: 50%;
    width: 16vh;
    height: 4vh;
    background-color: transparent;
        border: .1rem solid blue;
        border-radius: 3rem;
        color: blue;
          cursor: pointer;
          font-size: 1.5vh;
            letter-spacing: 0.1rem;
}


.signup-form .addToArray {
     position: absolute;
    top: 70%;
    width: 16vh;
    height: 4vh;
    background-color: lightblue;
        border: .1rem solid lightblue;
        border-radius: 3rem;
        color: blue;
          cursor: pointer;
          font-size: 1.5vh;
            letter-spacing: 0.1rem;
}

.signup-form .addToArray:hover {
  transition-duration: 0.1s;
  background-color: skyblue;
}

.signup-form .addToArray:after {
  content: "";
  display: block;
  position: absolute;
  border-radius: 4em;
  left: 0;
  top:0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: all 0.5s;
  box-shadow: 0 0 10px 40px white;
}

.signup-form .addToArray:active:after {
  box-shadow: 0 0 0 0 white;
  position: absolute;
  border-radius: 4em;
  left: 0;
  top:0;
  opacity: 1;
  transition: 0s;
}

.signup-form .addToArray:active {
  top: 1px;
}



.signup-form .addToArrayP {
     position: absolute;
    top: 70%;
    width: 16vh;
    height: 4vh;
    background-color: transparent;
        border: .1rem solid skyblue;
        border-radius: 3rem;
        color: blue;
          cursor: pointer;
          font-size: 1.5vh;
            letter-spacing: 0.1rem;
}

.signup-form .removeFromArray {
     position: absolute;
  
    width: 16vh;
    height: 4vh;
    background-color: lightblue;
        border: .1rem solid lightblue;
        border-radius: 3rem;
        color: blue;
          cursor: pointer;
          font-size: 1.5vh;
            letter-spacing: 0.1rem;}

.signup-form .removeFromArray:hover {
  transition-duration: 0.1s;
  background-color: skyblue;
}

.signup-form .removeFromArray:after {
  content: "";
  display: block;
  position: absolute;
  border-radius: 4em;
  left: 0;
  top:0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: all 0.5s;
  box-shadow: 0 0 10px 40px white;
}

.signup-form .removeFromArray:active:after {
  box-shadow: 0 0 0 0 white;
  position: absolute;
  border-radius: 4em;
  left: 0;
  top:0;
  opacity: 1;
  transition: 0s;
}

.signup-form .removeFromArray:active {
  top: 1px;
}            
            
            
            
 
 .signup-form .removeFromArrayP {
     position: absolute;
    top: 65%;
    width: 16vh;
    height: 4vh;
    background-color: transparent;
        border: .1rem solid skyblue;
        border-radius: 3rem;
        color: blue;
          cursor: pointer;
          font-size: 1.5vh;
            letter-spacing: 0.1rem;}           
            
            
.signup-form .listOfOwnArray {
     position: absolute;
    top: 70%;
    width: 16vh;
    height: 4vh;
    background-color: lightblue;
        border: .1rem solid lightblue;
        border-radius: 3rem;
        color: blue;
          cursor: pointer;
          font-size: 1.5vh;
            letter-spacing: 0.1rem;            
}

.signup-form .listOfOwnArray:hover {
  transition-duration: 0.1s;
  background-color: skyblue;
}

.signup-form .listOfOwnArray:after {
  content: "";
  display: block;
  position: absolute;
  border-radius: 4em;
  left: 0;
  top:0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: all 0.5s;
  box-shadow: 0 0 10px 40px white;
}

.signup-form .listOfOwnArray:active:after {
  box-shadow: 0 0 0 0 white;
  position: absolute;
  border-radius: 4em;
  left: 0;
  top:0;
  opacity: 1;
  transition: 0s;
}

.signup-form .listOfOwnArray:active {
  top: 1px;
}





.signup-form .listOfOwnArrayP {
     position: absolute;
    top: 49%;
    right: 15%;
    width: 16vh;
    height: 4vh;
    background-color: transparent;
        border: .1rem solid skyblue;
        border-radius: 3rem;
        color: blue;
          cursor: pointer;
          font-size: 1.5vh;
            letter-spacing: 0.1rem;            
}

.signup-form .testOwnSet {
     position: absolute;
    top: 80%;
    width: 16vh;
    height: 4vh;
    background-color: lightblue;
        border: .1rem solid lightblue;
        border-radius: 3rem;
        color: blue;
          cursor: pointer;
          font-size: 1.5vh;
            letter-spacing: 0.1rem;
}

.signup-form .testOwnSet:hover {
  transition-duration: 0.1s;
  background-color: skyblue;
}

.signup-form .testOwnSet:after {
  content: "";
  display: block;
  position: absolute;
  border-radius: 4em;
  left: 0;
  top:0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: all 0.5s;
  box-shadow: 0 0 10px 40px white;
}

.signup-form .testOwnSet:active:after {
  box-shadow: 0 0 0 0 white;
  position: absolute;
  border-radius: 4em;
  left: 0;
  top:0;
  opacity: 1;
  transition: 0s;
}

.signup-form .testOwnSet:active {
  top: 1px;
}


.signup-form .testOwnSetP {
     position: absolute;
    top: 55%;
    width: 16vh;
    height: 4vh;
    background-color: transparent;
        border: .1rem solid skyblue;
        border-radius: 3rem;
        color: blue;
          cursor: pointer;
          font-size: 1.5vh;
            letter-spacing: 0.1rem;
}

.signup-form .testOwnSetVo {
     position: absolute;
    top: 80%;
    width: 16vh;
    height: 4vh;
    background-color: lightblue;
        border: .1rem solid lightblue;
        border-radius: 3rem;
        color: blue;
          cursor: pointer;
          font-size: 1.5vh;
            letter-spacing: 0.1rem;
}

.signup-form .testOwnSetVo:hover {
  transition-duration: 0.1s;
  background-color: skyblue;
}

.signup-form .testOwnSetVo:after {
  content: "";
  display: block;
  position: absolute;
  border-radius: 4em;
  left: 0;
  top:0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: all 0.5s;
  box-shadow: 0 0 10px 40px white;
}

.signup-form .testOwnSetVo:active:after {
  box-shadow: 0 0 0 0 white;
  position: absolute;
  border-radius: 4em;
  left: 0;
  top:0;
  opacity: 1;
  transition: 0s;
}

.signup-form .testOwnSetVo:active {
  top: 1px;
}



.signup-form .testOwnSetVoP {
     position: absolute;
    top: 80%;
    width: 16vh;
    height: 4vh;
    background-color: transparent;
        border: .1rem solid skyblue;
        border-radius: 3rem;
        color: blue;
          cursor: pointer;
          font-size: 1.5vh;
            letter-spacing: 0.1rem;
}
.signup-form .studyOwn {
     position: absolute;
    top: 80%;
    width: 16vh;
    height: 4vh;
    background-color: lightblue;
        border: .1rem solid lightblue;
        border-radius: 3rem;
        color: blue;
          cursor: pointer;
          font-size: 1.5vh;
            letter-spacing: 0.1rem;
}

.signup-form .studyOwn:hover {
  transition-duration: 0.1s;
  background-color: skyblue;
}

.signup-form .studyOwn:after {
  content: "";
  display: block;
  position: absolute;
  border-radius: 4em;
  left: 0;
  top:0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: all 0.5s;
  box-shadow: 0 0 10px 40px white;
}

.signup-form .studyOwn:active:after {
  box-shadow: 0 0 0 0 white;
  position: absolute;
  border-radius: 4em;
  left: 0;
  top:0;
  opacity: 1;
  transition: 0s;
}

.signup-form .studyOwn:active {
  top: 1px;
}



.signup-form .studyOwnP {
     position: absolute;
    top: 80%;
    width: 16vh;
    height: 4vh;
    background-color: transparent;
        border: .1rem solid skyblue;
        border-radius: 3rem;
        color: blue;
          cursor: pointer;
          font-size: 1.5vh;
            letter-spacing: 0.1rem;
}

.signup-form .listOfNotOwn {
     position: absolute;
    top: 80%;
    width: 16vh;
    height: 4vh;
    background-color: lightblue;
        border: .1rem solid blue;
        border-radius: 3rem;
        color: blue;
          cursor: pointer;
          font-size: 1.5vh;
            letter-spacing: 0.1rem;
}

.signup-form .listOfNotOwn:hover {
  transition-duration: 0.1s;
  background-color: skyblue;
}

.signup-form .listOfNotOwn:after {
  content: "";
  display: block;
  position: absolute;
  border-radius: 4em;
  left: 0;
  top:0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: all 0.5s;
  box-shadow: 0 0 10px 40px white;
}

.signup-form .listOfNotOwn:active:after {
  box-shadow: 0 0 0 0 white;
  position: absolute;
  border-radius: 4em;
  left: 0;
  top:0;
  opacity: 1;
  transition: 0s;
}

.signup-form .listOfNotOwn:active {
  top: 1px;
}






.signup-form .listOfNotOwnP {
     position: absolute;
    top: 80%;
    width: 16vh;
    height: 4vh;
    background-color: transparent;
        border: .1rem solid blue;
        border-radius: 3rem;
        color: blue;
          cursor: pointer;
          font-size: 1.5vh;
            letter-spacing: 0.1rem;
}

.signup-form .emptyList {
     position: absolute;
    top: 80%;
    width: 16vh;
    height: 4vh;
    background-color: lightblue;
        border: .1rem solid lightblue;
        border-radius: 3rem;
        color: blue;
          cursor: pointer;
          font-size: 1.5vh;
            letter-spacing: 0.1rem;
}

.signup-form .emptyList:hover {
  transition-duration: 0.1s;
  background-color: skyblue;
}

.signup-form .emptyList:after {
  content: "";
  display: block;
  position: absolute;
  border-radius: 4em;
  left: 0;
  top:0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: all 0.5s;
  box-shadow: 0 0 10px 40px white;
}

.signup-form .emptyList:active:after {
  box-shadow: 0 0 0 0 white;
  position: absolute;
  border-radius: 4em;
  left: 0;
  top:0;
  opacity: 1;
  transition: 0s;
}

.signup-form .removeFromArray:active {
  top: 1px;
}


.signup-form .emptyListP {
     position: absolute;
    top: 80%;
    width: 16vh;
    height: 4vh;
    background-color: transparent;
        border: .1rem solid skyblue;
        border-radius: 3rem;
        color: blue;
          cursor: pointer;
          font-size: 1.5vh;
            letter-spacing: 0.1rem;
}

.signup-form .signupInsideTest {
     position: absolute;
    top: 65%;
    width: 16vh;
    height: 4vh;
    background-color: transparent;
        border: .1rem solid orange;
        border-radius: 3rem;
        color: blue;
          cursor: pointer;
          font-size: 1.5vh;
            letter-spacing: 0.1rem;
}

.signup-form .signupInsideLog {
     position: absolute;
    top: 65%;
    width: 16vh;
    height: 4vh;
    background-color: transparent;
        border: .1rem solid red;
        border-radius: 3rem;
        color: blue;
          cursor: pointer;
          font-size: 1.5vh;
            letter-spacing: 0.1rem;
}



.signup-form .inputUsername {
    top: 42%;
    height: 5vh;
    width: 40vh;
    position: absolute;
  font-size: 2rem;
    text-align: left;

    padding: 8px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    
      padding: 8px;
        background-color: rgb(255, 255, 255);
        border: 2px solid red;
        border-radius: 0.5rem;
    
        display: flex;
      
       font-family: Roboto Mono, sans serif;
       text-align: center;
}

.signup-form .inputPassword {
    top: 62%;
    height: 5vh;
    width: 40vh;
    position: absolute;
  font-size: 2rem;
    text-align: left;

    padding: 8px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    text-align: center;
     border: 2px solid red; 
}




.loginButton button{
        position: absolute;
        top: 35%;
        left: 50%;
       transform: translate(-50%);
        width: 16vh;
        height: 5vh;
        background-color: transparent;
        border: .1rem solid white;
        border-radius: 3rem;
     
        letter-spacing: 0.1rem;
        color: blue;
        cursor: pointer;
        font-size: 1.5vh;
    }
    
    
    
    .signupButton button{
        position: absolute;
        top: 55%;
        left: 50%;
       transform: translate(-50%);
        width: 16vh;
        height: 5vh;
        background-color: transparent;
        border: .1rem solid white;
        border-radius: 3rem;
      
        letter-spacing: 0.1rem;
        color: blue;
        cursor: pointer;
         font-size: 1.5vh;
    }
    
 

.logoImage {
    position: absolute;
     left: 50%;
    transform: translate(-50%);
   
   top: 15%;
    
}

.busyBee {
   position: absolute;
   left: 50%;
   transform: translate(-50%);
   top: 10%;
  
}

.change .busyBee {
    left: -100%;
    top: -100%;
}

.tagLine {
    position: absolute;
    font-family: Sacramento, sans-serif;
    color: white;
    bottom: 38%;
    text-align: center;
    font-size: 3vh;
    left: 50%;
    transform: translate(-50%);
    white-space: nowrap;
    transition: top 1.5s;
    overflow: hidden;
}

.change .tagLine {
    left: -200%;
}

.welcome {
    position: absolute;
   
    color: black;
  left: 50%;
  top: 70%;
    text-align: center;
   
    
      font-size: 3vh;
  
      
       transform: translate(-50%);

  
    white-space: nowrap;
    transition: top 1.5s;
    overflow: hidden;
    
   
}

.change .welcome {
    left: -1000%;
}

 .logout-button button{
        position: absolute;
        top: 50%;
        left: 50%;
       transform: translate(-50%);
        width: 16vh;
        height: 5vh;
        background-color: transparent;
        border: .1rem solid white;
        border-radius: 3rem;
       
        letter-spacing: 0.1rem;
        color: blue;
        cursor: pointer;
        font-size: 1.5vh;
    }
    
 .change .logout-button button {  
    top: 150%;
    }
    
     .change .logoImage{  
bottom: -50%;
 left: -50%;   
    }

 .buttonForLog button {
     position: absolute;
        top: 65%;
        left: 50%;
       transform: translate(-50%);
        width: 16vh;
        height: 5vh;
        background-color: transparent;
        border: .1rem solid blue;
        border-radius: 3rem;
       
        letter-spacing: 0.1rem;
        color: blue;
        cursor: pointer;
        font-size: 1.5vh;
}  

.btn-primary {
     position: absolute;
        top: 65%;
        left: 50%;
       transform: translate(-50%);
        width: 16vh;
        height: 5vh;
        background-color: transparent;
        border: .1rem solid blue;
        border-radius: 3rem;
       
        letter-spacing: 0.1rem;
        color: blue;
        cursor: pointer;
        font-size: 1.5vh;
}

/* (A) WRONG ORIENTATION - SHOW MESSAGE HIDE CONTENT */
@media only screen 
 and (orientation:landscape)
and (min-device-width : 320px)   
and (max-device-width : 480px)  


{
  
  #turn { display:block;
  color: white;
  position: fixed;
  
    
  width: 100%;
  height: 100%;
      font-size: 5vh;
        
            text-align: center;
            background-color: blue;
  
  
  }
  #container { display:none;
  background-color: blue;
    
  }
}

@media only screen 
 and (orientation:portrait)



{
  
  #turn { display:none;
  
  }
  #container { display:block;
 
    
  }
}

.lands {
     font-size: 5vh;
    position: absolute;
   width: 100%; 
   height: 100;
   top: 40%;
    text-align: center;
    color: white;
   
}

.acctName {
    font-size: 3vh;
    width: 100%;
   height: 5%;
   left: 0%;
    position: absolute;
    text-align: center;
   
}

.setnameAtEnd {
    font-size: 2vh;
    width: 90%;
   height: 5%;
   left: 5%;
    position: absolute;
    text-align: center;
   border: red;
 
}

.correctVocabArray {
       position: absolute;
 
        width: 90%;
    height: 5%;
 top: 50%;
 right: 5%;
 
  /*  overflow: hidden;
    overflow-y: auto;*/
  
font-size: 2vh;
text-align: center;



  }
  
  .incorrectVocabArray {
       position: absolute;
 
        width: 90%;
    height: 5%;
 top: 70%;
 right:5%;
 
  /*  overflow: hidden;
    overflow-y: auto;*/
  
font-size: 2vh;
text-align: center;
}
.sampleScreen {
       position: absolute;
 
        width: 90%;
    height: 5%;
 top: 85%;
 right:5%;
 
    overflow: hidden;
    overflow-y: auto;
  
font-size: 2vh;
text-align: center;
background-color: yellow;

  }
  
  .sampleTime {
       position: absolute;
 
        width: 40%;
    height: 4%;
 top: 64.5%;
 right:5%;
 

font-size: 2.5vh;
text-align: right;
color: orange;

font-family: 'Monomaniac One', sans-serif;

  }
  
.material-symbols-outlined {
   position: absolute;
   cursor: pointer;
   width: 10%;

   text-align: center;
   

}

.changePasswordButton {
        position: absolute;
        top: 80%;
        left: 30%;
       transform: translate(-50%);
        width: 16vh;
        height: 5vh;
        background-color: transparent;
        border: .1rem solid blue;
        border-radius: 3rem;
       
        letter-spacing: 0.1rem;
        color: blue;
        cursor: pointer;
        font-size: 1.5vh;
    }
    
    .forgotPasswordButton {
        position: absolute;
        top: 75%;
        left: 30%;
       transform: translate(-50%);
        width: 16vh;
        height: 5vh;
        background-color: transparent;
        border: .1rem solid blue;
        border-radius: 3rem;
       
        letter-spacing: 0.1rem;
        color: blue;
        cursor: pointer;
        font-size: 1.5vh;
    }
    
     .cancelPasswordButton {
        position: absolute;
        top: 75%;
        left: 30%;
       transform: translate(-50%);
        width: 16vh;
        height: 5vh;
        background-color: transparent;
        border: .1rem solid blue;
        border-radius: 3rem;
       
        letter-spacing: 0.1rem;
        color: blue;
        cursor: pointer;
        font-size: 1.5vh;
    }
    
.submitNewPasswordButton {
        position: absolute;
        top: 80%;
        left: 70%;
       transform: translate(-50%);
        width: 16vh;
        height: 5vh;
        background-color: lightblue;
        border: .1rem solid blue;
        border-radius: 3rem;
       
        letter-spacing: 0.1rem;
        color: blue;
        cursor: pointer;
        font-size: 1.5vh;
    }  
    
    .deleteAccountButton {
        position: absolute;
        top: 80%;
        left: 70%;
       transform: translate(-50%);
        width: 16vh;
        height: 5vh;
        background-color: transparent;
        border: .1rem solid blue;
        border-radius: 3rem;
      
        letter-spacing: 0.1rem;
        color: blue;
        cursor: pointer;
        font-size: 1.5vh;
    }    

 .noDeleteAccount {
        position: absolute;
        top: 80%;
        left: 30%;
       transform: translate(-50%);
        width: 16vh;
        height: 5vh;
        background-color: lightblue;
        border: .1rem solid blue;
        border-radius: 3rem;
      
        letter-spacing: 0.1rem;
        color: blue;
        cursor: pointer;
        font-size: 1.5vh;
    }  
    
  .yesDeleteAccount {
        position: absolute;
        top: 80%;
        left: 70%;
       transform: translate(-50%);
        width: 16vh;
        height: 5vh;
        background-color: transparent;
        border: .1rem solid gray;
        border-radius: 3rem;
       
        letter-spacing: 0.1rem;
        color: gray;
        cursor: pointer;
        font-size: 1.5vh;
    } 
    
    .questionDelete {
   position: relative;
        color: red;
  text-align: center;
   
        font-size: 2rem;
    }
    
    .signup-form .editA {
     position: absolute;
    top: 80%;
    width: 16vh;
    height: 4vh;
    background-color: transparent;
        border: .1rem solid skyblue;
        border-radius: 3rem;
        color: blue;
          cursor: pointer;
          font-size: 1.5vh;
            letter-spacing: 0.1rem;
}
    

.editA {
     position: absolute;
    top: 80%;
    width: 16vh;
    height: 4vh;
    background-color: transparent;
        border: .1rem solid skyblue;
        border-radius: 3rem;
        color: blue;
          cursor: pointer;
          font-size: 1.5vh;
            letter-spacing: 0.1rem;
}

.signup-form .left {
     position: absolute;
    top: -80%;
   
    width: 2rem;
    height: 2rem;
    background-color: lightyellow;
       border-right: 1.0rem transparent;
      border-left: 1.0rem solid lightblue;
      border-top: 1.0rem transparent;
      border-bottom: 1.0rem transparent;
        border-radius: 2rem;
       
          cursor: pointer;
         
           
}

.signup-form .right {
     position: absolute;
    top: -80%;
   
    width: 2rem;
    height: 2rem;
    background-color: lightyellow;
      border-right: 1.0rem solid lightblue;
      border-left: 1.0rem transparent;
      border-top: 1.0rem transparent;
      border-bottom: 1.0rem transparent;
      border-radius: 2rem;
          cursor: pointer;
       
}

.signup-form .edge {
     position: absolute;
    top: -80%;
    width: 2.2rem;
    height: 2.2rem;
    background-color: transparent;
     border-right: 0.4rem solid blue;
      border-left: 0.4rem solid blue;
      border-top:0.4rem solid blue;
      border-bottom: 0.4rem solid blue;
      
      border-radius: 2rem;
}

.signup-form .emailForm {
    position: absolute;
    top: 85%;
    left: 43%;
}

.correctList {
  font-size: 2vh;
    position: absolute;
  height: 100%;
   width: 90%;
  top: 44%;
    text-align: center;
    overflow: hidden;
    overflow-y: auto;
    
    border: 1px solid white;
    border-radius: 0.5rem;
    background-color: #90EE90;
    padding: 0, 2rem, 0, 2rem;
    opacity: 100%;
   cursor: pointer;
}

.incorrectList {
  font-size: 2vh;
    position: absolute;
  height: 100%;
   width: 90%;
  top: 64%;
    text-align: center;
    overflow: hidden;
    overflow-y: auto;
    
    border: 1px solid white;
    border-radius: 0.5rem;
    background-color: #FF7F7F;
    padding: 0, 2rem, 0, 2rem;
    opacity: 100%;
  cursor: pointer;
}

.signup-form .testMistake {
     position: absolute;
    top: 80%;
    width: 16vh;
    height: 4vh;
    background-color: lightblue;
        border: .1rem solid lightblue;
        border-radius: 3rem;
        color: blue;
          cursor: pointer;
          font-size: 1.5vh;
            letter-spacing: 0.1rem;
}




/* END */