@font-face {
  font-family: Magazine Letter;
  src: url(https://files.catbox.moe/8e98gl.ttf);
}

@font-face {
  font-family: Badly Stamped;
  src: url(https://files.catbox.moe/ub4ghz.ttf);
}

@font-face {
  font-family: Gameplay;
  src: url(https://files.catbox.moe/k2r0bb.ttf);
}

body {
	background-image: url(https://files.catbox.moe/qcyc2i.jpg);
	background-size: contain;
	font-family: Lucida Sans Typewriter, Courier New, monospaced;
	font-size: 13px;
	margin: 0px;
}

a {
	transition-duration: 0.2s;
}
a:hover {
	letter-spacing: 2px;
	font-weight: bold;
}

.header {
	height: 125px;
	margin-bottom: 15px;
	font-family: Magazine Letter, helvetica;
	font-size: 50px;
}

.multicolor-text {
	background: linear-gradient(to left, red, orange, green);
	background-clip: text;
	color: transparent;
	position: relative;
}

.main {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.left {
	flex: 20%;
	margin: 20px;
	max-width: 250px;
	margin-bottom: -10px;
}

.menu-box {
	padding: 10px;
	border-style: solid;
	position: relative;
	border-width: 4px;
	margin-bottom: 30px;
	background-color: white;
	border-color: #68a8d8;
}
.menu-box-title {
	position: absolute;
	font-family: Badly Stamped, Lucida Sans Typewriter, Courier New, monospaced;
	font-size: 18px;
	left: 5px;
	top: 5px;
	color: #68a8d8;
}

.center {
	width: 750px;
	margin: 20px;
	text-align: center;
}

.art-frame {
	background-color: white;
	border-style: solid;
	border-color: #68a8d8;
	padding: 15px;
	border-width: 4px;
}

.art-grid {
	display: grid;
	gap: 5px;
	grid-template-columns: repeat(5, 140px [col-start]);
	grid-template-rows: repeat(3, 140px [row-start]);
	justify-content: center;
	
}

.artwork {
	transition-duration: 0.2s;
	position: relative;
}

.art-icon {
	position: absolute;
	top: 3px;
	left: 3px;
}

.artwork span.date {
	opacity: 100%;
	
} 
.artwork .art-icon {
	opacity: 100%;
	
} 

.artwork:hover {
	transform: scale(1.35);
	z-index: 2;
}

.artwork:hover span.date {
	opacity: 0%;
	transition: 0.25s ease;
} 

.artwork:hover .art-icon {
	opacity: 0%;
	transition: 0.25s ease;
} 

span.date {
	position:absolute;
	right: 2px;
	bottom: 2px;
	color: white;
	border-radius: 5px;
	padding: 2px;
	font-weight: bold;
	font-size: 12px;
	font-family: Gameplay;
}
span.date {
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: black;
}
.art {
	width: 140px;
	height: 140px;
	border-radius: 5px;
}

.footer {
	text-align: center;
	margin-bottom: 20px;
	font-size: 15px;
}

.small-on-mobile {
	width: 600px;
	margin-top:10px;
}


@media screen and (max-width: 800px) {
	.disappear-mobile {
		display: none;
	}
	
	.header {
		text-align: center;
	}
	
	.center {
		width: 90%;
	}
	
	.art-grid {
		gap: 5px;
		grid-template-columns: repeat(3, 100px [col-start]);
		grid-template-rows: repeat(5, 100px [row-start]);
	}
	
	.art {
		width: 100px;
		height: 100px;
		border-radius: 5px;
	}
	
	.multicolor-text {
		position: static;
		font-size: 42px;
		width: 80%;
		margin-top: 10px;
	}
	
	.small-on-mobile {
		display: none;
	}
	
	span.date {
		font-size: 10px;
	}
	
	body {
		width: 100%;
	}
]