:root {
    --width: 52rem;
    --red: #f32a4a;
    --red-50: #f32a4a80;
    --dark-red: #43011d;
    --darker-red: #28011e;
}

body {
    background-color: #000000;
}
header {
    position: relative;
    background-color: var(--dark-red);
    color: #ffffff;
    text-align: center;
    div {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: var(--dark-red);
        background-image: url(../backgrounds/diamond-dither.optimized.svg);
        background-repeat: repeat-x;
        background-size: contain;
        opacity: 50%;
    }
    img {
        position: relative;
        display: inline-block;
        height: 9rem;
        margin: 1.5rem 0 1rem 0;
        border-radius: 50%;
        border-width: 3px;
        border-style: solid;
        border-color: #ffffff;
        z-index: 1;
        box-shadow: #28011e 0 0 1rem;
    }
}
nav {
    margin: 0;
    padding: 0;
    background-color: #28011e;
    color: #ffffff;
    text-align: center;
    border-width: 3px 0;
    border-style: solid;
    border-color: #ffffff;
    ul {
        padding: 0;
        -webkit-user-select: none; /* Safari */
        -ms-user-select: none; /* IE 10 and IE 11 */
        user-select: none; /* Standard syntax */
        li {
            display: inline-block;
            list-style-type: none;
            a, a:visited {
                position: relative;
                display: inline-block;
                margin: 0;
                padding: 0.3rem 0.5rem 0.4rem 0.5rem;
                color: #ffffff;
                text-decoration: none;
                img, object {
                    position: absolute;
                    display: inline-block;
                    height: 1.5rem;
                    top: -0.3rem;
                    right: -0.5rem;
                }
            }
            a:hover, a:focus {
                background-color: var(--red-50);
            }
            a:active {
                background-color: var(--red);
            }
        }
    }
}
main {
    background: var(--red);
    background: linear-gradient(170deg,var(--red) 0%, var(--darker-red) 100%);
    color: #f0f0f0;
    section {
        margin: 1rem auto;
        padding: 0 1rem;
        max-width: var(--width);
    }
}
footer {
    background-color: var(--dark-red);
    color: #ffffff;
    text-align: center;
    border-width: 3px 0 0 0;
    border-style: solid;
    border-color: #ffffff;
    span {
        display: inline-block;
        margin: 0.4rem;
        img {
            display: inline-block;
            position: relative;
            top: 0.3rem;
            height: 1.2rem;
        }
    }
}