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

#player1,#player2{
    visibility: hidden;
}

.indexBody{
        /* background-color: rgb(56, 56, 56); */
        font-family: 'Teko';
        background: linear-gradient(red,black);
        height: 100vh;
        max-height: 100vh;
        width: 100vw;
        max-width: 100vw;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
}

.indexHeaders{
     display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.type{
  color: black;
}

.headImg{
    margin-top: 10px;
    /* display: inline-block; */
    height: 5rem;
}

.headingImg{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 3rem;
    
}

.subHeading{
    height: 40px;
    margin-left: 10rem;
}

.subHeadingImg{
    display: flex;
    justify-content: center;
    align-items: center;
}

.logoAnimate{
    height: 50px;
    margin: 0 1.5rem ;
}

.muterBtn{
    text-align: center;
    font-size: larger;
}

.enterBtn, .hpBtn, .aboutBtn{
    padding: 15px;
    background-color: green;
    border: 2px solid green;
    border-radius: 4px;
    height:fit-content;
    font-weight: bold;
    font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    letter-spacing: 1px;
    font-size: 35px;
    margin: 0.5rem;
    text-align: center;
    width: 15rem;
}

.enterBtn:hover, .hpBtn:hover, .aboutBtn:hover{
    cursor: pointer;
    background-color: black;
    color: green;
}



.backBtn{
    background-color: black;
    color: green;
    width: 4rem;
    height: 2rem;
    font-weight: bold;
}


.hpBackBtn, .aboutBackBtn, .formSubmit, .formSubmitBackBtn{
    background-color: black;
    color: green;
    font-weight: bold;
}

.backBtn:hover, .hpBackBtn:hover, .aboutBackBtn:hover, .formSubmit:hover, .formSubmitBackBtn:hover{
    cursor: pointer;
    background-color: green;
    color: black;
    border: none;
}

.muterBtn:hover{
    background-color: black;
    color: red;
    cursor: pointer;
}

.btn1{
    font-family: 'Teko';
    color:white;
    background-color: transparent;
    border: 2px solid red;
    font-size: 2rem;
    padding: 5px;
    margin: 0 10px ;

}

.btn1:hover, .btn1:hover a, .selected{
    cursor: pointer;
    color: black !important;
    background-color: red !important;
    
}

.btn1 a {
    text-decoration: none;
    color: white;
}


.btn2{
    font-family: 'Teko';
    
    background-color: green;
    border: 2px solid green;
    font-size: 2rem;
    padding: 5px;
    margin: 5px 10px ;
}

.btn2 a{
    text-decoration: none;
    color:black;
}

.btn2:hover a, .btn2:hover{
    cursor: pointer;
    background-color: black;
    color: green;
}


.checkBox{
    cursor: pointer;
    font-family: 'Teko';
    color:white;
    background-color: transparent;
    border: 2px solid red;
    font-size: 2rem;
    padding: 5px;
    margin: 0 10px ;
}

.noOfPlayers{
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.playerButtons{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 5px;
}

.aside{
    /* border:2px solid black; */
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    max-width: 90vw;
    /* margin: auto; */
    margin-top: 3rem;
}

.rightAside{
    background: linear-gradient(green,white);
    height: fit-content;
    width: fit-content;
    /* margin-left: 1rem; */
    margin-top: 2rem;
}

 .howToPlay{
    background: linear-gradient(green,white);
    height: fit-content;
    width: fit-content;
 }

 .aboutMe{
    display: flex;
    flex-direction: column;
    background: linear-gradient(green,white);
    height: fit-content;
    width: fit-content;
 }

 .aboutMeOne{
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 5px;
    align-self: flex-start;
    width: 50%;
    
 }

 .aboutMeText{
    font-size: 1.1em;
    text-align: justify;
    margin: 10px;
 }

 .aboutMeTwo{
    padding: 5px;
    align-self: flex-end;
    width: 47%;
    margin-top: -12rem;
    font-size: 1.1em;
    text-align: justify;
 }

 .aboutHead{
    text-align: start;
    color: black;
    margin: 0;
    /* line-height: 1em; */
 }

 .wave{
    height: 2.5rem;
    width: 2.5rem;
    animation: handAnimate 2s ease-in-out infinite;
 }

 .dp{
    height: 15rem;
    width: 12rem;
    animation: scoreAnimate 6s ease-in-out infinite;
    /* border-radius: 27rem; */
    
    /* animation: name duration timing-function delay iteration-count direction fill-mode; */
 }

 

 .dpBorder{
    border: 3px solid white;
 }

 

 .howToPlay li{
    padding: 0.3rem;
    text-align: justify;
    margin-left: 4px;
 }

 p{
    margin-left: 10px;
 }


.topAside{

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

.mute{}

.muted{}

.displayNone{
    display: none !important;
}

.nonVisible{
    visibility: hidden;
}

.credits{

    /* margin-top: 10rem; */
    text-align: center;
}

.scoreUp{
    background-color: white;
    color: green !important;
    animation: scoreAnimate 0.5s ease-in-out  infinite ;
}

.scoreDown{
    background-color: white;
    color: red !important;
    animation: scoreAnimate 0.5s ease-in-out  infinite ;
}

.hpH4{
    text-align: center;
    font-weight: 100;
}

.turn1, .turn2{

    animation: scoreAnimate 1s ease-in infinite ;
}

.hiddenForm{
    background:linear-gradient(green,white);
    /* padding: 2rem; */
}

form{
    padding: 2rem;
}

input,textarea, .formSubmitBtn{
    font-family:cursive;
}

.score1, .score2{
    color:white;
}

.feedPara:hover{
    text-decoration: underline;
    cursor: pointer;
}

@keyframes scoreAnimate{


    50%{
        opacity: 0%;
    }

    100%{
        opacity: 100%;
    }

}

@keyframes handAnimate{


    50%{
        transition: transform .6s,  .6s ease;
        transform: rotate(30deg);
    }

    100%{
        transition: transform .6s,  .6s ease;
        transform: rotate(0deg);
    }

}