/* Fonts */

@font-face {
	font-family: "Montserrat-medium";
	src: url("fonts/montserrat/Montserrat-Medium.ttf") format("truetype");
}

@font-face {
	font-family: "Montserrat-regular";
	src: url("fonts/montserrat/Montserrat-Regular.ttf") format("truetype");
}

/* Header */

header {
	display: flex;
	justify-content: center;
	font-family: "Montserrat-medium", system-ui, sans-serif;
	color: white;
}

.header-content {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	padding: 1rem;
	display: flex;
	align-items: center;
}

.nav-menu {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 0;
	margin: 0;
	list-style: none;
}

nav a {
	color: white;
	text-decoration: none;
}

nav a:hover {
	text-decoration: underline;
}

.logo {
	animation: flicker 5s infinite;
}

.logo-container {
	position: relative;
	display: infinite-block;
	overflow: hidden;
	margin-left: auto;
	filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.8));
}

.logo-container img {
	display: block;
}

.logo-container::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	pointer-events: none;
	
	background: repeating-linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.2) 0px,
		rgba(0, 0, 0, 0.2) 2px,
		transparent 2px,
		transparent 6px
	);
	
	animation: scanlines 0.4s linear infinite;
}

@keyframes flicker {
    /* Normal */
    0%   { opacity: 1; }
    1%   { opacity: 0.85; }
    2%   { opacity: 1; }
    3%   { opacity: 0.8; }
    4%   { opacity: 1; }
    5%   { opacity: 0.9; }
    6%   { opacity: 1; }
    7%   { opacity: 0.82; }
    8%   { opacity: 1; }
    9%   { opacity: 0.88; }
    10%  { opacity: 1; }
    11%  { opacity: 0.8; }
    12%  { opacity: 1; }
    13%  { opacity: 0.9; }
    14%  { opacity: 1; }
    15%  { opacity: 0.82; }
    16%  { opacity: 1; }
    17%  { opacity: 0.87; }
    18%  { opacity: 1; }
    19%  { opacity: 0.83; }
    20%  { opacity: 0.1; }

    /* Rapid flickering resumes */
    23%  { opacity: 0.6; }
    24%  { opacity: 0.8; }
    25%  { opacity: 1; }
	26%  { opacity: 0.85; }
    27%  { opacity: 1; }
    28%  { opacity: 0.82; }
    29%  { opacity: 1; }
    30%  { opacity: 0.9; }
    31%  { opacity: 1; }
    32%  { opacity: 0.8; }
    33%  { opacity: 1; }
    34%  { opacity: 0.88; }
    35%  { opacity: 1; }
    36%  { opacity: 0.82; }
    37%  { opacity: 1; }
    38%  { opacity: 0.9; }
    39%  { opacity: 1; }
    40%  { opacity: 0.85; }
    41%  { opacity: 1; }
	50%  { opacity: 1; }
    51%  { opacity: 0.8; }
    52%  { opacity: 1; }
    55%  { opacity: 0.85; }
    56%  { opacity: 0.6; }
    57%  { opacity: 1; }  
    58%  { opacity: 0.85; }
    59%  { opacity: 1; }
    60%  { opacity: 0.8; }
    61%  { opacity: 1; }
    62%  { opacity: 0.9; }
    63%  { opacity: 1; }
    64%  { opacity: 0.82; }
    65%  { opacity: 1; }
    66%  { opacity: 0.88; }
    67%  { opacity: 1; }

    /* Mostly stable */
    75%  { opacity: 1; }
    76%  { opacity: 0.85; }
    77%  { opacity: 1; }
    78%  { opacity: 0.9; }
    79%  { opacity: 1; }
	90%  { opacity: 1; }
    91%  { opacity: 0.8; }
    92%  { opacity: 0.85; }
    95%  { opacity: 1; }
	
    /* Final dropout */
    96%  { opacity: 0.5; }
    97%  { opacity: 1; }
	
    100% { opacity: 1; }
}

@keyframes scanlines {
	from {
		background-position: 0 0;
	}
	
	to {
		background-position: 0 6px;
	}
}

/* Body */

body {
	background-color: rgba(33,33,33,1);
}

.body-content {
	max-width: 1000px;
	margin: 0 auto;
	font-family: "Montserrat-regular", system-ui, sans-serif;
}

.column {
	float: left;
}

.left {
	width: 70%;
}

.right {
	width: 30%;
}

.row:after {
	content: "";
	display: table;
	clear: both:
}

.border-section {
	border: 2px solid rgba(124, 255, 107,1);
	padding: 1rem;
	margin: 0.5rem 0.25rem;
	color: white;
	border-radius: 6px;
	filter: drop-shadow(0 0 2px rgba(57, 255, 20, 0.5));
}