/* ↓User name input form↓ */

.PopUpDiv {
    display: none;
    position: fixed;
    top: 0;
    z-index: 10309;
    background-color: rgba(0, 0, 5, .5);
    width: 100%;
    height: 100%;
}

.pupUp-container {
    text-align: center;
    background-color: #ffffff;
    border: 3px solid #f1f1f1;
    padding: 30px;
    max-width: 500px;
    margin: auto;
    margin-top: 25vh;
    min-height: 60vh;
}

.inputName {
    border: 1px solid #000000;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
    font-size: 1.5rem;
}

.btnDiv {
    margin-top: 20px;
    z-index: 1;
}

.btn-cancel {
    float: left;
    width: 150px;
    margin-top: 10px;
}

.btn-next {
    float: right;
    width: 150px;
    margin-top: 10px;
}

/* message when input is not filled in */

.noNameMessage {
    display: none;
    position: absolute;
    left: 60%;
    top: 38%;
    background-color: #ffffff;
    z-index: 1;
    border: .5px solid #555500;
    border-left: none;
    font-size: 1rem;
    padding: 10px;
    padding-left: 0;
    border-radius: 35px;
}

.attentionIcon {
    color: #ffa500;
}

.narrowIcon {
    color: black;
    padding-right: 20px;
    margin-left: -10px;
}

/* ↑User name input form↑ */


/* option pup up window */
.settChsCategor{
    border: 1px solid #ced4da;
    background-color: #e9ecef;
    border-radius: .25rem;
    padding: 20px;
}

.settChsCategor button {
    margin-bottom: 5px;
}

.catinpdiv {
    display: inline-block;
    width: 120px;
    text-align: justify;
}
    

/* start game button */
.startRndBtn {
    width: 10rem;
    margin-top: 7rem;
}

.startGameBtn {
    text-align: center;
}

#alphabetSayStatus {
    display: none;
}

/* Start round pop up */

.round-popUp-container {
    margin-top: 15vh;
    height: 80vh;
    overflow-x: scroll;
}

/* next round button */
#nxtRnd{
    margin: 1rem;
}
/* div which shows counting down to end of round  */
.counterDiv {
    position: absolute;
    display: none;
    padding: 2rem;
}

/* span in counter div - shows number counted down to end round */
.ctrspan {
font-size: 3rem;
font-weight: bold;
padding: .5rem;
color: red;
border: solid .3rem black;
border-radius: 50%;
}

/* user input for typing words - game answer */
.my-input {
    background-image: url("../images/emptyCard.jpg");
    background-size: cover;
    font-family: 'Nanum Pen Script', cursive;
    color: #000F55;
    font-weight: bold;
    font-size: 2rem;

}

    /* animation on start round - animate letters x y z */
.xyzLetters {
    font-size: 0;
}

.transform {
    -webkit-transition: all 1s ease;  
    -moz-transition: all 1s ease;  
    -o-transition: all 1s ease;  
    -ms-transition: all 1s ease;  
    transition: all 1s ease;
  }

  .transform-active {
      font-size: 3rem;
  }


#letterChoos {
    height: 3rem;
}

#startInit {
    height: 3.5rem;
    display: inline-block;
}

/* hide class for javascript purpose to hide and show elements */
.hide {
    display: none;
}

.showMyClass {
    display: block;
}

/* Class to explicitly make elements visible (e.g., popups) */
.visible {
    display: block;
}

/* Style letter chosen for round */
.showLetter {
    font-size: 3rem;
    font-weight: bold;
    text-transform: capitalize;
}

/* Game Result table  */ 


.resultGameTable {
    background-image: url("../images/emptyCard.jpg");
    background-size: cover;
    font-family: 'Nanum Pen Script', cursive;
    color: #001ca2;
    font-weight: bold;
    font-size: 2rem;
    
}
.resultGameTable thead {
    border-bottom: solid 0.3rem #001ca2;
}
.resultGameTable th, .resultGameTable td {
    border-right: solid 0.3rem #001ca2;
}

/* User name input form - message when input is not filled in  - position for small screen*/

@media(max-width:311px) {
    .noNameMessage {
        top: 45%;
    }
    .inputName {
        width: 80%;
    }

}

@media(max-width:366px) {
    .btn-cancel {
        float: none;
        width: 150px;
        margin-top: 10px;
    }
    .btn-next {
        float: none;
        width: 150px;
        margin-top: 10px;
    }
}

@media(min-width: 850px){
    .round-popUp-container {
        min-width: 800px;
    }
}