* {
    margin: 0;
    padding: 0;
}

@font-face {
    font-family: "Pixel Operator";
    src: url("../assets/fonts/PixelOperator.ttf");
    font-weight: normal;
    font-style: normal;
    unicode-range: U+0000-00FF;
}

@font-face {
    font-family: "Emoji Font";
    src: url("../assets/fonts/EmojiFont.ttf");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Windows";
    src: url("../assets/fonts/windowsBold.ttf");
    font-weight: normal;
    font-style: normal;
}

:root {
    /* core neon blues */
    --blue-primary: #1100ff;
    --blue-soft: #1b2a4b;

    /* accent pops */
    --neon-pink: #ff00c8;
    --neon-purple: #7300ff;
    --neon-green: #00ff9f;

    /* utils shades */
    --black: #050505;
    --gray: #2a2a2a;
    --white: #e6faff;

    --primary-text-shadow: 0 0 6px #91a4ff;
}

body {
    background: var(--black);
    color: var(--white);
    text-shadow: var(--primary-text-shadow);
    font-family: 'MS PGothic', 'ＭＳ Ｐゴシック', Georgia, Arial, Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
}

#container {
    width: 960px;
    margin: 10px auto auto;
    padding: 5px;

    outline: 2px solid white;
    border-radius: 8px;

    /* left -> right shadow to get the side box shadow */
    box-shadow: -30px 0 30px -15px var(--blue-primary),
    30px 0 30px -15px var(--blue-primary);
}


/* header stuff. */

#header {
    display: grid;
    grid-template-columns: 0.4fr 0.8fr 0.3fr;

    position: relative;
    height: 100px;
    overflow: hidden;

    border: 1px solid white;
    border-radius: 4px 4px 0 0;
}

#header::before {
    content: "";
    position: absolute;
    inset: 0;
    /* hard diagonal split: */
    /* bright blue -> dark side which is black */
    background: linear-gradient(135deg,
    rgb(16, 36, 145, 1) 10%,
    rgba(0, 0, 0, 1) 20%);
    pointer-events: none;

    z-index: 0;
}

.header-left,
.header-middle,
.header-right {
    position: relative;
    height: 100%;
}

#titleLogo {
    position: relative;
    top: 45px;
    left: 15px;

    font-family: "Pixel Operator", serif;
    font-weight: bold;
    font-size: 3em;
    color: white;

    z-index: 2;
    /* keep text above base bg */
    mix-blend-mode: difference;

    text-shadow: var(--neon-purple) 8px 0 2px;
    animation: titleFlicker 4s steps(1) infinite;
}

.header-middle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.header-text {
    color: var(--white);
    text-shadow: 0 0 6px var(--primary-text-shadow);

    opacity: 1;
    animation: flickerText 2s infinite;
}

.header-right {
    display: flex;
    align-items: center;
}

.header-right img {
    height: 100px;
    width: auto;
    display: block;
}

#reiHeader {
    position: relative;
    left: 60px;

    filter: blur(0.5px) contrast(140%) grayscale(85%);
    z-index: 1;
}

#headerMoon {
    position: relative;
    bottom: 30px;
    left: 30px;

    border-radius: 50%;
}

/* end of header stuff */

/* scrolling thing */
#scrollingThing {
    background-color: var(--black);

    padding: 8px 0 4px 0;
    margin-top: 4px;

    font-size: 0.8em;

    border: 1px solid var(--white);
}

/* body stuff */
table {
    border-collapse: collapse;
    margin: 0;
    padding: 0;
    border-spacing: 0;
}

.bodyBox {
    background-color: var(--black);
    color: var(--white);

    margin: 5px 0;
    padding: 10px 15px;

    border: 1px solid white;
}

.bodyText {
    font-size: 0.9em;
}

#menuTable {
    width: 250px;
    vertical-align: baseline;
}

.titleContainer {
    display: flex;
    font-family: "Pixel Operator", sans-serif;
    font-size: 1.5em;
}

.bodyTitleIcon {
    font-family: "Emoji Font", sans-serif;
    font-size: 1.6em;

    margin-right: 5px;
}

.bodyIcon {
    font-family: "Emoji Font", sans-serif;
    margin-right: 5px;
}

.navlink {
    color: var(--white);
    display: inline-block;
    margin-bottom: 3px;
    text-decoration: none;
}

.navlink:hover {
    text-decoration: underline;
}

.navlink a:visited {
    color: var(--white);
}

/* main content */
#mainTable {
    width: 760px;
    vertical-align: baseline;
}

#mainBox {
    margin-left: 5px;
}

/* site section */
#sites {
    padding: 2px 5px;
}

#sitesButtons {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
}

/* about me page */
#aboutContainer {
    width: 750px;
    margin: 65px auto 10px;
    padding: 5px;

    outline: 2px solid white;
    border-radius: 8px;

    /* left -> right shadow to get the side box shadow */
    box-shadow: -20px 0 30px -5px var(--blue-primary),
    30px 0 30px -5px var(--blue-primary);
}

#aboutMeCell {
    width: 450px;
    height: 600px;
    display: flex;
    flex-direction: column;

    padding-left: 8px;
    padding-right: 8px;

    border: 1px solid white;
    border-radius: 4px 4px 4px 4px;

    font-size: 0.8rem;
    box-sizing: border-box;
}

#aboutMeTitle {
    font-family: "Pixel Operator", serif;
    font-weight: bold;
    font-size: 4em;
    color: white;

    /* keep text above base bg */
    z-index: 2;

    text-shadow: var(--neon-purple) 8px 0 2px;
    animation: titleFlicker 4s steps(1) infinite;
}

#aboutMeBody {
    font-size: 1.3em;

    padding-top: 8px;
    padding-left: 2px;
    padding-right: 2px;

    flex: 1 1 auto;
    overflow: scroll;
    overflow-y: auto;
    scrollbar-width: none;
}

/* effects */

/* crt scanline animation */
@keyframes scanlines {
    0% {
        background-position: 0 0;
    }

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

#content::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(0deg,
    rgba(0, 0, 0, 0.15),
    rgba(0, 0, 0, 0.15) 1px,
    transparent 1px,
    transparent 2px);
    pointer-events: none;
    z-index: 10;
    animation: scanlines 0.6s steps(4) infinite;
}

/* for left-right flicker to the title text */
@keyframes titleFlicker {

    0%,
    100% {
        text-shadow: var(--neon-purple) 8px 0 2px;
    }

    2% {
        text-shadow: var(--neon-purple) 16px 0 2px;
    }

    3% {
        text-shadow: var(--neon-purple) 24px 0 2px;
    }

    4% {
        text-shadow: var(--neon-purple) 30px 0 2px;
    }

    5% {
        text-shadow: var(--neon-purple) 26px 0 2px;
    }

    6% {
        text-shadow: var(--neon-purple) 22px 0 2px;
    }

    7% {
        text-shadow: var(--neon-purple) 40px 0 2px;
    }

    8% {
        text-shadow: var(--neon-purple) 18px 0 2px;
    }

    9% {
        text-shadow: var(--neon-purple) 12px 0 2px;
    }

    10% {
        text-shadow: var(--neon-purple) 8px 0 2px;
    }

    80% {
        text-shadow: var(--neon-purple) 8px 0 2px;
    }
}

/* flicker for the header text */
@keyframes flickerText {

    0%,
    18%,
    22%,
    25%,
    53%,
    57%,
    100% {
        text-shadow: var(--neon-purple) 2px 0 2px;
    }

    20%,
    24%,
    55% {
        text-shadow: var(--neon-purple) 0 0 8px, var(--neon-pink) 0 0 12px;
    }
}