body{
    margin: 0px;
    min-height: 100vh;
    background-color: #F8F6E3;
    /* display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; */
}
h2{
    color: #7AA2E3;
    position: fixed;
    top: 3%;
    left: 2%;
    margin: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

h2 img{
    width: 100px;
    height: 100px;
    border-radius: 12px;
}
.motherDivClass{
    margin: 0px 0px 0px 0px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 50;

}

.keysContainerClass{
    position:fixed;
    bottom: 0.5%;

    width: 100%;
display: flex;
justify-content: center;
/* align-items: center; */
z-index: 50;
}

.singleWhiteKeyClass{
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    border: 1px solid rgb(175, 175, 175);
    width:8.1%;
    height:66px;
    background-color: white;
    border-radius: 4px 4px 8px 8px;
    padding: 28px 0px;
    color: #7AA2E3;
    cursor: pointer;
    z-index: 50;
}

.beforeGameMenuDivClass{
    margin: 0px 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.singleBlackKeyClass{
    font-size: 14px;
    font-weight: 600;
    color: #7AA2E3;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    width:8.1%;
    height:90px;
    background-color: rgb(0, 0, 0);
    border-radius: 4px 4px  8px 8px;
    padding: 16px 0px;
    cursor: pointer;
    z-index: 50;
}

.progressCircleClass{
    /* Display when challenge starts */
    position: fixed;
    top: 1%;
    right: 1%;
    margin: 0px 0px;
    width: 100px;
    height: 100px;
}

.mainLevelsDivClass{
    width: 100%;
    display: flex;
    justify-content: center;
}

.levelButtonClass{
    background-color: #7AA2E3;
    color: #ffffff;
    font-weight: 700;
    padding: 12px 16px;
    border-radius: 6px;
    margin: 16px;
    border: 2px solid rgb(0, 0, 0);
    cursor: pointer;
}
.levelButtonClass:hover{
    filter: brightness(0.95);
}


.levelButtonClass2{
    background-color: hsl(217, 65%, 68%);
    color: #ffffff;
    font-weight: 700;
    padding: 2px 12px;
    border-radius: 6px;
    margin: 4px;
    border: 2px solid rgb(0, 0, 0);
    cursor: pointer;
}
.levelButtonClass2:hover{
    filter: brightness(0.95);
}
#setTimerMainDivId{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
#customTimerDivId{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 12px 0px;
}

#customTimeInput{
    width: 108px;
    height: 16px;
    border-radius: 4px;
    border: solid 1px gray;
    text-align: center;
}


/* Dynamic add classes */


#mainImageDivId{

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.questionImgClass{
    width: 60%;
    height: 60%;
    border-radius: 12px;
    margin: 2px 0px 0px 0px;
}

#nextQuestionButtonId{
    position: fixed;
    top: 40%;
    right: 4%;
    padding: 16px 32px;
}

#nextQuestionButtonId2{
    position: fixed;
    top: 40%;
    left: 4%;
    padding: 16px 32px;
}




.currentScoreDivClass{
    position: fixed;
    top: 33%;
    right: 9%;
    font-size: 20px;
    font-weight: 800;

}

/* ///Different grays for black and white keys */
.grayClass{
    background-color: gray;
}

.successClass{
    background-color: rgb(41, 177, 41);
    color: white;
}

.wrongClass{
    background-color: rgb(255, 0, 0);
    color: white;
}



@keyframes blink {
    0% {
       
        color:rgb(158, 174, 255);
        
        
        
    }
    50% {
        
        background-color: rgb(158, 174, 255);
        color:rgb(255, 255, 255);
        
    }
    100% {
        
        color:rgb(158, 174, 255);
        
    }
}

.blink {
    color: white;
    animation: ease-in-out;
    animation: blink 800ms infinite; /* Adjust 2s to control speed */
}



.animate {
    animation-name: animation1;
    animation-duration: 300ms;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }
  
  @keyframes animation1 {
    0% {
      opacity: 0.2;
     
      scale: 0.4;
    }
  
    50% {
      opacity: 0.5;
      scale: 1.1;
    }
  
    100% {
      opacity: 1;
      scale: 1;
     
    }
  }

  #mainOverlayDivId{
    width: 100vw;
    height: 100vh;
    background-color: rgba(37, 37, 37, 0.507);
    display:none;
    justify-content: center;
    align-items: center;
    z-index: 100;
    position: fixed;
  }

  #overlayDivChild1Id{
    width: 310px;
    height: 400px;
    border-radius: 16px;
    background-color: white;
    color: black;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
  }

  #setTimerMainDivId{
    display:none;
  }


  #countdown {
    font-size: 24px;
    fill: #000;
    text-anchor: middle;
    transition: fill 0.5s, font-size 0.5s;
}

#restartGameButtonId{
    display:flex;
}

#infoImgId{
    width: 80px;
    height: 80px; 

    position: fixed;
    top: 2%;
    left: 5%;
    filter: invert(0.3);
    cursor: pointer;
}

#infoImgId:hover{
    filter: invert(0.7);
}