@counter-style thumbs {
    system: cyclic;
    symbols: "\1F6F8" "\1F680" "\1F6F0" "\1FA90" "\2604";
    suffix: " ";
  }
  a:hover {
    cursor:pointer;
   }
  .custom {
    list-style: thumbs;
  }
  #introCS{
     margin-left:0 ;
   margin-right: 2rem;
    padding: 0; 
    width: 90%;
    text-align: left;
  }

  .Title{
    font-family: 'Cairo Play', sans-serif;
  }
  
.phone{
    background-image: url(../images/gundum.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  
  background-attachment: fixed;
  
  height: 200vh;
}

.topLayer{
    margin-top: 20rem;
}

.space{
    margin: 5rem;
    /* margin-bottom: 15rem; */
    padding-top: 5rem;
}
.space2{
    margin-top: 5rem;
}
.width-80{
    max-width: 50% !important;
    margin: 2rem;
}
.glass{
    
    
    background: rgba(255, 255, 255, 0.11);

padding: 40px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(3.6px);
-webkit-backdrop-filter: blur(3.6px);
border: 1px solid rgba(255, 255, 255, 0.2);
}

.underlined{
    text-align: center;
    border-bottom: greenyellow  2px solid;
    width: 100%;
}
.resized{
    font-size: 36px;
    width:auto;
    text-align: center;
    padding: 1rem;
    text-decoration: none;
    color: #4e697d  ;
}

.glass2{
    background: rgba(255, 255, 255, 0.06);
border-radius:0px;
padding: 40px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(3.6px);
-webkit-backdrop-filter: blur(3.6px);
border: 1px solid rgba(255, 255, 255, 0.2);
}

.boldly{
color: gold;
font-weight: bold;
font-size: larger;
}

.center{
    width: auto !important; 

}
.text-info{
    color: greenyellow !important; 
}
.text-info:hover{
    color:rgb(255, 31, 188) !important;
  
}

.list-group-item{
    background-color: #4e697d;
    color: whitesmoke;
}

.over:hover {
    
    border-color:#876bd1 ;
    box-shadow: 20px 20px 60px yellowgreen,
    -20px -20px 60px rgb(255, 31, 188);
    
}
.over:hover i{
   color: yellowgreen; 
}
.over:hover h5{
    border-color: yellowgreen;
}
.over:hover a{
    border-color: yellowgreen;

}
.accordion-button{
    background-color: #4e697d;
    color: whitesmoke;
    
}
.accordion-item{
    
    background-color: #3D4450;
    color: whitesmoke;
    border-color: #3D4450;
    box-shadow: 20px 20px 60px #23262E,
    -20px -20px 60px #4e697d;
}



.animate__animated.animate__flipInY {
  --animate-delay: 15s;
  --animate-duration: 1.5s;
}
.scroller {
    height: 300px;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
  }
  

  #word {
    font-size: 60px;
    margin-bottom: 20px;
}
#message {
    font-size: 18px;
    margin-bottom: 20px;
}
#inputBox {
    margin-top: 20px;
    
}
#guessedLetters {
    font-size: 18px;
    margin-top: 20px;
}
#hint {
    font-size: 18px;
    margin-top: 20px;
}

.footer{
    background-color: #3D4450;
    border: yellowgreen solid 2px  ;
   border-left: none;
   border-right: none;
    border-radius: 0;
    box-shadow: 20px 20px 60px yellowgreen,
    -20px -20px 60px rgb(255, 31, 188);
}
nav{
    border-bottom: yellowgreen solid 2px ;
}

.tile{
    border-left: 2px solid yellowgreen;
}

.underline{border-bottom: 2px solid yellowgreen;}

.subTitle{border-bottom: 2px solid yellowgreen;}