:root {
  --global-white: #F3EBE3;
  --global-yellow: #CEBCB0;
  --global-orange: #434751; 
  --global-blue: #31414E;
  --global-dark-blue: #0E191E;
}

html {
    font-family: Arial;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    font-size: clamp(12px, 4vw, 16px);
}

body {
    margin: 0;
    padding: 2em;
    box-sizing: border-box;
    background-color: var(--global-white);
    color: var(--global-dark-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% */

    hr {
        width: 100%;
    }
}

body a {
    color: var(--global-yellow);
}
#home_link {
    color: var(--global-white);
}
   
body a:hover,
#home_link:hover {
    color: var(--global-white);
}

    

#content {
    /* width: 65vw; */
    margin: 1em;
    word-wrap: break-word;
    position: inherit;
    left: 5vw;
    max-width: 78vw;
}
    
@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: solid 2px;
    min-width: 10vw;
    max-width: 10vw;
    text-indent: -0.25rem;
}



.edge.el {
    padding-top: 2em;
}

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

    border-bottom: 1px solid;
}

.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;
    border: solid 2px;
}

et > * {
    position: fixed;
}


.eb {
    display: flex;
    /* 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; */
    /* justify-content: space-between; */
    min-height: 2.5rem;
    max-height: 2.5rem;
    z-index: 2;
    box-sizing: border-box;
    border-top: outset .01em;
    padding-right: 1em;
    border: solid 2px;
}

.eb #year {
    float: right;
    padding-right: 1em;
    display: flex;
    flex-direction: column;
    justify-content: center;

    a {
        text-decoration: none;
    }
}

.eb #banners {
    display: flex;

    a {
        display: inherit;
    }
}

.er {
    /* 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: 90vw;
    top: 0;
    width: fit-content;
    height: 100vh; /* Fill the viewport height */
    align-content: center;
    z-index: -1;
    box-sizing: border-box;
    border: solid 2px;
    min-width: 10vw;
    max-width: 10vw;
}

.content {
    /* 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: 10vw;
    width: fit-content;
    height: 100vh; /* Fill the viewport height */
    align-content: center;
    z-index: -1;
    box-sizing: border-box;
    border: solid 2px;
    min-width: 80vw;
    max-width: 80vw;
    overflow-y: scroll;
    max-height: 92vh;
}


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

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


/* scroll bar styling */

/* 1. Standard approach (Firefox 64+ & modern browsers) */
* {
  scrollbar-width: none;          /* Makes it narrow and removes clunky buttons */
  scrollbar-color: #888888 transparent; /* thumb color | track color */
}