@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Lato', sans-serif;
}

body {
    background: linear-gradient(100deg, rgb(5, 0, 53), rgb(4, 4, 4));
    text-align: center;
    overflow: hidden;
}

#main {
    width: 100vw;
    height: 100vh;
}

#flex-div {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: flex-start;
    margin-top: 40px;
}

#heading {
    color: #ffffff;
    font-size: 50px;
    margin: 10px 0 50px 0;
    font-weight: 500;
}

#container {
    height: 70vh;
    margin-left: 15%;
}

#game-board {
    height: 60vmin;
    width: 60vmin;
    display: grid;
    place-content: center;
    grid-template-columns: repeat(3, 16vmin);
    grid-template-rows: repeat(3, 16vmin);
}

#game-stats {
    flex-basis: 30%;
    margin-right: 10%;
    display: flex;
    justify-content: left;
}

.btn {
    font-size: 7vmin;
    font-weight: 400;
    text-align: center;
    cursor: pointer;
    border: 2px solid #140ce9;
    outline: none;
    background-color: #ffffff;
}

.btn:hover {
    background-color: #e6e0e0;
}

.bt-0 {
    border-top: 0;
}

.br-0 {
    border-right: 0;
}

.bb-0 {
    border-bottom: 0;
}

.bl-0 {
    border-left: 0;
}

.brt-15 {
    border-top-left-radius: 15px;
}

.brr-15 {
    border-top-right-radius: 15px;
}

.brb-15 {
    border-bottom-right-radius: 15px;
}

.brl-15 {
    border-bottom-left-radius: 15px;
}

.omark {
    color: green;
}

.xmark {
    color: red;
}

#move-list {
    display: grid;
    place-items: center;
}

#endgif {
    margin-top: 6vmin;
}

#resetBtn {
    padding: 10px 80px 10px 25px;
    font-family: 'Times New Roman', Times, serif;
    font-size: 1.5em;
    border-radius: 15px;
    border: none;
    cursor: pointer;
    transition: background 0.3s ease-in-out;
    margin: 40px 15vmin 0 17vmin;
}

#resetBtn:hover {
    background: #ff5a54;
    color: rgb(41, 37, 37);
}

.info {
    color: white;
    font-size: 1.75rem;
}

#winner-msg {
    font-size: 1.75rem;
    margin-top: 1vmin;
    color: #ff54cc;
}

#end-text {
    font-size: 15px;
    font-weight: 400;
    color: #ffffff;
}

.new-game {
    height: 5vmin;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hidden {
    margin-top: 10px;
    display: none;
}

.hidegif {
    display: none;
}

#new-btn {
    padding: 1vmin 2vmin 1vmin 2vmin;
    margin: 1vmin 0 0 9vmin;
    border-radius: 20px;
    border: none;
    cursor: pointer;
    transition: background 0.3s;
    font-family: 'Times New Roman', Times, serif;
    font-size: 1em;
}

#new-btn:hover {
    background: #ff54cc;
    color: white;
}

/* --------- Small screen layout---------- */

@media only screen and (max-width: 600px) {
    #container {
        height: 40vh;
        margin: 5%;
    }

    #game-stats {
        display: flex;
        flex-wrap: wrap;
        margin: 5% 0 2% 5%;
        padding-right: 5%;
        height: 25vh;
    }

    #resetBtn {
        font-size: 15px;
        padding: 8px 49px 8px 15px;
        text-align: center;
        margin: 50px 15vmin 0 17vmin;
    }

    #endgif {
        width: 40vw;
        padding-right: 5vmin;
    }

    #end-text {
        font-size: 15px;
        font-weight: 400;
        color: #ffffff;
        margin: 8vmin 0 0 0;
    }

    .info {
        font-size: 1.2rem;
    }

    .new-game {
        height: 5vmin;
        margin-top: 3vmin;
    }

    #winner-msg {
        font-size: 1.3rem;
        color: #ff54cc;
    }
}