* {
	font-family: monospace;
	image-rendering: unset;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	color: white;
	background-image: url(/media/background.png)
}

strong {
	text-decoration: underline;
}

button {
	border: 2px solid white;
	border-radius: 32px;
	transition-property: transform, box-shadow;
	transition-duration: 0.1s;
	padding: 4px 10px;
	font-weight: 100;
	font-size: 16px;
	color: white;

	background-color: transparent;
	backdrop-filter: blur(2px);

	&.tag {
		border-radius: 48px;
		padding: 12px 15px;
	}

	&.toggled {
		background-color: white;
		color: black;
	}

	&:hover {
		box-shadow: 4px 4px 0px 0px white;
		transform: translateX(-4px) translateY(-4px);
		cursor: pointer;
	}

	&:active {
		box-shadow: 2px 2px 0px 0px white;
		transform: translateX(-2px) translateY(-2px);
	}
}

.column {
	display: block;
	max-width: 1200px;
	margin: 0 auto;
	width: 100%;
}

.pixelated {
	image-rendering: pixelated;
}

.shadow {
	box-shadow: 0 0 8px black;
	backdrop-filter: blur(2px);
}

#header {
	margin: 10px auto;
	width: fit-content;
	text-align: center;
	padding: 40px;
	border-radius: 40px;

	&>img {
		width: 100%;
		max-width: 250px;
		border-radius: 50%;
		box-shadow: 0 0 6px black;
	}

	&>h1 {
		font-size: 2.5rem;
	}

	&>h2 {
		font-size: 1.5rem;
	}

	&>p {
		font-size: 1.45rem;
	}

	&>hr{
		max-width: 200px;
	}
}

#links {
	display: flex;
	justify-content: center;
	gap: 10px;
}
#tag_buttons {
	border-radius: 40px;
	padding: 1px;
}

#footer {
	height: 200px;
}

.button_container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
	margin: 20px 0;
}

.thumbnail_contianer {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: center;
	margin: 20px 0;

	box-shadow: 0 0 16px black;

	&>* {
		flex: 1 0 50%;

		&.major {
			flex-basis: 100%;
		}
	}
}

.thumbnail {
	display: block;
	min-width: 400px;
	min-height: 400px;

	background-size: cover;
	background-position: center;
	background-image: url("/media/thumbnails/default.png");

	&>.info {
		display: flex;
		height: 15px;
		color: white;
		backdrop-filter: blur(10px) brightness(0.4);
		justify-content: space-between;
		padding: 2px 10px;
	}

	&>.flex {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: calc(100% - 19px);

		visibility: hidden;

		&>div {
			display: block;
			width: fit-content;
			height: fit-content;
			min-width: 40%;
			max-width: 70%;
			max-height: 70%;
			padding: 15px;

			text-align: center;
			color: white;
			backdrop-filter: blur(10px) brightness(0.6);

			& ul {
				padding-left: 8px;
				list-style-position: inside;
				text-align: left;
			}
		}
	}

	&:hover .flex {
		visibility: visible;
	}
}