/* import font from google fonts */
@import url('https://fonts.googleapis.com/css2?family=Caveat&family=Permanent+Marker&display=swap');

*{
    box-sizing:border-box;
}

body{
    width: 1000px;
    margin:auto;
    font-family: 'Caveat', cursive;
    background-color:rgb(71, 68, 68);
    color: white;
}

div.game-options{
    display:block;
    font-size: 2rem;
    margin:0;
}

h1{
    text-align: center;
    font-family: 'Permanent Marker', cursive;
    color:white;
    font-size: 3rem;
    text-decoration:underline;
}

h3{
    margin-bottom: 15px;
    margin-top: 15px;
    text-align: center;
}

section{
    text-align: center;
}

div.container{
    margin: auto;
    display: flex;
    justify-content: space-around;
}

@media (max-width:1100px){
    div.container{
        flex-direction:column;
    }
}

div.game-board{
    height: 600px;
    width: 600px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    padding: 3rem;
    border:5px solid rgb(0, 0, 0);
    border-radius: 50px;
    margin:auto;
    background-color: white;
}

div.left-side{
    margin:auto;
}
div.right-side{
    margin-left:30px;

}

div.vertical-lines{
    grid-area: 1/2/4/3;
    border-right:10px ridge black;
    border-left: 10px groove black;
}
div.horizontal-lines{
    grid-area: 2/1/3/4;
    border-top:10px ridge black;
    border-bottom: 10px ridge black;
}

div.square{
    margin:40px;
    opacity:0.3;
    padding:0px;
}

.x .square:hover{
    background-image: url('../img/cross.jpg');
    background-size: contain;
    background-repeat: no-repeat;
}

div.game-board .x.checked {
    background-image: url('../img/cross.jpg');
    background-size: contain;
    background-repeat: no-repeat;
}

.o .square:hover{
    background-image: url('../img/circle.jpg');
    background-size: contain;
    background-repeat: no-repeat;
}

div.game-board .o.checked {
    background-image: url('../img/circle.jpg');
    background-size: contain;
    background-repeat: no-repeat;
}


div.position00{
    grid-area: 1/1/2/2;
}

div.position01{
    grid-area: 1/2/2/3;
}

div.position02{
    grid-area: 1/3/2/4;
}

div.position10{
    grid-area: 2/1/3/2;
}

div.position11{
    grid-area: 2/2/3/3;
}

div.position12{
    grid-area: 2/3/3/4;
}

div.position20{
    grid-area: 3/1/3/2;
}

div.position21{
    grid-area: 3/2/4/3;
}

div.position22{
    grid-area: 3/3/4/4;
}

div.square.checked{
    opacity: 1;
    pointer-events:none;
}

div.square.animate{
    animation: tada;
    animation-iteration-count: 3;
    animation-duration: 2s;
}

button {
    align-items: center;
    appearance: none;
    border-radius: 4px;
    border-width: 0;
    box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
    box-sizing: border-box;
    color: #36395A;
    cursor: pointer;
    display: inline-flex;
    font-family: 'Caveat', cursive;
    height: 48px;
    justify-content: center;
    line-height: 1;
    list-style: none;
    overflow: hidden;
    padding-left: 16px;
    padding-right: 16px;
    position: relative;
    text-align: left;
    text-decoration: none;
    transition: box-shadow .15s,transform .15s;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    white-space: nowrap;
    will-change: box-shadow,transform;
    font-size: 25px;
    width:150px;
    margin-top: 20px;
    margin-bottom: 20px;
}

button:focus {
    box-shadow: #D6D6E7 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
}

button:hover {
    box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
    transform: translateY(-2px);
}

button:active {
    box-shadow: #D6D6E7 0 3px 7px inset;
    transform: translateY(2px);
}

input {
    align-items: center;
    appearance: none;
    background-color: #FCFCFD;
    border-radius: 4px;
    border-width: 0;
    box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
    box-sizing: border-box;
    color: #36395A;
    cursor: pointer;
    display: inline-flex;
    font-family: 'Caveat', cursive;
    height: 48px;
    justify-content: center;
    line-height: 1;
    list-style: none;
    overflow: hidden;
    padding-left: 10px;
    padding-right: 10px;
    position: relative;
    text-align: left;
    text-decoration: none;
    transition: box-shadow .15s,transform .15s;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    white-space: nowrap;
    will-change: box-shadow,transform;
    font-size: 25px;
    width:210px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.join{
    width:100px
}

button.reset-full.button{
    width:400px;
}
section.buttons{
    display: flex;
    flex-direction: column;
    align-items: center;
}

section .start{
    background-color:rgb(142, 253, 144)
}

section .next-round {
    background-color: rgb(255, 153, 0)
}

section .reset-full{
    background-color: rgb(249, 91, 91)
}

div.game-board.hold-for-start{
    pointer-events:none;
}

div.press-start{
    position:absolute;
    width:500px;
    height:500px;
    text-align: center;
    margin: auto;
    background-color:rgb(71, 68, 68);
    border-radius: 50px;
    font-size: 2rem;
    line-height: 500px;
    display: none;
    overflow:hidden;
    z-index: 100;
}

div.right-side:hover .press-start{
    display: block;
}