:root {
    /* colors */
    --blue: rgb(42, 42, 194);
    --lightblue: #BEDAFF;

    --pink: rgb(234, 50, 123);

    --linkv: rgb(171, 17, 202);

    --white: whitesmoke;
    --black: black;

    --rainbow: linear-gradient(to right, red, orange, yellow, green, blue, purple);
    --blue2pink: linear-gradient(to right, var(--blue), var(--pink));

    /* vars for site elements */
    --sitebg: var(--white);
    --contentbg: var(--white);

    --bgimg: url(../images/skyocean.gif);

    --txtcolor: var(--black);
}


html, body {
    background-color: var(--sitebg);
    background-image: var(--bgimg);

    background-attachment: fixed;

    /* doesnt work properly without background-attachment: fixed*/
    background-size: auto 100%;
    background-repeat: repeat-x;
  
    font-family: "MS UI Gothic";
    color: var(--txtcolor);

    padding: 0;
    margin: 0;
}

nav, main {
    border-color: var(--blue);
    border-style: solid;
    border-width: medium;
    border-radius: 3px;

    background-color: var(--contentbg);

    padding: 10px;
    margin-bottom: 10px;
}

header, footer {
    text-align: center;
}

header {
    margin-bottom: 10px;

    /* to make banner img look nice */
    border-style: none;
    padding: 0;
}

header > img {
    width: 100%;
}

footer {
    color: var(--txtcolor);
}

footer img {
    width: 75%;
}

main {
    width: 100%;
    margin-left: 20px;
}

nav {
    max-width: 150px;
}

nav ul {
    list-style-type: none;
    padding-left: 0;
}

iframe {
    border: none;
    width: 100%;
}




/* text / small elements */

h3 {
    background: var(--blue2pink);
    color: var(--white);

    width:fit-content;
    padding: 1px 2px;
}

strong {
    /* gradient text */
    background: var(--blue2pink);
    -webkit-text-fill-color: transparent;
    background-clip: text;

    padding: 1px;
}

/* link colors */

a:link {
    color: var(--blue);
}

a:visited {
    color: var(--linkv);
}

/***************/

hr {
    color: var(--lightblue);
    width: 75%;
}





/* classes */

.container {
    max-width: 800px;

    padding: 10px;

    /* centering: */
    margin-left: auto;
    margin-right: auto;
}

.flex { /* contains nav and main side-by-side */
    display: flex;
}

.flex-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}





/* ids */

#imood {
    background-color: lightgray;
    border-style: outset;

    color: var(--black);

    margin-left: auto;
    margin-right: auto;

    width: fit-content;

    padding: 5px;
}




/* media queries */

@media (prefers-color-scheme: dark) {
    :root {
        --blue: rgb(47, 47, 226);
        --sitebg: var(--black);
        --contentbg: var(--black);

        --bgimg: url(../images/starsagain.gif);

        --txtcolor: var(--white);
    }
    
    html, body {
        background-size: unset;
        background-repeat: unset;
    }

    footer {
        background-color: var(--black);
    }
}

@media only screen and (max-width: 800px) {
    /* make nav go on top of main when screen is small */
    /* a bit ugly but it works :) */

    .flex { /* this breaks semantics woops */
        display: flex;
        flex-wrap: wrap;
    }

    main {
        margin-left: 0;
    }
    
    nav {
        max-width: unset;
        width: 100%;
    }

    nav h3 { /* hidden in narrow view */
        opacity: 0;
        font-size: 0;
    }

    nav ul {
        margin: 0;
    }

    nav li { /* horizontal */
        display: inline-block;
    }
}