body, html {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
}
body {
    display: flex;
    flex-direction: column;

    background: var(--bg-1);
    color: var(--fg-1);
}

a {
    color: var(--orange-1);
}
a:visited {
    color: var(--orange-2);
}

.sfHeader {
    display: flex;
    flex-direction: row;
    align-items: stretch;

    position: sticky;
    top: 0;
    z-index: 1000;
    height: 3.5rem;

    background: var(--bg-2);
    border-bottom: .1rem solid var(--primary-1);
}
.sfIcon {
    display: flex;
    align-items: center;

    margin: .35rem;
    margin-left: .5rem;
    height: calc(3.5rem - .7rem);
    aspect-ratio: 1 / 1;
}
.sfIcon img {
    width: 100%;
    height: 100%;
    border-radius: 100%;
    border: .1rem solid var(--primary-1);
}

.sfName {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: .5rem;

    font-family: "Archivo Black", sans-serif;
    font-weight: 400;
    font-style: normal;
}

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

    padding: .75rem;

    transition: background 0.3s ease;
    text-decoration: none;
    color: var(--fg-1);
}
.sfMenuLink:visited {
    color: var(--fg-1);
}
.sfMenuLink:hover {
    background: var(--bg-3);
    cursor: pointer;
}
.sfSpacer {
    flex-grow: 1;
}

.sfContent {
    display: flex;
    flex-direction: column;

    margin: 3rem auto 3rem auto;
    width: 85%;
    max-width: 50rem;
    padding: 1rem;

    background: var(--bg-2);
}
.sfContent > * {
    margin-left: 5%;
    margin-right: 5%;
}
.sfContent h1  {
    text-align: center;
    border-bottom: .075rem solid var(--fg-3);
    width: 90%;
    margin: auto;
}
.sfContent h2  {
    text-align: left;
    border-bottom: .075rem solid var(--fg-3);
    width: 90%;
    margin: auto;
}
.sfContent h3 {
    text-align: center;
}
.sfContent p {
    text-indent: 1rem;
}
.sfContent img, .sfContent video {
    border: .1rem solid var(--primary-2);
    align-self: center;
    background: var(--bg-3);
    height: auto;
}

.sfContentRow {
    display: flex;
    flex-direction: row;
    min-height: 10rem;
    justify-content: center;
    padding: 1rem;
    flex-wrap: wrap;
}

.sfRowContainer {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0 1 10rem;
    margin-bottom: 1rem;
    margin-left: 1rem;
    margin-right: 1rem;
}

.sfRowContainer img, .sfRowContainer video {
    display: block;
    max-width: 100%;
    max-height: 15rem;
    width: auto;
    height: auto;
}

.small {
    margin: 0;
    font-size: .75rem;
    color: var(--fg-3);
}
.small-center {
    margin-top: .5rem;
    text-align: center;
    font-size: .75rem;
    color: var(--fg-3);
}

.sfButton, .sfButtonSmall {
    color: var(--fg-1);
    background: var(--orange-1);
    border: solid .15rem var(--fg-1);
    border-radius: .5rem;
    font-weight: bold;
    display: inline;
    font-size: 1.5rem;
    flex: 1 1 0;
    margin-left: 4rem;
    margin-right: 4rem;
    cursor: pointer;
    transition: background 0.3s ease;
}
.sfButtonSmall {
    font-size: .75rem;
    max-width: fit-content;
}

#age {
    margin: 0;
}

#snow {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: -100;
}

#snow i {
    position: absolute;
    top: -5px;

    background: var(--bg-4);
    image-rendering: pixelated;
    animation: snow linear infinite;
}

@keyframes snow {
    from { transform: translate(0, -10px); }
    to { transform: translate(var(--drift), 105vh); }
}