@font-face {
	font-family: CyberpunkWaifus;
	src: url(CyberpunkWaifus.ttf);
}

@font-face {
	font-family: RecipeBook;
	src: url(RecipeBook.ttf);
}

@font-face {
	font-family: "Micro Sans";
	src: url(microsans.ttf);
}

body {
	background: #000;
	color: #fff;
	font-family: CyberpunkWaifus;
	font-size: 20px;
}

a,
a:visited {
	color: #fff;
	text-decoration: none;
}

.main {
	width: 480px;
	margin: 0 auto;
	margin-top: 18px;
	margin-bottom: 18px;
	border: 5px solid #fff;
	border-radius: 5px;
}

.container {
	display: flex;
	justify-content: center;
}

.top-content {
	display: block;
	margin: 0 4px;
}

.scraper-ad {
	margin-top: 24px;
	margin-right: 18px;
	margin-left: 0px;
	min-height: 100%;
	// display: flex;
	// align-items: center;
	// justify-content: center;
}

.banner-ad {
	margin: 0 18px;
}

// .left-scraper {
// 	margin-left: 18px;
// 	margin-right: 0px;
// }

.scraper-ad img,
.banner-ad img {
	max-width: 100%;
}

.scraper-ad span,
.banner-ad span {
	font-size: 14px;
	opacity: 0.5;
}

#top-banner {
	width: 95%;
	display: block;
	margin: 0 auto;
	margin-top: 18px;
}

.intro {
	margin-top: 18px;
	margin-bottom: 18px;
	width: 100%;
}

.intro-content {
	width: 74%;
	margin: 0 auto;
	display: flex;
	text-align: left;
	align-items: center;
}

.intro img {
	height: 90px;
	float: left;
	border: 2px solid #fff;
	image-rendering: -moz-crisp-edges;
	image-rendering: -webkit-crisp-edges;
	image-rendering: pixelated;
	image-rendering: crisp-edges;
}

.intro p {
	margin: 0;
	margin-left: 18px;
}

.links {
	width: 100%;
	text-align: left;
	margin-bottom: 36px;
}

.links p {
	margin: 0;
}

.button-row {
	display: flex;
	justify-content: center;
	gap: 16px;
}

.button-container {
	width: 150px;
	text-align: center;
	border: 1px solid #fff;
	border-radius: 4px;
}

.button-container:active {
	transform: translateY(4px)
}

.disabled:active {
	transform: none;
}

.button-border {
	border: 1px solid #fff;
	border-radius: 4px;
	margin: 3px 6px;
}

.button-centre {
	background: #fff;
	color: #000;
	margin: 3px;
}

.button-centre p {
	padding: 12px 10px;
	font-size: 22px;
	margin: 0;
}

.disabled .button-border,
.disabled {
	border-color: rgba(255, 255, 255, 0.5);
}

.disabled .button-centre {
	background: rgba(255, 255, 255, 0.5);
}

.disabled,
.disabled .button-container,
.disabled .button-border,
.disabled .button-centre,
.disabled .button-centre p,
.disabled links {
	cursor: not-allowed;
}

.button-container,
.button-border,
.button-centre,
.button-centre p,
.links,
.banner-ad,
.banner-ad span {
	user-select: none;
	-webkit-user-select: none;
}

.button-container,
.button-border,
.button-centre,
.button-centre p {
	cursor: pointer;
}

.smallbuttons {
	display: flex;
	justify-content: center;
	gap: 4px;
	margin-bottom: 18px;
	width: 100%;
}

.smallbuttons img {
	image-rendering: -moz-crisp-edges;
	image-rendering: -webkit-crisp-edges;
	image-rendering: pixelated;
	image-rendering: crisp-edges;
	max-width: 88px;
	max-height: 31px;
}

h1 {
	font-weight: normal;
	text-align: center;
	font-family: RecipeBook;
	margin: 0;
}

.tiles-container {
	display: flex;
	gap: 3px;
	margin-top: 3px;
}

.app-tile {
	background: #fff;
	color: #000;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 90px;
	width: 50%;
	font-size: 32px;
	image-rendering: -moz-crisp-edges;
	image-rendering: -webkit-crisp-edges;
	image-rendering: pixelated;
	image-rendering: crisp-edges;
}

.app-tile p {
	padding: 8px;
	font-family: RecipeBook;
}

#about {
	min-width: 170px;
	max-width: 170px;
	background: #3171af;
	color: #FFFEFF;
}

#links {
	width: 100%;
	background: #CC313F;
	color: #E9CDC8;
}

#guestbook {
	background: #E8A92D;
	color: #FFFEFF;
	min-width: 62%;
}

#more {
	background: url(/img/addapp.png);
	background-size: cover;
	background-position: center;
	width: 100%;
}

#more p {
	opacity: 0;
}

.error {
	margin-top: 36px;
	margin-bottom: 36px;
}

.error p {
	margin-top: 8px;
}

.extra-links {
	font-size: 16px;
	margin-left: 18px;
	margin-right: 18px;
	text-align: center;
}