:root {
    --rose-text: #171717ff;
    --rose-text-alt: #4c4c4cff;
    --rose-accent: #55ff35ff;

    --background: #ffffffff;
}

body {
    color: var(--rose-text);
    padding: 0;
    margin: 0;
}

p, h1, h2, h3, h4 {
    margin: 0 auto;
}

h1, h2, h3, h4 {
    text-align: center;
}

h1 {
    font-size: 1.5rem;
    margin-top: 2rem;
}

h2 {
    font-size: 1.3rem;
}

h3 {
    font-size: 1.1rem;
}

a:visited,
a:link,
a:active {
    /*color: var(--rose-text);*/
    /*text-decoration: none;*/
    box-sizing: border-box;

    &:hover {
        color: var(--rose-text-alt);
    }
}

#header {
    display: flex;
    align-items: center;

    #logo {
        /* 180:60 -> 3:1 */
        height: 6rem;
        width: calc(6rem * 3);
    }

    .link-sep {
        margin: 0 1rem;

        font-size: 3rem;
        color: var(--rose-accent);
        &::before {
            content: "/";
        }
    }

    .part {
        padding: .8rem;
    }
}

#footer {
    >* {
        border: none;
        margin: 0;
    }
}

.horizontal-sep, #footer-sep {
    background-image: radial-gradient(circle, var(--rose-accent) 0%, #FFFFFF00 100%);
    height: .2rem;
    width: 60%;
    margin: 0 auto 2rem auto;
}

#footer-sep {
    margin: 3rem auto 0 auto;
}


.container-3 {
    display: grid;
    grid-template-columns: auto [l] 1fr auto [m] 1fr auto [r] 1fr auto;

    * {
        grid-column-start: m;
    }

    :first-child {
        grid-column-start: l;
    }

    :last-child {
        grid-column-start: r;
    }

    >* {
        text-align: center;
        white-space: pre-line;
        margin: 1rem;
        padding: 1rem;
        border: .2rem solid var(--rose-accent);
        border-radius: 2rem;
    }

    .centered-left {
        display: inline-block;
        text-align: left;
    }
}

#content > *:not(.container-3) {
    max-width: 60vw;
    margin: 0 auto 1rem auto;
    white-space: pre-line;
}

.conflate {
    white-space: initial;
}

#team-container {
    * {
        text-align: left;
    }

    p {
        white-space: pre-line;
        display: inline;
        text-align: left;

        .name {
            font-size: 1.5rem;
            font-weight: bold;
        }

        .portrait {
            float: right;
        }
    }
}

.mobile-br {
    display: none;
}


@media screen and (width < 1000px) {
    .mobile-br {
        display: initial;
    }

    #header, #footer {
        flex-direction: column;
        .link-sep {
            background-image: radial-gradient(circle, var(--rose-accent) 0%, #FFFFFF00 100%);
            height: .2rem;
            width: 80vw;
            &::before {
                content: "";
            }
        }

        .part {
            text-align: center;
        }
    }

    #content p {
        max-width: 80vw;
    }

    .container-3 {
        grid-template-columns: 1fr [m] 5fr 1fr;
        :first-child, :last-child {
            grid-column-start: m;
        }
    }