/* :root {
    --global-blue: #3C505C;
    --global-dark-blue: #293236;
    --global-white: #FCFCF2;
    --global-orange: #FF9A68;
    --global-yellow: #F3D982;
} */

:root {
    --global-blue: color(display-p3 0.231 0.309 0.355);
    --global-dark-blue: color(display-p3 0.157 0.192 0.208);
    --global-white: color(display-p3 0.985 0.985 0.95);
    --global-orange: color(display-p3 1 0.6 0.4);
    --global-yellow: color(display-p3 0.95 0.85 0.5);
}


html {
    font-family: monospace;
    height: 100%;
    width: 100%;
    background-color: var(--global-blue);
    box-sizing: border-box;
    font-size: clamp(12px, 4vw, 16px);

}

body {
    margin: 0;
    padding: 2em;
    box-sizing: border-box;
    color: var(--global-white);
    background-color: var(--global-blue);
    position: relative; /* Establish a containing block for absolute positioning */
    z-index: -3;
    min-height: 100vh; /* Ensures at least full viewport height */
    /* width: 100%; */
    overflow-x: hidden;
    height: auto; /* Let content grow, but min-height keeps at least 100% */
}

body a {
    color: var(--global-yellow);
}
body a:hover {
    color: var(--global-orange);
}

#home_link {
    color: var(--global-white);
}
#home_link:hover {
    color: var(--global-orange);
}

    

#content {
    /* width: 65vw; */
    margin: 1em;
    word-wrap: break-word;
}
    
@media (max-width: 768px) {
    body {
        min-height: 100vh; /* Ensure body takes full viewport height on mobile */
    }
}

body.light {
    background-color: #f0f0f0;
    color: #333;
}

body.dark {
    background-color: #555252;
    color: #f0f0f0;
}

a {
    color: inherit;
}

.edge {
    width: 100%;
    height: 100%;
    padding: .25em;
}

.el {
    color: var(--global-white);
    background-color: var(--global-blue);
    border: solid var(--global-blue);
    position: fixed; /* Change to fixed to ensure it fills the viewport height */
    display: flex;
    flex-direction: column;
    left: 0;
    top: 0;
    width: fit-content;
    height: 100vh; /* Fill the viewport height */
    align-content: center;
    z-index: -1;
    box-sizing: border-box;
    border-right: outset .01em;
    overflow: scroll;
}

.el > a {
    padding-left: .8em;
    padding-top: 2em;
}

.et {

    color: var(--global-white);
    background-color: var(--global-blue);
    border: solid var(--global-blue);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: fit-content;
    z-index: 1;
    box-sizing: border-box;
    border-bottom: outset .01em;
    padding-left: 1em;
    display: flex;
    flex-wrap: wrap;
}

et > * {
    position: fixed;
}


.eb {
    display: flex;
    justify-content: space-between;
    color: var(--global-white);
    background-color: var(--global-blue);
    /* border: solid var(--global-white); */
    position: fixed; /* Fixed to bottom as footer */
    bottom: 0;
    left: 0;
    width: 100%;
    height: fit-content;
    z-index: 2;
    box-sizing: border-box;
    border-top: outset .01em;
    padding-right: 1em;
}

.eb #year {
    float: right;
    padding-right: 1em;
}

.edge > a {
    padding-right: .5em;
}

.tbd {
    text-decoration: line-through;
    text-decoration-color: var(--global-white-dark-blue);    /* Specifies the color of the strikethrough */
}