/* variables */

    :root {
        --header-image: url('shelly-squid-header.png');

        /* colors */

        --black: rgb(0, 0, 0);

        --yellow: rgb(255, 160, 0);
        --lightyellow: rgb(255, 217, 142);

        --lightblue: rgb(150, 200, 255);
        --blue: rgb(70, 108, 178);
        --brightblue: rgb(100, 180, 255);
        --darkblue: rgb(26, 9, 56);
        --blackblue: rgb(27, 2, 34);

        --purple: rgb(187, 120, 255);
        --squidpink: rgb(255, 44, 146);
        --lightpink: rgb(255, 198, 226);

        --green: rgb(142, 229, 65);
        --lightgreen: rgb(188, 255, 129);

        scrollbar-color: var(--squidpink) var(--brightblue);
    }

    .house {
        background: url("neon-home.png");
        background-size: 100%;
        height: 16px;
        width: 16px;
        display: inline-block;
        image-rendering: -moz-crisp-edges;
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
        image-rendering: pixelated;
    }
    .question {
        background: url("neon-question.png");
        background-size: 100%;
        height: 16px;
        width: 16px;
        display: inline-block;
        image-rendering: -moz-crisp-edges;
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
        image-rendering: pixelated;
    }
    .sprout {
        background: url("neon-sprout.png");
        background-size: 100%;
        height: 16px;
        width: 16px;
        display: inline-block;
        image-rendering: -moz-crisp-edges;
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
        image-rendering: pixelated;
    }
    .star {
        background: url("neon-star.png");
        background-size: 100%;
        height: 16px;
        width: 16px;
        display: inline-block;
        image-rendering: -moz-crisp-edges;
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
        image-rendering: pixelated;
    }

    @font-face {
        font-family: PixelTitle;
        src: url('/fonts/pixel-thick.ttf');
    }

    @font-face {
        font-family: Pixel;
        src: url('/fonts/pixel-thin.ttf');
    }

    #back {
        text-align: left;
        margin-top: 0;
        color: var(--lightblue);
    }

    body {
        font-family: 'Pixel', sans-serif;
        margin: 0;
        background-size: 65px;
        color: white;
        background-image: linear-gradient(var(--black), var(--darkblue), var(--darkblue), var(--black), var(--black), var(--black), var(--black), var(--darkblue));
        cursor: url('cursor-squid.png'), auto;
        scrollbar-color: var(--pink) var(--blackblue);
        font-size: 18px;
        margin-top: 30px;
        margin-bottom: 30px;
    }

    * {
        box-sizing: border-box;
    }

    /* the "container" is what wraps your entire website */
    /* if you want something (like the header) to be Wider than
the other elements, you will need to move that div outside
of the container */
    #container {
        max-width: 900px;
        /* this is the width of your layout! */
        /* if you change the above value, scroll to the bottom
and change the media query according to the comment! */
        margin: 0 auto;
        /* this centers the entire page */
    }

    #container a {
        color: var(--lightgreen);
        font-weight: bold;
        text-decoration: underline dashed 2px;
        text-shadow: 0px 0px 5px var(--green);
    }

    #container a:hover {
        cursor: url('cursor-shelly.png'), pointer;
        color: var(--lightblue);
        text-shadow: 0px 0px 5px var(--blue), 0px 0px 5px var(--blue);
    }

    #header {
        width: 380px;
        background-color: none;
        background-image: var(--header-image);
        background-size: 100%;
        background-repeat: no-repeat;
        margin: auto;
        margin-top: 10px;
        height: 280px;
    }

    /* navigation start */

    nav {
        overflow: hidden;
        min-height: 50px;
        background-color: var(--darkblue);
        border: 2px solid var(--lightblue);
        border-radius: 25px;
        box-shadow: 0px 0px 20px var(--brightblue);
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        align-items: center;
        margin-bottom: 30px;
        font-size: 18px;
    }

    nav a {
        color: var(--lightpink) !important;
        text-shadow: 0px 0px 5px var(--squidpink), 0px 0px 5px var(--squidpink) !important;
        text-decoration: none !important;
        text-align: center;
        font-weight: normal !important;
        padding: 15px;
    }
    
    #dropdown {
        overflow: hidden;
    }

    #dropdown #dropbtn {
        font-size: 18px;
        border: none;
        outline: none;
        color: var(--lightpink) !important;;
        text-shadow: 0px 0px 5px var(--squidpink), 0px 0px 5px var(--squidpink) !important;;
        padding-top: 12px;
        background-color: inherit;
        font-family: inherit;
        margin: 0;
        padding: 15px;
    }

    nav a:hover, #dropdown:hover #dropbtn, #dropdown-content a:hover {
        color: var(--lightyellow) !important;
        text-shadow: 0px 0px 5px var(--yellow), 0px 0px 5px var(--yellow) !important;;
        text-decoration: underline dashed 2px !important;
        cursor: url('cursor-shelly.png'), pointer;
    }

    #dropdown-content {
        display: none;
        position: absolute;
        background-color: var(--darkblue);
        border: 2px solid var(--lightblue);
        border-radius: 0px 0px 25px 25px;
        min-width: 120px;
        z-index: 1;
        box-shadow: 0px 0px 20px var(--brightblue);
    }

    #dropdown-content a {
        float: none;
        color: var(--pink);
        padding: 15px;
        text-decoration: none;
        display: block;
        text-align: left;
    }

    #dropdown:hover #dropdown-content {
        display: block;
    }
    
    /* navigation end */

    #flex {
        display: flex;
    }

    aside {
        background-color: var(--darkblue);
        border: 5px solid var(--blackblue);
        border-radius: 20px;
        width: 200px;
        padding: 20px;
        font-size: smaller;
    }

    main {
        background-color: var(--blackblue);
        border: 2px solid var(--lightyellow);
        border-radius: 5px;
        flex: 1;
        padding: 20px;
        order: 2;
        box-shadow: 0px 0px 20px var(--yellow);
    }

    #leftSidebar {
        order: 1;
        margin-right: 10px;
    }

    #rightSidebar {
        order: 3;
        margin-left: 10px;
    }

    footer {
        background-color: var(--darkblue);
        border: 2px solid var(--lightblue);
        border-radius: 50px;
        box-shadow: 0px 0px 20px var(--brightblue);
        width: 100%;
        height: auto;
        padding: 10px;
        margin-top: 30px;
        color: var(--lightpink);
        text-shadow: 0px 0px 5px var(--squidpink), 0px 0px 5px var(--squidpink);
        display: flex;
        justify-content: space-evenly;
        font-weight: normal !important;
    }
    footer a {
        color: var(--lightpink) !important;
        text-shadow: 0px 0px 5px var(--squidpink), 0px 0px 5px var(--squidpink) !important;
        font-weight: normal !important;
    }

    footer a:hover {
        color: var(--lightyellow) !important;
        text-shadow: 0px 0px 5px var(--yellow), 0px 0px 5px var(--yellow) !important;
        font-weight: normal !important;
    }

    img{
        user-select: none;
    }

    #wys-art {
        width: 100%;
        display: flex;
    }

    #wys-art img {
        display: block;
        width: 40%;
        margin: 10px auto;
    }

    h1, h2, h3 {
        color: var(--lightblue);
        font-style: italic;
        text-shadow: 0px 0px 5px var(--blue), 0px 0px 10px var(--blue);
        font-weight: lighter;
        font-family: 'PixelTitle', sans-serif;
    }

    h2, h3 {
        text-align: center;
    }

    h1 {
        font-size: 32px;
        text-align: center;
        border-bottom: 2px dashed var(--squidpink);
    }

    h2 {
        font-size: 24px;
        margin: auto;
    }

    h3 {
        font-size: 16px;
    }

    p {
        text-align: center;
    }

    strong {
        color: var(--squidpink);
    }

    hr {
       border:2px dashed var(--yellow);
    }

    em {
        color: var(--lightyellow);
        text-shadow: 0px 0px 5px var(--yellow);
        font-style: normal;
        font-weight: bold;
    }

    .spoiler {
        position: relative;
        margin: auto;
        text-align: center;
    }

    .spoiler-content {
        display: none;
        padding: 12px 16px;
        z-index: 1;
    }

    .spoiler:hover .spoiler-content {
        display: block;
    }

    /* to-do start */
    
    /* BELOW THIS POINT IS MEDIA QUERY */

    /* so you wanna change the width of your page? 
by default, the container width is 900px.
in order to keep things responsive, take your new height,
and then subtrack it by 100. use this new number as the 
"max-width" value below
*/

    @media only screen and (max-width: 800px) {
        #flex {
            flex-wrap: wrap;
        }

        aside {
            width: 100%;
        }

        #header {
            height:210px
        }
        main {
            order: 2;
        }

        #leftSidebar {
            order: 1;
            margin-right: 0;
        }

        #rightSidebar {
            order: 3;
            margin-left: 0;
        }

        #sideimg {
            width: 150px;
        }
    }