@import url('https://fonts.googleapis.com/css2?family=Jersey+15&display=swap');

/* Variables */
:root {
	--bg-color: hsl(344 100 3);
	--txt-color: hsl(340 88 71);
    --font-size-normal: 2rem;
    --font-size-subheader: 2.5rem;
    --font-size-header: 3rem;
    --spacing: 1rem;
    --l-spacing: 1.5rem;
    --xxxl-spacing: 3rem;

    --simple-border: 2px solid var(--txt-color);
}

/* Default global settings */
*,
*::before,
*::after {
	box-sizing: border-box;
	border: none;
}

html {
	font-size: 10px;
	font-family: "Jersey 15", "Courier New", "monospace";
	color: var(--txt-color);
	height: 100%;
}

body {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	margin: 0;
    padding: var(--xxxl-spacing);
	background-color: var(--bg-color);
	font-size: var(--font-size-normal);
	gap: var(--spacing);
}

a {
    color: var(--txt-color);
}

/* Global Classes */
.center { 
	display: flex;
	justify-content: center;
	align-items: center;
}

.container-header {
	flex-grow: 0;
	display: flex;
	flex-direction: row;
	width: 100%;
	border-bottom: 2px solid;
    font-size: var(--font-size-header);
    font-weight: bold;

    .header-link {
	    padding: 1rem 2rem;
	    color: var(--txt-color);
	    text-decoration: none;
	    transition: all .2s;
    }

    .header-link:hover {
	    background-color: var(--txt-color);
	    color: var(--bg-color);
	    transition: background-color .5s color .5s;
    }

    .header-highlight {
    	background-color: var(--txt-color);
    	color: var(--bg-color);
    }
}

/* Side navigation stuff*/
.side-nav-container {
    overflow: auto;
    border: var(--simple-border);
    display: flex;
    justify-content: center;
    align-content: center;

    .post-list {
	    display: flex;
	    flex-direction: column;
        justify-content: center;
        align-content: center;
	    height: 100%;
	    width: 100%;
	    padding-left: 0px;
    }

    .post-link-container {
	    list-style: none;
	    width: 100%;
        display: flex;
        justify-content: center;
        align-content: center;

        a {
	        width: 100%;
	        height: 100%;
	        padding: 16px 0px;
	        font-size: var(--font-size-subheader);
	        text-align: center;
            text-decoration: none;
        }
    }
}

/* Layout Stuff */
.content-container {
    padding: var(--spacing);
    gap: var(--spacing);
    border: var(--simple-border);
    overflow: auto;
}

/* Image classes */
.picture-fit {
	object-fit: contain;
}

.profile-picture {
    height: 128px;
    width: 128px;
    border: var(--simple-border);
}

.button-picture {
    width: 88px;
    height: 31px;
}

/* Article classes */
.article-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing);
    padding: var(--spacing);
    border: var(--simple-border);
    overflow: auto;

    hgroup {
        width: 100%;
        padding: var(--spacing);
        gap: var(--spacing);

        h1 {
            width: 100%;
            font-size: var(--font-size-header);
            font-weight: bold;
        }

        p {
            width: 100%;
            font-size: var(--font-size-subheader);
        }
    }
}

/* CRT Effects */
.crt::before {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    z-index: 2;
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;
}

.crt::after {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(18, 16, 16, 0.1);
    opacity: 0;
    z-index: 2;
    pointer-events: none;
    animation: flicker 0.15s infinite;
}

@keyframes flicker {
  0% {
  opacity: 0.27861;
  }
  5% {
  opacity: 0.34769;
  }
  10% {
  opacity: 0.23604;
  }
  15% {
  opacity: 0.90626;
  }
  20% {
  opacity: 0.18128;
  }
  25% {
  opacity: 0.83891;
  }
  30% {
  opacity: 0.65583;
  }
  35% {
  opacity: 0.67807;
  }
  40% {
  opacity: 0.26559;
  }
  45% {
  opacity: 0.84693;
  }
  50% {
  opacity: 0.96019;
  }
  55% {
  opacity: 0.08594;
  }
  60% {
  opacity: 0.20313;
  }
  65% {
  opacity: 0.71988;
  }
  70% {
  opacity: 0.53455;
  }
  75% {
  opacity: 0.37288;
  }
  80% {
  opacity: 0.71428;
  }
  85% {
  opacity: 0.70419;
  }
  90% {
  opacity: 0.7003;
  }
  95% {
  opacity: 0.36108;
  }
  100% {
  opacity: 0.24387;
  }
}