@font-face {
    font-family: "FreePixel";
    src: url("https://sadhost.neocities.org/fonts/FreePixel.ttf") format("truetype");
}

:root {
    --background: #221122;
    --main-color: #EB53D3;
    --main-color-dk: #551251;
    --accent-1: #6eebff;
    --accent-2: #a225e3;
    --content-spacing: 5px;
    --background-img: #332233;
    --banner: url("/miau.gif");
    --titleBars: #551251;
    --text-color: white;
    --border: 1px solid black;
    --arrows: url('/arrow.png');
}

.centered {
    text-align: center;
}

html,
body {
    margin: 0;
    box-sizing: border-box;
    font-family: "FreePixel";
}

body {
    background-color: var(--background-img);
    color: var(--text-color);
    background-attachment: fixed;
}

.topbar {
    background-image: var(--banner);
    height: 150px;
    margin-bottom: var(--content-spacing);
    border: var(--border);
}

#container,
.topbar img {
    max-width: 850px;
    margin: 0 auto;
}


#container {
    border-top: none;
}

#flex {
    display: flex;
    max-width: 850px;
}

aside {
    width: 30%;
    margin-left: var(--content-spacing);
    border-left: var(--border);
    background-color: var(--background);
}

.title,
.sidebar-title {
    background-image: var(--titleBars);
    font-weight: bold;
    border: var(--border);
    font-size: 20px;
}

main {
    width: 74%;
    background-color: var(--background);
}

nav {
    position: sticky;
    top: 20px;
}

nav ul {
    list-style-image: var(--arrows);
    margin-left: 0;
    padding-left: 30px;
}

nav ul li a {
    color: var(--accent-1);
}

.content {
    padding: 25px;
}

footer {
    border: var(--border);
    color: red;
    font-weight: bold;
    height: 25px;
    margin-top: var(--content-spacing);
    background-color: var(--titleBars);
    text-align: center;
}

@media only screen and (max-width: 640px) {
    nav ul {
        list-style-image: none;
        list-style-type: none;
    }

    #flex {
        flex-wrap: wrap;
    }

    main {
        width: 100%;
        order: 2;
    }

    aside {
        display: block;
        width: 100%;
        order: 1;
        margin-left: 0;
    }

    nav ul {
        display: flex;
        flex-wrap: wrap;
    }

    nav ul li {
        padding-right: 10px;
    }

    nav ul>ul {
        display: none;
    }
}

@media only screen and (max-height: 640px) {
    nav ul>ul {
        display: none;
    }
}