:root {
    --color-light:rgb(235, 235, 235);
    --color-dark:rgb(32, 32, 32);

    --foreground:var(--color-light);
    --background:var(--color-dark);
}

.light-mode {
    --color-light:rgb(200, 210, 210);
    --color-dark:black;

    --foreground:var(--color-dark);
    --background:var(--color-light);
}

.mode-transition {
    -moz-transition: all .5s ease-in;
    -o-transition: all .5s ease-in;
    -webkit-transition: all .5s ease-in;
    transition: all .5s ease-in;
}

body {
    background-color:var(--background);
    color:var(--foreground);
    font-family:sans-serif;
}

.content {
    padding-left:0.5em;
    padding-right:0.5em;
    padding-bottom:4em;
}

#back-to-top-button {
    animation:slideIn 0.75s;
    display:none;

    bottom:5px;
    right:20px;
    position:fixed;

    border:none;
    border-radius:50%;
    outline:none;
    background:transparent;

    font-size:2em;
    color:var(--foreground);
}

@keyframes slideIn {
    from {
        display:block;
        bottom:-2em;
    }
    to {
        display:block;
        bottom:5px;
    }
}

#back-to-top-button:hover, #back-to-top-button:active  {
    bottom:15px;
    transition:ease-out 0.15s;
}

.banner {
    display:none;
    background-color:hsl(0, 0%, 45%);
    color:rgb(235, 235, 235);
    line-height:1.5em;
    margin:-0.5em -0.5em;
    padding:0.75em 0.75em;
    position:sticky;
    top:0;
    z-index:999;
}

.banner-button {
    border:2px solid hsl(120, 30%, 75%);
    border-radius:4px;
    background-color:hsl(120, 30%, 50%);
    color:rgb(235, 235, 235);
    font-size:1em;
    padding:3px 5px;
    margin:1em 0 0.5em 0;}

.banner-button:hover {
    background-color:hsl(120, 40%, 55%);
}

h1, h2, h3, h4, h5, h6, p {
    margin-top:0;
    margin-bottom:0;
}

h1, h2, button, .important {
    font-family:sans-serif;
}

h1, h2 {
    font-weight:600;
}

h1 {
    font-size:4em;
    padding-top:15px;
}

#dark-mode-toggle {
    border:2px solid rgb(165, 165, 165);
    border-radius:4px;
    background-color:rgb(50, 50, 50);
    color:rgb(235, 235, 235);
    font-size:1em;
    padding:3px 5px;
    margin:0.5em 0;
}

#dark-mode-toggle:hover {
    background-color:rgb(30, 30, 30);
}

#dark-mode-toggle:active {
    background-color:rgb(20, 20, 20);
    color:rgb(195, 195, 195);
}

ul {
    margin-left:0.5em;
    padding-left:0.5em;
}

a, a:visited, a:hover, a:active {
    color:inherit;
}

h2 {
    font-size:2.5em;
}

.content-section {
    margin-top:3em;
    padding-top:0.5em;
}

.content-section-header {
    padding-bottom:1em;
}

.content-subsection {
    line-height:1.5em;
    padding-top:0.5em;
    padding-bottom:1em;
}

img {
    height:calc(100vmin - 2em);
    width:auto;
    padding-top:1em;
}