html {
}

body {
	display: grid;
	font-weight: 500;
	font-style: normal;
	background-color: #100034;
	font-family: "Audiowide", Sans-Serif;
}

p {
	white-space: nowrap;
	margin: auto;
	margin-top: 2%;
	width: auto;
}

#homelink {
    height: auto;
	margin: auto;
	color: #333333;
	font-size: max(1.2vw,1em);
}

.large {
	color: #333;
	font-size: max(4vw,2em);
}

.small {
	font-size: max(2vw,1em);
}

.rise {
	text-shadow: -0.01em -0.01em 0.01em #fff;
	animation: rise 2s ease-in-out 0.5s forwards;
}

@keyframes rise {
	to {
		text-shadow: 0em 0.01em #fff, 0em 0.02em #fff, 0em 0.02em 0.03em #fff, -0.01em 0.01em #00c3ff, -0.02em 0.02em #00c3ff, -0.03em 0.03em #00c3ff, -0.04em 0.04em #00c3ff, -0.01em -0.01em 0.03em #00c3ff, -0.02em -0.02em 0.03em #00c3ff, -0.03em -0.03em 0.03em #000;
		transform: translateY(-0.025em) translateX(0.04em);
	}
}

.outline {
	background-clip: text;
	color: #ffff;
	animation: outline 1s ease-in-out 1.5s forwards;
}

@keyframes outline {
	from {
		text-shadow: 0em -7em 10em #100034;
	}
	to {
		text-shadow: 0 0.02em #00c3ff, 0.02em 0 #00c3ff, -0.02em 0 #00c3ff, 0 -0.02em #00c3ff;
	}
}

a {
	height: 300px;
	width: max-content;
	padding: 10px;
	margin-bottom: 50px;
}

img {
	image-rendering: -moz-crisp-edges;
	image-rendering: pixelated;
	border: 5px solid #555;
	background-color: #aaaaaa;
	object-fit: contain;
	max-height: max-content;
	max-width: max-content;
	height: inherit;
	margin-top:20px;
	padding:10px;
	transition: all .4s ease;
	-webkit-transition: all .4s ease;
}
img:hover{
	opacity: 0.7;
}
#output{
	display:grid;
	width: 80%;
	min-width: 400px;
	margin: auto;
	grid-template-columns: repeat(auto-fit, minmax(350px,1fr));
	margin-bottom: 50px;
	height: auto;
}
#output >a >#text{
	font-size: 25px;
  position:relative;
  transform: translate(0px, -90px);
	text-align: center;
	color: black;
}
@media (max-width: 890px) {
	#refresh{
	    display:grid;
    }
}