:root {
	--clear: #00000000;
}

/*elements*/
h1 {
    margin: 0;
}

main {
    flex: 1; /*length regardless of content*/
    order: 2; /*order of flexible items realtive to other flexible items in #flex*/
}

aside {
	width: 25%;
    order: 1;
}

/*classes*/
.mobileOnly {
    display: none; /*does not take up space (on desktop)*/
    visibility: hidden; /*does not appear (on desktop)*/
}

.flex { /*contains the flexible part of the page*/
    display: flex; /*flex container*/
}

.column {
    flex: 50%
}

.column img {
	max-height: 50vh;
    max-width: 100%
}

.box { /*used for an element whose contents need general padding, border makes sure that background fills padding*/
    padding: 1em;
    border: 1px solid var(--clear)
}

.resize {
	resize: vertical;
	overflow: hidden;
}

.scroll {
	overflow: auto;
}

.center {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.textCenter {
    text-align: center;
}

.hasHeading {
	padding-top: 0;
}

.button {
    height: 31px;
    padding: .25em;
}

.webring {
    display: inline;
    flex: 1;
}

/*IDs*/
#container {
    max-width: 800px; /*width of page contents, if this is changed remember to change media query*/
    margin: auto; /*centers div*/
}

#navbar ul {
    /*removes bullet points*/
    list-style-type: none;
    margin: 0;
    padding: 0;

    text-align: center;
}

#navbar li {
    display: inline;
    padding: .25em;
}

#blinkies {
    justify-content: space-evenly;
    padding-top: 1em;
}

#blinkies img {
    vertical-align: top;
}

#about {
    height: 8.5em;
    min-height: 8.5em;
}

@media only screen and (max-width: 700px /*-100 of container max-width*/) {
    .mobileOnly {
        display: block;
        visibility: visible;
    }

    #blinkies {
        display: block;
        text-align: center;
        padding-top: 1em;
    }

    #webrings {
        display: block;
        text-align: center;
        padding-top: 1em;
    }

    .flex {
        display: grid;
    }

    main {
        order: 1;
    }

    #about {
        height: initial;
    }

    aside {
        width: auto;
        order: 2;
    }
}