* {
    /* use a mouse as a cursor */
    cursor: url("/images/mouse.png"), auto;
}

/* default body styling */
body {
    font-size: 20px;
    background: repeat repeat url("/images/clouds.gif");
    color: #4c4f69;
    max-width: calc(100% - 20px);
    margin: auto;
    width: 1600px;
    font-family: "Comic Neue";
}

/* header styling */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: #7287fd;
    font-weight: normal;
}

/* link styling */
a {
    color: #1e66f5;
    text-decoration: none;
}
a:hover {
    /* underline and set the cursor on hover over links */
    text-decoration: underline;
    cursor: url("/images/mouse-squish.png"), auto;
}

/* code block styling */
pre {
    /* code blocks scroll overflow */
    overflow-x: auto;
}
code {
    /* use monospace for code blocks */
    font-family: "Source Code Pro", monospace;
}

/* footer styling */
footer {
    display: flex;
    text-align: center;
    max-width: 700px;
}

/* the content of the page is in a flex box */
.content {
    display: flex;
    justify-content: space-evenly;
}

/* all contents are wrapped in container and container interior */
.container {
    color: #4c4f69;
    background-color: #ea76cb;
    margin-top: 10px;
    margin-right: 10px;
    margin-left: 10px;
    margin-bottom: 10px;
    padding: 5px 5px 5px 5px;
    flex-direction: column;
    display: flex;
}
.container-interior {
    background-color: #eff1f5;
    padding: 5px 5px;
    margin: 2px 2px;
}

/* configure links that contain images */
.link-image {
    margin: auto;
}
.link-image img:hover {
    cursor: url("/images/mouse-squish.png"), auto;
}

/* left and right boxes */
.right,
.left {
    top: -100px;
    align-self: flex-start;
    flex-direction: column;
    display: flex;
    min-width: 300px;
    position: relative;
}

/* the main content */
.words-n-stuff {
    width: 700px;
}

/* display 3 columns of 88x31 images for badges */
.c88x31s {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 270px;
}
.c88x31 {
    flex: 33%;
}

/* webring styling */
.webrings {
    text-align: center;
}
.webring-container {
    all: unset;
    display: flex;
    flex-direction: column;
    padding: 1em;
}
.webring-links {
    all: unset;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.webring-description {
    margin-block-end: 0.5em;
}

#website-header {
    text-align: center;
}
#projects-button {
    width: 100px;
    height: 32px;
}
#projects-button:hover {
    background: url("/images/Projects-Button-Hover.png");
}
#blog-button {
    width: 61px;
    height: 32px;
}
#blog-button:hover {
    background: url("/images/Blog-Button-Hover.png");
}
#rss-button {
    width: 84px;
    height: 32px;
}
#rss-button:hover {
    background: url("/images/RSS-Button-Hover.png");
}
#title-image {
    width: 359px;
    height: 100px;
}
#title-image:hover {
    background: url("/images/title-hover.png");
}

@media screen and (max-width: 1380px) {
    .content {
        flex-direction: column;
    }

    .left,
    .right {
        width: 100%;
        top: 0px;
    }

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

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

    .words-n-stuff {
        width: 100%;
    }
    .title {
        width: 100%;
    }

    .c88x31s {
        width: 100%;
    }
    .c88x31 {
        flex: 0%;
    }

    #title-image {
        width: 95%;
        height: auto;
        max-width: 360px;
    }

    footer {
        width: 100%;
    }
}