@font-face {
    font-family: AmaticSC-Regular;
    src: url('./AmaticSC-Regular.ttf');
}
@font-face {
    font-family: AmaticSC-Bold;
    src: url('./AmaticSC-Regular.ttf');
}
/* ************ TAG STYLE ************ */
* {
    font-family: AmaticSC-Regular;
}

body {
    margin: 0;
    height: 100vh;
    width: 100vw;
    background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
h1 {
    color: #C490E4;
    font-family: AmaticSC-Bold;
    font-size: 6vmin;
}
h3 {
    color: black;
    font-size: 4vmin;
    font-weight: normal;
}


/* ************ CLASS STYLE ************ */

.material-icons-outlined {
padding: 0 4vw;
color: black;
display: none;
}

.material-icons-outlined:hover {
    cursor: pointer;
    color: #C490E4;
}


.grid div {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 1vmin;
    border: 1px solid white;
    margin: 5px;
}

.grid div.taken {
    background-color: #1F1D36;
}

.taken.helper {
    visibility: hidden;
}

.grid div:hover {
    background-color: rgba(255, 255, 255, 0.6);
    transition: 0.3s;
}
.grid div.taken.player_one {
    border-radius: 50%;
    background-color: #a6c1ee;
}

.grid div.taken.player_two {
    border-radius: 50%;
    background-color: #fbc2eb;
}


.current_turn {
    display: none;
}

.game-over {
    display: none;
}

.menu {
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid white;
    width: 70vw;
    height: auto;
    padding: 2vmax;
    margin: auto;
}

p {
    color: gray;
    font-size: 3.5vh;
}

.menu form {
    display: grid;
    grid-template-rows: auto auto;
    row-gap: 3vh;
}

.menu legend {
    font-size: 4vh;
    color: black;
    font-weight: bold;
    grid-column: 1/3;
}

.menu label {
    color: black;
    text-align: right;
    padding-right: 5vh;
    font-size:3.5vh;
}
.menu select {
    width: 12vmin;
    font-size:3vh;
    background-color: rgba(255, 255, 255, 0.1);
    text-align: center;
}

.menu input {
    background-color: #C490E4;
    border:none;
    /* border-radius: 0.5vmax; */
    color:white;
    padding: 5px 10px;
    grid-column: 1/3;
    font-family: AmaticSC-Bold;
    font-size: 5vh;
}


#timerBar {
    visibility: hidden;
    height: 10px;
    width: 50%;
    margin:10px auto;
    background-color: black;
}

.modal {
    position: fixed;
    top: 0;
    left:0;
    overflow: auto;
    z-index: 1;
    height: 100%;
    width: 100%;
    background-color:rgba(255, 255, 255, 0.6);
    display: none;
    padding-top:33%;
}

#pop-up {
    position: relative;
    background-color: rgba(255, 255, 255, 0.8);
    width: 45%;
    padding: 5vh;
    animation-name: animatetop;
    animation-duration: 0.4s;
    margin: auto;
}

#pop-up > h3 {
    display: inline;
    font-size: 4vh;
    color: black;
    font-weight: bold;
}

#pop-up > h3:hover {
    cursor: pointer;
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}