* {
        margin: 0;
        padding: 0;
}

body {
        background-color: #CFDBD5;
        text-align: center;
}

h1 {
        color: #333533;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 7vmin;
}

.container {
        height: 70vh;
        display: flex;
        justify-content: center;
        align-items: center;
}

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

.box {
        height: 18vmin;
        width: 18vmin;
        border-radius: 1rem;
        border: none;
        box-shadow: 0 0 1rem rgba(0,0,0,0.3);
        font-size: 8vmin;
        color: #333533;
        background-color: #E8EDDf;
}

#reset-btn {
        padding: 1rem;
        font-size: 1.25rem;
        background-color: #F5CB5C;
        color: #242423;
        border-radius: 1rem;
        border: none;
        box-shadow: 0 0 1rem rgba(131, 130, 130, 0.5); 
}

#new-btn {
        padding: 1rem;
        font-size: 1.25rem;
        background-color: #F5CB5C;
        color: #242423;
        border-radius: 1rem;
        border: none;
        box-shadow: 0 0 1rem rgba(131, 130, 130, 0.5); 
}

#msg{
        color: #333533;
        font-size: 7vmin;
}

.msg-container {
        height: 110vmin;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 5rem;
}

.hide {
        display: none;
}