@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: #010016;
	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;
}
h2 {
	font-size: 1.7em;
	font-weight: bold;
	padding-bottom: 5px;
	color: white;
}

@keyframes rain {
	0% {
		background-position-y: 0, 0, 0;
	}
	100% {
		background-position-y: 1500px, 1500px, 1500px;
	}
}
.dark-purple {
	color: rgb(155, 14, 173);
	font-weight: bold;
}
.purple {
	color: pink;
	font-weight: bold;
}
.light-green {
	color: lightgreen;
	font-weight: bold;
}
.blue {
	color: #71ffec;
	font-weight: bold;
}
.yellow {
	color: #e6d70e;
	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;
}
.text {
	font-size: 1.3em;
}
.underlined {
	animation: underlined 1.2s ease-in-out infinite;
}
.flicker {
	animation: flicker 2.5s infinite;
	display: inline-block;
}
.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;
}
.subtitle {
	font-size: xx-large;
	color: #71ffec;
}
.body-content {
	width: 60vw;
	min-width: 1000px;
	max-width: 1000px;
	margin: 30px auto;
	justify-content: center;
}

.main-columns {
	display: flex;
	width: 100%;
	justify-content: space-between;
	align-items: flex-start;
}

.content-left {
	flex: 0 0 68%;
	max-width: 68%;
}
.content-right {
	flex: 0 0 28%;
	max-width: 28%;
}
.content-left > div,
.content-right > div {
	background-color: black;
	outline: 2px solid gray;
	padding: 10px;
	margin-bottom: 20px;
}
.about {
	margin: 0 auto;
	max-width: 800px;
}
.about-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.catmail {
	vertical-align: middle;
	height: 3em;
}
.about-title {
	font-size: 3em;
}
.about-content {
	display: flex;
	flex-direction: row;
	gap: 10px;
}
.about-text {
	font-size: 1.3em;
	flex-wrap: wrap;
	margin-top: auto;
	margin-bottom: auto;
	padding-bottom: 5px;
}
.about-image {
	flex: 0 0 30%;
	max-width: 20%;
	outline: 2px solid gray;
	object-fit: cover;
	flex-shrink: 0;
	margin-top: 10px;
	margin-bottom: 10px;
}
.about-list {
	font-size: 1.2em;
	margin-bottom: 10px;
}

.mdud-image {
	width: 100%;
	height: auto;
	object-fit: contain;
	display: block;
	background-color: black;
	outline: 2px solid gray;
}

.links-list {
	font-size: x-large;
}
.webLinks {
	columns: 2;
	grid-template-columns: repeat(2, 1fr);
	display: grid;
	gap: 20px;
	justify-items: center;
	align-items: center;
}
.webButtons {
	width: 100px;
	height: auto;
}
.no-bullets {
	list-style-type: none;
	padding-left: 0;
	margin-left: 0;
}
.lastfm {
	max-height: 200px;
	overflow-y: auto;
	padding-right: 8px;
}
.track {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 12px;
	margin: 5px 0;
}

.track img {
	width: 80px;
	height: 80px;
	object-fit: cover;
	flex-shrink: 0;
	display: block;
	margin: 0;
}

/* Responsive: Stack columns on mobile
@media (max-width: 1000px) {
	.main-columns {
		flex-direction: column;
	}
	.content-left,
	.content-right {
		max-width: 80%;
		flex: 1 1 100%;
	}
} */

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

@keyframes flicker {
	0% {
		opacity: 1;
		color: white;
		text-shadow: 0 0 5px #fff, 0 0 32px #fff, 0 0 48px #fff;
	}
	5% {
		opacity: 0.3;
		color: #888;
		text-shadow: none;
	}
	6% {
		opacity: 1;
		color: white;
		text-shadow: 0 0 5px #fff, 0 0 32px #fff, 0 0 48px #fff;
	}
	40% {
		opacity: 1;
		color: white;
		text-shadow: 0 0 5px #fff, 0 0 32px #fff, 0 0 48px #fff;
	}
	42% {
		opacity: 0.5;
		color: #bbb;
		text-shadow: 0 0 2px #fff;
	}
	60% {
		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: #bbb;
		text-shadow: 0 0 2px #fff;
	}
}