#root, body {
    margin: 0;
    padding: 0;
}

/* consistent box sizing */
*, *::before, *::after { box-sizing: border-box; }
body{
    background: #F4F6F8;
    font-family: Arial, sans-serif;
}

.btn{ 
    height: 100px;
    width: 100px;
    border-radius: 1rem;
    border: none;
    font-size: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    box-shadow: 10px 10px 20px rgba(0,0,0,0.1);
}
#btn1, #btn5, #btn7{
    background-color: #c1d1e4;
}
#btn3,#btn4,#btn9{
    background-color: #9fa6ad;
}
#btn2,#btn6,#btn8{
    background-color: #a1cdfa;
}
#page-title{
    text-align: center;
}

.btn-container{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    /* width = 3 * 100px buttons + 2 * gap(10px) = 320px */
    width: 320px;
    margin: 24px auto 0 auto;
}

#reset{
    height: 35px;
    width: 120px;
    display: block;
    margin: 16px auto;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    background-color: #6F686D;
    border-radius: 5px;
    color: antiquewhite;
}

#reset:active{
    background-color: #CBB8A9;
    color: black;
}

/* subtle accessible focus state without shifting layout */
.btn:focus{
    outline: none;
    box-shadow: 0 0 0 4px rgba(107,106,109,0.18);
}

h1{
    text-align: center;
    margin-top: 16px;
}
.hide{
    display: none;
}

.msg-alert{
    text-align: center;
}
#new-btn{
    height: 35px;
    width: 120px;
    display: block;
    margin: 16px auto;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    background-color: #6F686D;
    border-radius: 5px;
    color: antiquewhite;
}
#msg{
    color: #6F686D;
    font-size: 24px;
    font-family: Arial, sans-serif;
}
.btn{
    transition: all 0.2s ease;
    box-shadow: 0.2px 6px rgba(0,0,0,0.08);
}
.btn:hover{
    background-color: #B8C6D3;
    transform: translateY(-2px);
    /* transition: 0.2s ease-in-out; */
    cursor: pointer;
}
#reset, #new-btn{
    background-color: #2F3E4D;
    color: white;
}
#reset:hover, #new-btn:hover{
    background-color: #1F2A36;
}