body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* aligns to top */
    height: 100vh; /* full viewport height */
    margin: 0;
    background: url("https://cdnb.artstation.com/p/assets/images/images/047/299/945/large/grc-koa-the-namelesss-danheng.jpg") no-repeat center center fixed;
    background-size: cover;
}

.main-content { 
    margin-top: 20px;   
    display: flex;
    flex-direction: column;
    justify-content: center; /* centers vertically */
    align-items: center;     /* centers horizontally */
}



.container {
    display: flex;
    flex-direction: column;  /* also fix here: was "display-direction" */
    justify-content: center;
    align-items: center;
    gap: 20px;
}


.inspired { /* small note at bottom */
    font-family: 'roman', serif;
    color: #609570;
    text-align: center;
    margin-top: 20px;
    font-size: 15px; 
}

#timer { 
    font-size: 100px;
    font-weight: bold;
    color: #03332b;
    font-family: 'new romans', serif;
    text-align: center;
    margin-bottom: 20px;
    margin-top: 20px;

}
.controls {
display: flex;
justify-content:center;
gap: 15px;
font-family: 'Courier New', Courier, monospace;
}
#minutes, #seconds, #colon {
    font-family: 'courier new', monospace;
    font-size: 130px;
    display: inline-block;
    color: #0c2b26; 
    text-align: center;
    font-weight: 800;
}




#start {
    background-color: #21453c; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    display: inline-block;
    font: 16px new romans, serif;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 12px;
}
#pause {
    background-color: #2b5251; /* Red */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    display: inline-block;
    font-size: 16px new romans, serif;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 12px;
}
#reset {
    background-color: #356954; /* Blue */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    display: inline-block;
    font-size: 16px new romans, serif;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 12px;
}
#music {
    background-color: #26564e; /* Yellow */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    display: inline-block;
    font-size: 16px new romans, serif;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 12px;

}