* {
    -webkit-user-select: none;
    /* Chrome all / Safari all */
    -moz-user-select: none;
    /* Firefox all */
    -ms-user-select: none;
    /* IE 10+ */
    user-select: none;
    /* Likely future */

    --color-black       : #101010;
    --color-darkgrey    : #252525;
    --color-lightgray   : #6e6e6e;
    --color-darkstone   : #7c7c7c;
    --color-almostwhite : #b9b9b9;
    --color-grey        : #8e8e8e;
    --color-white       : #f7f7f7;
    --color-beige       : #e3e3e3;
    --color-red         : #ce5252;
    --color-green       : #9ca54e;
    --color-blue        : #5f819d;
    --color-yellow      : #f0c674;

    --color-magenta: #ce73ce;
    --color-pink: #edcbed;
    --color-blue: #9fced6;
    --color-aqua: #65c4b2;
    --color-old-white: #f4f1e8;
    --color-old-black: #070707;

    --font-redhat: "Red Hat Text";
    --font-quicksand: "Quicksand";
    --font-lexend: "Lexend Deca";
    --font-afacad: "Afacad Flux";
}

body {
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
    background-color: var(--color-black);
    font-weight: normal;
    text-align: center;
    /* line-height: 1; */
    color: var(--color-almostwhite);
    letter-spacing: 3px;
    margin: 0 auto;
    font-family: var(--font-quicksand);
    font-size: 1.25rem;
}

a {
    text-decoration: none;
    color: var(--color-pink);
}

a.underline {
    text-decoration: none;
    border-bottom: 1px solid var(--color-pink);
}

a.underline:hover {
    text-decoration: none;
    border-bottom: 1px solid var(--color-almostwhite);
}

a:hover {
    text-decoration: none;
    /* color: var(--color-magenta); */
    color: var(--color-almostwhite);
    text-shadow: 1px 1px rgba(246, 0, 153, 0.8),
        -1px -1px rgba(15, 210, 255, 0.8),
        -1px 0px rgba(255, 210, 0, 1);
}

a:visited {
    text-decoration: none;
    /* color: var(--color-pink); */
}

/* Text decoration */

h2,
h3,
h4,
h5 {
    font-family: var(--font-redhat);
    font-weight: normal;
    /* margin-left: 10px; */
    /* margin-right: 10px; */
}

h1 {
    /* font-size: 20px; */
    letter-spacing: 9px;
    font-weight: normal;
}

/* h2 { */
/*     font-size: 18px; */
/* } */
/**/
/* h3 { */
/*     font-size: 16px; */
/* } */
/**/
/* h4 { */
/*     font-size: 12px; */
/* } */
/**/
/* h5 { */
/*     font-size: 10px; */
/* } */

/* Scrollbar */

::-webkit-scrollbar {
    width: 2px;
    height: 2px;
}

::-webkit-scrollbar-track {
    background: var(--color-black);
}

::-webkit-scrollbar-thumb {
    background: var(--color-darkstone);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-almostwhite);
}

::-webkit-scrollbar-corner {
    background: var(--color-black);
}

/* Utils */

.block {
    background-color: var(--color-black);
    width: 55%;
    height: auto;
    margin: 35px auto 10px auto;
    padding: 1px;
}

.margin-children > * {
    margin: 1rem;
}

.flex {
    display: flex;
}

.flex-row {
    flex-direction: row;
}

.flex-column {
    flex-direction: column;
}

.flex-left {
    justify-content: left;
}

.flex-right {
    justify-content: right;
}

.flex-middle {
    justify-content: center;
}

.flex-stretch {
    justify-content: space-around;
}

.flex-top {
    align-items: flex-start;
}

.flex-bottom {
    align-items: flex-end;
}

.flex-center {
    align-items: center;
}

.flex-base {
    align-items: baseline;
}

.block {
    display: block;
}

.inline {
    display: inline;
}

.pad {
    padding: 1em;
    box-sizing: border-box;
}

.wide {
    width: 100%;
}

.bold {
    font-weight: bold;
}

.italic {
    font-style: italic;
}

.underline {
    text-decoration: underline;
}

.strikethrough {
    text-decoration: line-through;
}

.expanded {
    text-align: justify;
}

.heavy {
    font-weight: 600;
}

.upper {
    text-transform: uppercase;
}

.lower {
    text-transform: lowercase;
}

.left {
    text-align: left;
}

.right {
    text-align: right;
}

.center {
    text-align: center;
}

.blue {
    color: var(--color-blue);
}

.magenta {
    color: var(--color-magenta);
}

.pink {
    color: var(--color-pink);
}

.abberate {
    text-shadow: 1px 1px rgba(246, 0, 153, 0.8),
        -1px -1px rgba(15, 210, 255, 0.8),
        -1px 0px rgba(255, 210, 0, 1);
}

/* Class controls */

.hide {
    display: none;
}

button {
    padding: 0;
    border: none;
    outline: none;
    background: none;
}

button:active {
    border: none;
    box-shadow: none;
}

/* Custom elements */
#link-container a {
    margin: auto 0.5em;
}

/* Animations */


.glitch-animate {
    position: relative;
    /* margin: 0 auto; */
    /* letter-spacing: 0.01em; */
    transform: scale3d(1, 1, 1);
}

.glitch-animate::before,
.glitch-animate::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    clip: rect(0, 900px, 0, 0);
}

.glitch-animate::before {
    left: 7px;
    text-shadow: 1px 0 green;
    animation: glitch-effect 3s infinite linear alternate-reverse;
}

.glitch-animate::after {
    left: 3px;
    text-shadow: -1px 0 red;
    animation: glitch-effect 2s infinite linear alternate-reverse;
}

@-webkit-keyframes glitch-effect {
    0% {
        clip: rect(51px, 9999px, 98px, 0);
    }

    5% {
        clip: rect(64px, 9999px, 94px, 0);
    }

    10% {
        clip: rect(89px, 9999px, 7px, 0);
    }

    15% {
        clip: rect(34px, 9999px, 99px, 0);
    }

    20% {
        clip: rect(84px, 9999px, 43px, 0);
    }

    25% {
        clip: rect(57px, 9999px, 29px, 0);
    }

    30% {
        clip: rect(30px, 9999px, 84px, 0);
    }

    35% {
        clip: rect(12px, 9999px, 7px, 0);
    }

    40% {
        clip: rect(36px, 9999px, 87px, 0);
    }

    45% {
        clip: rect(78px, 9999px, 52px, 0);
    }

    50% {
        clip: rect(67px, 9999px, 19px, 0);
    }

    55% {
        clip: rect(20px, 9999px, 4px, 0);
    }

    60% {
        clip: rect(72px, 9999px, 37px, 0);
    }

    65% {
        clip: rect(22px, 9999px, 63px, 0);
    }

    70% {
        clip: rect(9px, 9999px, 71px, 0);
    }

    75% {
        clip: rect(10px, 9999px, 81px, 0);
    }

    80% {
        clip: rect(20px, 9999px, 62px, 0);
    }

    85% {
        clip: rect(78px, 9999px, 83px, 0);
    }

    90% {
        clip: rect(1px, 9999px, 34px, 0);
    }

    95% {
        clip: rect(41px, 9999px, 11px, 0);
    }

    100% {
        clip: rect(19px, 9999px, 73px, 0);
    }
}

@keyframes glitch-effect {
    0% {
        clip: rect(51px, 9999px, 98px, 0);
    }

    5% {
        clip: rect(64px, 9999px, 94px, 0);
    }

    10% {
        clip: rect(89px, 9999px, 7px, 0);
    }

    15% {
        clip: rect(34px, 9999px, 99px, 0);
    }

    20% {
        clip: rect(84px, 9999px, 43px, 0);
    }

    25% {
        clip: rect(57px, 9999px, 29px, 0);
    }

    30% {
        clip: rect(30px, 9999px, 84px, 0);
    }

    35% {
        clip: rect(12px, 9999px, 7px, 0);
    }

    40% {
        clip: rect(36px, 9999px, 87px, 0);
    }

    45% {
        clip: rect(78px, 9999px, 52px, 0);
    }

    50% {
        clip: rect(67px, 9999px, 19px, 0);
    }

    55% {
        clip: rect(20px, 9999px, 4px, 0);
    }

    60% {
        clip: rect(72px, 9999px, 37px, 0);
    }

    65% {
        clip: rect(22px, 9999px, 63px, 0);
    }

    70% {
        clip: rect(9px, 9999px, 71px, 0);
    }

    75% {
        clip: rect(10px, 9999px, 81px, 0);
    }

    80% {
        clip: rect(20px, 9999px, 62px, 0);
    }

    85% {
        clip: rect(78px, 9999px, 83px, 0);
    }

    90% {
        clip: rect(1px, 9999px, 34px, 0);
    }

    95% {
        clip: rect(41px, 9999px, 11px, 0);
    }

    100% {
        clip: rect(19px, 9999px, 73px, 0);
    }
}

#scanlines {
    background-image: url("/assets/images/scanlines.png");
    background-repeat: repeat;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    animation: scanAnim 0.7s infinite;
    animation-timing-function: linear;
    pointer-events: none;
    opacity: 1;
}

@keyframes scanAnim {
    0% {
        background-position: 0px 0px;
    }

    100% {
        background-position: 0px 8px;
    }
}