body{
    display:flex;
    flex-direction: column;
    align-items: center;  
    background:rgb(233, 128, 128);
    color: white;
}
#game-area{
    width:60%;
    margin-top:5%;
    display:flex;
    justify-content: space-between;
    color:white;
    
}

.ok-button{
    color:rgb(233, 128, 128);
    background-color: white;
    border: none;
    outline: none;
    margin:5px;
}

::placeholder {
    color:rgb(233, 128, 128);
    opacity: 1; /* Firefox */
  }

/* #player-one-area, #player-two-area{
    width:20%;
} */

input[type=text]{
    width:10.5em;
    border:none;
    outline: none;
    color:rgb(233, 128, 128);
}

h1{
    margin:0;
}

p{
    text-align: center;
}


.hidden{
    visibility:hidden;
}

#center-column{
    display:flex;
    flex-direction:column;
}
#new-game-button, .gameplay-button{
    align-self: center;
    margin-top:10px;
    color: rgb(233, 128, 128);
    background-color:white;
    border:none;
    border-radius:7%;

}

#gameplay-picker{
    display:flex;
}

.gameplay-button{
    margin:20px;
    width:5vw;
    height:9vh;

}

.underlined{
    text-decoration: underline;
}

#game-board{

    place-items: center;
    align-items: center;
    text-align: center;
    justify-items: center;
    display: grid;
    grid-template-columns: 50px 50px 50px;
    grid-template-rows: 50px 50px 50px;

}


.appearing-symbol{
    animation: lighten-up 0.2s linear;
}

.field{
    display: flex;
    justify-content: center;
    align-items: center;
    background:white;
    height:98%;
    width:98%;
    color:black;
}

@keyframes lighten-up {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.winning-combination{
    color: red;
}