html {
    min-height: 100vh;
    margin: 0;

    background: #df7117;
    background: linear-gradient(170deg, 
                #e67c19 0%, 
                #b3461b 55%, 
                #812d06 100%);

    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;

    /* Stacked Borders */
    box-shadow: inset 0 0 0 12px #000000, inset 0 0 0 16px #ffffff;
    
    transition: background 0.3s, box-shadow 0.3s;
}

main {
    padding: 10px;
    box-sizing: border-box;
}

#title {
    background: whitesmoke;
    padding-left: 18px;
    padding-right: 18px;
    padding-top: 7px;
    padding-bottom: 12px;
    border: 8px solid black;
    border-radius: 10px;

    text-align: center;
    color: #331602;
}


/*------------------------------------------------------------------------------------*/


/* Dark Mode Stuff */

#theme-toggle {
    position: absolute;
    margin: 0;
    padding: 5px 10px;
    top: 28px;
    left: 30px;
    background-color: rgb(255, 244, 220);
    border: rgb(4, 3, 5) 2px solid;
    color: black;
    border-radius: 3px;
    transition: 0.4s;
}
html.dark-mode #theme-toggle {
    background-color: rgb(4, 3, 5);
    border: rgb(255, 244, 220) 2px solid;
    color: whitesmoke;
}
#title {margin-top: 40px;}


html.dark-mode {
    background: linear-gradient(170deg, 
                oklab(24.46% 0.06753 -0.11063) 0%, 
                oklab(19.73% 0.07136 -0.06354) 55%, 
                oklab(12.520000000000001% 0.013 -0.07472) 100%);
    background-attachment: fixed;
    box-shadow: inset 0 0 0 12px #333333, inset 0 0 0 16px #666666;
}

html.dark-mode::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/background-images/beautiful-shining-stars-night-sky.jpg');
    background-size: cover;
    background-repeat: repeat;
    opacity: 0.4;
    transition: opacity 0.3s;
    pointer-events: none;
    z-index: 0;
}

body {
    margin: 0;
    padding: 28px;
    transition: color 0.3s, box-shadow 0.3s;
    position: relative;

    /* Stacked Borders */
    box-shadow: inset 0 0 0 12px #000000, inset 0 0 0 16px #ffffff;

    z-index: 1;
}

html.dark-mode body {
    color: #e0e0e0;
    
    box-shadow: inset 0 0 0 12px #333333, inset 0 0 0 16px #666666;
    transition: color 0.3s, box-shadow 0.3s;
}