*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    min-height: 100vh;
    height: 100%;
}

body {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
}

a {
    color: #0000e6;
}

a:active, a:visited {
    color: #541b87;
}

p > a {
    color: #e7ccff;
}

a.inline-link:visited {
    color: #ca8eff;
}

.moon-backdrop {
    background: radial-gradient(circle at 15% 5%, #7481cc, transparent), radial-gradient(circle at 100% 0, #042e83, transparent);
    background-color: #000000;
    min-height: inherit;
    width: 100%;
}

.header-content .title-container {
    margin-top: 64px;
    transform: translatey(-50%);
}

.header-container {
    border-bottom: solid 4px #2200bb;
    height: 128px;
    padding-bottom: 12px;
    position: fixed;
    pointer-events: none;
    width: 100%;
    z-index: 10;
}

.starry-scroll::before {
    animation: scroll-stars 30s ease-in-out alternate infinite;
    background: url("/images/starrybackground.png");
    background-repeat: repeat-x;
    content: '';
    height: inherit;
    opacity: 0.33;
    position: absolute;
    width: 200%;
}

h1.page-title {
    color: #f0f8ff;
    margin: 0;
    text-shadow: 1px 2px 3px #000000;
    width: 100%;
}

.socials-row {
    display: flex;
    flex-wrap: wrap;
}

.socials-font * {
    font-size: 20px;
    font-weight: bold;
    text-decoration: none;
}

.socials-container {
    display: inline;
    min-height: 95px;
    width: 100%;
}

.socials-container > a {
    background: #ffffff88;
    border: solid 4px #2200bb;
    border-radius: 12px;
    box-shadow: 1px 2px 3px #333333;
    display: block;
    margin-bottom: 8px;
    margin-top: 8px;
    min-width: 160px;
    padding: 16px;
}

.socials-container > a:hover .social-tag {
    font-size: 24px;
    transform: translateY(-25%);
}

.icon > img {
    height: auto;
    max-width: 32px;
}

.social-tag {
    display: inline-block;
    position: relative;
    transform: translateY(-33%);
}

.light-focus, .light-focus * {
    transition-duration: 200ms;
}

.light-focus:hover,
.light-focus:focus {
    background: #ffffff;
}

.page-content-container {
    margin-left: 10%;
    margin-right: 10%;
    padding-bottom: 64px;
    padding-top: 142px;
}

hr.divider {
    margin-bottom: 16px;
}

.round-fade-title {
    background: linear-gradient(to right, transparent, #ffffff44 8vw);
    border-radius: 0 24px 24px 0;
    padding: 12px 5vw 12px 10vw;
    width: fit-content;
}

.round-title {
    background: #ffffff44;
    border-radius: 24px;
    padding: 12px 5vw 12px 5vw;
    width: fit-content;
}

.text-box {
    background-color: #00000040;
    border: solid #6423c3;
    border-radius: 8px;
    box-shadow: 2px 4px 3px #222222;
    color: #eeeeee;
    font-size: 18px;
    margin-bottom: 24px;
    padding: 24px;
}

.text-box h2 {
    text-shadow: -1px 2px 3px #4d1b98;
    margin-top: 0;
}

.text-box img {
    max-width: 100%;;
}

.bordered-img {
    border: solid 4px #2200bb;
    border-radius: 12px;
    box-shadow: 1px 3px 4px #000000;
}

.embedded-video {
    max-width: 680px;
    width: 100%;
}

.mobile-reverse-cols {
    display: flex;
    flex-direction: column-reverse;
}

.desktop-half-col {
    width: 100%;
}

.centered {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.slide-in-left {
    animation: slide-in-from-left 2s cubic-bezier(0.45, 0.45, 0.2, 1.25) backwards;
}

.slide-in-right {
    animation: slide-in-from-right 2s cubic-bezier(0.45, 0.45, 0.2, 1.25) backwards;
}

.slide-in-bottom {
    animation: slide-in-from-bottom 2s cubic-bezier(0.45, 0.45, 0.2, 1.25) backwards;
}

.wiggles {
    animation: wiggle-sometimes 6s ease-in-out infinite;
}

@media (min-width: 440px) {
    .socials-container {
        display: inline;
        width: 50%;
    }

    .socials-container > a {
        width: fit-content;
    }
}

@media (min-width: 800px) {
    .desktop-half-col {
        width: 50%;
    }
    
    .page-content-container {
        margin-left: 15%;
        margin-right: 15%;
    }

    .socials-container {
        display: inline;
        width: 25%;
    }
}

@media (min-width: 1100px) {
    .round-fade-title {
        background: linear-gradient(to right, transparent, #ffffff44 4vw);
        padding-left: 5vw;
        min-width: 150px;
    }

    .desktop-half-col:first-of-type {
        padding-right: 6px;
    }

    .desktop-half-col:last-of-type {
        padding-left: 6px;
    }

    .mobile-reverse-cols {
        display: flex;
        flex-direction: row;
    }
}

@keyframes scroll-stars {
    to {
        transform: translateX(-50%);
    }
}

@keyframes slide-in-from-left {
    0% {
        opacity: 0;
        transform: translateX(-100%);
    }
    25% {
        opacity: 0;
    }
    100% {
        opacity: 1;
        transform: translateX(0%)
    }
}

@keyframes slide-in-from-right {
    0% {
        opacity: 0;
        transform: translateX(100%);
    }
    25% {
        opacity: 0;
    }
    100% {
        opacity: 1;
        transform: translateX(0%)
    }
}

@keyframes slide-in-from-bottom {
    0% {
        opacity: 0;
        transform: translateY(100%);
    }
    25% {
        opacity: 0;
    }
    100% {
        opacity: 1;
        transform: translateY(0%)
    }
}

@keyframes wiggle-sometimes {
    0%, 75% {
        transform: rotateZ(0);
    }
    80% {
        transform: rotateZ(3deg)
    }
    85% {
        transform: rotateZ(-3deg);
    }
    90% {
        transform: rotateZ(3deg)
    }
    95% {
        transform: rotateZ(-3deg);
    }
    100% {
        transform: rotateZ(0);
    }
}

#signature {
    background: linear-gradient(45deg, #ffffff, #c0ffc0, #ffffff, #c0ffc0, #ffffff);
    background-clip: text;
    color: transparent;
    font-size: 12px;
    margin-left: auto;
    padding-bottom: 4px;
    padding-right: 4px;
    text-align: right;
    text-shadow: 1px 2px 3px #888888;
    width: fit-content;
}