@import url("https://fonts.googleapis.com/css2?family=Tektur:wght@400..900&family=VT323&display=swap");
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: "VT323", monospace;
	background: #01020c;
	background-image: url('data:image/svg+xml;utf8,<svg width="1400" height="1000" xmlns="http://www.w3.org/2000/svg"><g stroke="white" stroke-width="3" stroke-linecap="round" opacity="0.18"><line x1="1000" y1="40" x2="1000" y2="100"/><line x1="900" y1="900" x2="900" y2="1000"/><line x1="550" y1="700" x2="550" y2="870"/></g></svg>'),
		url('data:image/svg+xml;utf8,<svg width="1300" height="1000" xmlns="http://www.w3.org/2000/svg"><g stroke="white" stroke-width="3" stroke-linecap="round" opacity="0.20"><line x1="150" y1="450" x2="150" y2="600"/><line x1="500" y1="500" x2="500" y2="600"/><line x1="700" y1="500" x2="700" y2="550"/><line x1="850" y1="240" x2="850" y2="370"/></g></svg>'),
		url('data:image/svg+xml;utf8,<svg width="1300" height="1000" xmlns="http://www.w3.org/2000/svg"><g stroke="white" stroke-width="3" stroke-linecap="round" opacity="0.10"><line x1="300" y1="0" x2="300" y2="80"/><line x1="50" y1="800" x2="50" y2="900"/><line x1="1250" y1="90" x2="1250" y2="300"/></g></svg>');
	background-size: 1400px 1500px;
	background-position-y: 0, 0, 0;
	animation: rain 0.8s linear infinite;
	min-height: 100vh;
	overflow-x: auto;
	gap: 0;
	color: lightgray;
}

a {
	text-decoration: none;
	color: pink;
}
ul {
	padding-left: 2em;
	margin-left: 0;
}

@keyframes rain {
	0% {
		background-position-y: 0, 0, 0;
	}
	100% {
		background-position-y: 1500px, 1500px, 1500px;
	}
}
.purple {
	color: pink;
	font-weight: bold;
}
.blue {
	color: #71ffec;
	font-weight: bold;
}
.gold {
	color: #ffb700;
	font-weight: bold;
}
.large {
	font-size: 3em;
	font-weight: bold;
}
.bg-gray {
	background-color: #100f16;
	padding: 5px;
	outline: 2px solid gray;
	border-radius: 5px;
}
.bg-white {
	background-color: rgb(66, 66, 66);
	padding: 2px;
	margin-top: 5px;
	margin-bottom: 5px;
	outline: 2px solid gray;
}
.underlined {
	animation: underlined 1.2s ease-in-out infinite;
}
.center {
	justify-content: center;
	padding-top: 5px;
	margin-left: auto;
	margin-right: auto;
}

.header {
	background-color: #100f16;
	margin: 30px auto;
	outline: 4px solid gray;
	text-align: center;
	width: 100%;
}
.title {
	font-size: 3em;
	margin: 20px 0px 0px 0px;
	text-shadow: 0 0 2px #fff, 0 0 40px #fff, 0 0 60px #fff;
	color: white;
	animation: flicker 1s infinite;
	display: inline-block;
}
.subtitle {
	font-size: xx-large;
	color: #71ffec;
}
.body-content {
	width: 60vw;
	min-width: 1000px;
	max-width: 1000px;
	margin: 30px auto;
	justify-content: center;
}

@keyframes underlined {
	0% {
		opacity: 0;
	}
	49% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}

@keyframes flicker {
	0% {
		opacity: 0.5;
		color: rgb(248, 248, 248);
		text-shadow: 0 0 5px #fff, 0 0 32px #fff, 0 0 48px #fff;
	}
	1% {
		opacity: 1;
		color: white;
		text-shadow: 0 0 5px #fff, 0 0 32px #fff, 0 0 48px #fff;
	}
	9% {
		opacity: 1;
		color: white;
		text-shadow: 0 0 5px #fff, 0 0 32px #fff, 0 0 48px #fff;
	}
	10% {
		opacity: 0.5;
		color: rgb(248, 248, 248);
		text-shadow: 0 0 5px #fff, 0 0 32px #fff, 0 0 48px #fff;
	}
	11% {
		opacity: 1;
		color: white;
		text-shadow: 0 0 5px #fff, 0 0 32px #fff, 0 0 48px #fff;
	}
	39% {
		opacity: 1;
		color: white;
		text-shadow: 0 0 5px #fff, 0 0 32px #fff, 0 0 48px #fff;
	}
	40% {
		opacity: 0.5;
		color: rgb(248, 248, 248);
		text-shadow: 0 0 5px #fff, 0 0 32px #fff, 0 0 48px #fff;
	}
	41% {
		opacity: 1;
		color: white;
		text-shadow: 0 0 5px #fff, 0 0 32px #fff, 0 0 48px #fff;
	}
	69% {
		opacity: 1;
		color: white;
		text-shadow: 0 0 5px #fff, 0 0 32px #fff, 0 0 48px #fff;
	}
	70% {
		opacity: 0.5;
		color: rgb(248, 248, 248);
		text-shadow: 0 0 5px #fff, 0 0 32px #fff, 0 0 48px #fff;
	}
	71% {
		opacity: 1;
		color: white;
		text-shadow: 0 0 5px #fff, 0 0 32px #fff, 0 0 48px #fff;
	}
	98% {
		opacity: 1;
		color: white;
		text-shadow: 0 0 5px #fff, 0 0 32px #fff, 0 0 48px #fff;
	}
	99% {
		opacity: 0.5;
		color: rgb(248, 248, 248);
		text-shadow: 0 0 5px #fff, 0 0 32px #fff, 0 0 48px #fff;
	}
	100% {
		opacity: 1;
		color: white;
		text-shadow: 0 0 5px #fff, 0 0 32px #fff, 0 0 48px #fff;
	}
}
.hlink {
	color: #fff;
}

/* ACTUAL PICTURES CSS */
.pretext {
	font-size: 1.5em;
	margin: 0 auto 20px auto;
	text-align: center;
}
.picturesList {
	columns: 3;
	grid-template-columns: repeat(3, 1fr);
	display: grid;
	gap: 20px;
}
.indPicture {
	display: flex;
	flex-direction: column;
	background-color: rgb(37, 39, 43);
	margin-bottom: 16px;
	overflow: hidden;
	padding: 2px;
	color: white;
	break-inside: avoid;
	outline: 2px solid slategray;
	border-bottom: 10px solid slategray;
}
.picture {
	width: 100%;
	height: auto;
	aspect-ratio: 1/1;
	object-fit: cover;
	display: block;
}
.caption {
	margin: 5px 3px 5px 3px;
}