html {
    font-family: "Orbitron", sans-serif;
    font-weight: 700;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 1em;
    min-width: 95vw;
    min-height: 100vh;
    box-sizing: border-box;
}

a {
    color:#000;
    text-decoration:none;
}

h1, h2 {
    font-weight: 400;
}

.bg {
    position:fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size:cover;
}

.normal_bg {
    animation: color_bg 20s ease-in-out infinite alternate;
}

@keyframes color_bg {
    0% {
        filter: brightness(0.15);
    }
    50% {
        filter: brightness(0.25);
    }
    100% {
        filter: brightness(0.1);
    }
}

.content_wrapper {
    position: relative;
    display: flex;
    gap: 2em;
    box-sizing: border-box;
    padding: 2em;
    color: #fff;
}

.page_title_wrapper {
    position: fixed;
}

.page_title_outer_wrapper > div:not(.page_title_wrapper) {
    opacity: 0;
    pointer-events: none;
}

.back_arrow {
    width: 2em;
    cursor: pointer;
}

.back_arrow path {
    transition: fill 0.8s;
    fill: #fffa;
}

.back_arrow:hover path {
    fill: #FE0000;
}

.page_title {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-transform: uppercase;
    margin-top: 1em;
}

.page_title > * {
    margin: 0;
    transform: rotate(-90deg);
    font-size: 2em;
    line-height: 0.9em;
}

.page_title .i_character {
    line-height: 0.4em;
}

.page_title .space_character {
    margin: 0.4em 0;
}

.content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-left: 4em;
    gap: 2em;
    max-width: 70vw;
    margin: auto;
}

.break {
    flex-basis: 100%;
    height: 0;
}

/* Logo Animations */
a.anim_logo svg, .instagram_logo {
    width: 2.5em;
    height: 2.5em;
}

.anim_logo + .anim_logo {
    margin-left: 2em;
}

.facebook_logo, .instagram_logo, .x_logo, .youtube_logo, .twitch_logo, .mail_svg_env {
    fill: #fff;
}

.mail_svg_bg {
    fill: #fff0;
}

.facebook_logo, .instagram_logo, .x_logo, .youtube_logo, .twitch_logo, .mail_svg_env {
    transition: fill 0.8s;
}

a.anim_logo:hover .facebook_logo, a.anim_logo:hover .instagram_logo, a.anim_logo:hover .x_logo, a.anim_logo:hover .youtube_logo, a.anim_logo:hover .twitch_logo, a.anim_logo:hover .mail_svg_env {
    fill: #FE0000;
}

@media (max-width: 1200px) {
    html {
        font-size: 0.9em;
    }
}

@media (max-width: 800px) {
    html {
        font-size: 0.8em;
    }

    .page_title_wrapper {
        font-size: 0.9em;
    }
}