*{
  margin:0;
  padding:0;
}

h1{
    margin-top: 4rem;
    font-size: 3rem;
    color: #f0e6ef;
}

body{
    display: flex;
    justify-content: center;
    align-items:center;
    flex-direction: column;
    background-color: #1a759f;
}

.container{
    margin-top: 1rem;
    height:70vh;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    gap:7rem;
}

.game{
    height:55vmin;
    width:60vmin;
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap:10px;
}

.box{
    width:17vmin;
    height:17vmin;
    background-color: rgb(255, 255, 255);
    border-radius: 10%;
    text-align: center;
    font-size: 3rem;
    color: #03045e;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.btns{
    width:40vmin;
    height:8vmin;
    display: flex;
    justify-content: center;
    /* align-items:center; */
    gap:0.7rem;
}

.reset-btn, .newgame-btn{
    width: 20vmin;
    height: 6vmin;
    font-size: 1.5rem;
    border-radius: 20px;
    cursor: pointer;
    background-color: rgb(255, 255, 255);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.reset-btn:hover, .newgame-btn:hover{
    background-color: #b5e48c;
}

.message{
    height:5vmin;
}

.hide{
    display: none;
}

.result{
    font-size: 4rem;
    color: #f0e6ef;
    text-align: center;
    padding-top: 1rem;
}

.player{
    width:15vh;
    height:70vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap:20px;
}

.player img{
    width: 30vh;
    height: 30vh;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.player button{
    width:15vmin;
    height:6vmin;
    font-size: 1.5rem;
    border-radius: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.active{
    background-color: #d9ed92;
}

@media (max-width: 900px) {
    .container {
        flex-direction: column;
        gap: 3rem;
        height: auto;
    }
    .player {
        width: 100vw;
        height: auto;
        flex-direction: row;
        gap: 10px;
        margin-bottom: 2rem;
    }
    .player img {
        width: 20vh;
        height: 20vh;
    }
    .game {
        width: 90vw;
        height: auto;
        gap: 5px;
    }
    .box {
        width: 25vw;
        height: 25vw;
        font-size: 3rem;
    }
    .btns {
        width: 90vw;
        height: auto;
        gap: 0.5rem;
    }
    .reset-btn, .newgame-btn, .player button {
        width: 40vw;
        height: 8vw;
        font-size: 1.5rem;
    }
    h1 {
        font-size: 2rem;
        margin-top: 2rem;
    }
    .result {
        font-size: 2rem;
        padding-top: 0.5rem;
    }
}

@media (max-width: 600px) {
    h1 {
        font-size: 1.5rem;
        margin-top: 1rem;
    }
    .container {
        gap: 1rem;
    }
    .player {
        flex-direction: column;
        align-items: center;
        width: 100vw;
        gap: 5px;
    }
    .player img {
        width: 15vh;
        height: 15vh;
    }
    .game {
        width: 98vw;
        gap: 2px;
    }
    .box {
        width: 30vw;
        height: 30vw;
        font-size: 3rem;
    }
    .btns {
        width: 98vw;
        gap: 0.2rem;
    }
    .reset-btn, .newgame-btn, .player button {
        width: 45vw;
        height: 10vw;
        font-size: 1.5rem;
    }
    .result {
        font-size: 1.2rem;
        padding-top: 0.2rem;
    }
}