*{
    margin: 0;
    padding: 0;
}
/* game */
body{
    background-color: #172121;
    text-align:center;
    color: #BEE9E8;
    transition: background-color 0.3s, color 0.3s;
}
h1{
    margin-top: 2rem;
    padding:2rem;
    color:#BEE9E8;
}
.dabba {
    height:50vh;
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap:1.5vmin;
}
.game{
    height:60vmin;
    width:60vmin;
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap:1.5vmin;
}
.box{
    background-color: #7180B9;
    height: 18vmin;
    width: 18vmin;
    border-radius:1rem;
    border:none;
    box-shadow:0 0 1rem rgba(0,0,0,1);
    font-size: 9vmin;
}
#theme-toggle {
    height:40px;
    width:150px;
    /* position: absolute; */
    top: 20px; 
    right: 20px; 
    background-color: #A7C6DA;
    color: #293040;
    padding: 1rem;
    font-size: 1rem;
    border: none;
    border-radius: 1rem;
    cursor: pointer;
    margin-bottom: 20px;
}

#restart{
    padding:1rem;
    font-size: 1.25rem;
    background-color: #D7F9FF;
    color: #0E1C36;
    border-radius:0.85rem ;
    margin-top: 8rem;
}
#new{
    padding:1rem;
    font-size: 1.25rem;
    background-color: #D7F9FF;
    color: #0E1C36;
    border-radius:0.85rem ;
}
#msg{
    margin-top: 5rem;
    color:#A7C6DA;
    font-size: xx-large;
    font-weight: bolder;
}
.msg-dabba{
    height:20vmin;  
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1rem;

}
.hide{
    display:none;
}

/* Light Theme */
body.light-theme {
    background-color: #A7C6DA; 
}

body.light-theme h1 {
    color: #293040;
}

body.light-theme .box {
    background-color: #D6F6DD; 
}

body.light-theme #theme-toggle {
    background-color: #172121; 
    color: #BEE9E8;
}

body.light-theme #restart,
body.light-theme #new {
    background-color: #0E1C36; 
    color: #D7F9FF;
}
body.light-theme #msg {
    color: #293040; 
}

/* Dark Theme */
.o-color {
    color: #f4f4f4; 
}

.x-color {
    color: #0E1C36; 
}

/* Light Theme */
body.light-theme .o-color {
    color: #172121; 
}

body.light-theme .x-color {
    color: #7180B9; 
}