body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px;
    gap: 16px;
    position: relative;
}

.pane {
    box-sizing: border-box;
    box-shadow: 6px 6px 0px #ec8f59;
    background-color: #eeeae2;
    padding: 16px;
}

#content-container {
    width: 100%;
    display: flex;
    gap: 2rem;
}

#banner {
    max-width: 700px;
    width: 100%;
    height: auto;
}

nav {
    max-width: 200px;
    float: right;

    ul {
        list-style-type: '- ';
        padding-left: 10px;
    }

    li {
        line-height: 1.6rem;
    }

    a {
        color:#8b7959;
        text-decoration: none;
    }
}

#left, #right {
    flex: 1;
}

footer {
    margin-top: 20px;
    font-size: 0.7rem;
}

.centre {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

a:has(.wave-letter) {
    white-space: nowrap;
}

.wave-letter {
    display: inline-block;
    transition: transform 0.1s ease;
}

div {
    font-family: sans-serif;
    color: #46310c;
}

p {
    color: #8b7959;
}

p a {
    color: #db6826;
    text-decoration: none;
}

p a:hover .wave-letter {
    animation: wave 0.4s ease forwards;
}

@keyframes wave { /* for wiggly hyperlinks */
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-2px); }
    100% { transform: translateY(0); }
}

html::before {
    content: "";
    position: fixed;
    inset: -50%;
    background: url("media/bg.png") repeat;
    background-size: 182px 181px;
    pointer-events: none;
    animation: driftSlow 8s linear infinite;
    z-index: 0;
}	

@keyframes driftSlow { /* for the moving checker bg */
    from { transform: translate(0, 0); }
    to   { transform: translate(182px,181px); }
}