*{
    margin:0;
    padding:0;
}
body{
    background: #121212;
    color:white;
    text-align:center;
    font-family: 'Poppins', sans-serif;
}
.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;
    font-size:8vmin;
    font-weight:600;
    color:#00ffcc;
    background-color:#1e1e1e;
    cursor:pointer;
    transition: all 0.2s ease;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.box:hover{
    transform: scale(1.05);
    border:2px solid white;
}
#reset-btn{
    padding:1rem;
    font-size:1.25rem;
    background-color:#191913;
    color:#fff;
    border-radius:1rem;
    border:none;
}
#new-btn{
    padding:1rem;
    font-size:1.25rem;
    background-color:#191913;
    color:#fff;
    border-radius:1rem;
    border:none;
}
#msg{
    color:#ffffc7;
    font-size:5vmin;
}
.msg-container{
    height:100vmin;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    gap:4rem;
    animation: fadeIn 0.3s ease-in-out;
@keyframes fadeIn{
    from { opacity:0; transform: scale(0.9);}
    to { opacity:1; transform: scale(1);}
}
}
.hide{
    display:none;
}
#reset-btn,
#new-btn{
    padding:0.8rem 2rem;
    font-size:1rem;
    background: linear-gradient(135deg, #ff416c, #ff4b2b);
    color:white;
    border-radius:50px;
    border:none;
    cursor:pointer;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

#reset-btn:hover,
#new-btn:hover{
    transform: translateY(-3px);
}