:root {
    color-scheme: light dark;

    --red_01: #CD0000;
    --red_02: #DC3545;
    --red_03: #DA3E44;

    --green_01: #00CD00;
    --green_02: #4FAF53;

    --blue_01: #1F70C1;
    --blue_02: #8AB4F8;
    --blue_03: #0F172A;

    --grey_01: #131313;

    --periwinkle: #CCCCFF;
    --lava: #D50016;
    --android_green: #4FAF53;
    --ms_teams_purple: #7F85F5;
    --claret: #7F1734;
    --amber: #FFBF00;

    --international_orange-aerospace: #FF4F00;
    --international_orange-goldengate: #C0362C;
    --international_orange-engineering: #BA160C;

    --white-under-text: #EFEFEF;

    --light-background: #EFEFEF;
    --light-color: #131313;
    --light-link-hover-border: #D50016;
    --light-link-hover-color: #D50016;

    --dark-background: #131313;
    --dark-color: #FFFFFF;
    --dark-link-hover-border: #00FFFF;
    --dark-link-hover-color: #00FFFF;
}

* {
    margin: 0;
    padding: 0;
    outline: none;
    border: none;
    font-family: "Arial", sans-serif;
}

html, body {
    color: light-dark(var(--light-color), var(--dark-color));
    background-color: light-dark(var(--light-background), var(--dark-background));
}

header {
    position: relative;
    top: 0;
    padding: 1em 0.5em;
    font-size: 2em;
}

footer {
    position: relative;
    bottom: 1em;
    padding: 0.75em 1em;
    font-size: 0.75em;
}

a:link, a:visited {
    color: inherit;
    border: none;
    outline: none;
    text-decoration: none;
}

a:hover {
    border-bottom: dotted 1px #00FFFF;
    color: #00FFFF;
    border-color: light-dark(var(--light-link-hover-border), var(--dark-link-hover-border));
    color: light-dark(var(--light-link-hover-color), var(--dark-link-hover-color));
}

#content {
    width: fit-content;
    margin: 0 auto;
}

#theImage {
    border: solid 0.1em #000000;
    border-radius: 0.25rem;
}

#weather, #timestamp {
    font-size: 1.25rem;
    color: #FFFFFF;
}

#weather::before {
    content: "Current Conditions: ";
    color: #00FFFF;
}

#timestamp {
    float: right;
    clear: both;
}

#timestamp::before {
    content: "Last Updated: ";
    color: #00FFFF;
}

.hidden {
    visibility: hidden;
    z-index: -1;
}
.visible {
    visibility: visible;
    z-index: 999;
}

.highlight {
    color: #00FFFF;
}