body {
  background: url(background.avif) no-repeat center center fixed;
  background-size: cover;
}
		  
#wrapper {
  display: flex;
  container-type: inline-size;
}

@media screen and (min-width: 501px) {
  body {
    overflow: hidden;
    height: 100vh;
  }
  
  #wrapper {
    height: 100vh;
    align-items: center;
    justify-content: center;
    padding: 0.75em;
  }
}

#loader {
  height: 1px;
}

a {
	font-family: 'Lombardic', Arial; 
	font-size: 1.6cqw;
	font-weight: 700;
	color: #000;
	text-shadow: 2px 2px 9px #DDD6C3;
	text-decoration: none;
	line-height: 1.2;
	white-space: nowrap;
}

@media screen and (max-width: 500px) {
	a {
		font-size: 2.52vw;
	}
}

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

a:hover {
	color: yellow;
	animation: animation .65s ease-in-out infinite alternate;
}

@keyframes animation {
	0% {text-shadow: 
	   0px 0px 4px #000,
	  8px -8px 22px #fe7634,
	 -8px 8px 22px #e93b0d,
	  8px 8px 22px #fe5908, 	 
	 -8px -8px 22px #d12c01;
	}
	100% {text-shadow: 
	   0px 0px 4px #000,
	  15px -8px 22px #f77401,	  
	 -15px 8px 22px #fe7634,
	  15px 8px 22px #fe5908,
	 -15px -8px 22px #e93b0d;
	}
}


a.main {
	font-family: Arial; 
	font-size: 2cqw;	
	font-weight: 700;	
	color: #c6e4fe;
	text-shadow: 2px 2px 9px #000;	
	-webkit-text-stroke-width: .3px;
	-webkit-text-stroke-color: black;
	text-decoration: none;
	line-height: 1.6;
}

@media screen and (max-width: 500px) {
	a.main {
		font-size: 3.08vw;
	}
}

a.main:visited {
	color: #c6e4fe;
	text-decoration: none;
}

a.main:hover {
	color: yellow;
}


* {
	box-sizing: border-box;
	margin: 0;
}

img {
  width: 100%;  
  display: block;
}

@media screen and (min-width: 501px) {
	img {
		max-width: 1600px;
		width: 100%;  
		height: 100%;
		max-height: none;
		object-fit: fill;
	}
}

@media screen and (max-width: 500px) {
	img {
		max-width: 150%;
		display: block;
		width: 150%;
		max-height: none;
	}
}

@media (min-width: 501px) and (max-width: 801px) and (orientation: landscape) {
	img {
		width: 110% !important;
		max-width: 110% !important;
		height: auto !important;
		max-height: none !important;
		display: block !important;
		margin-top: -4.5% !important;
		margin-left: -1% !important;
	}
	
	.parent {
		position: relative !important;
		overflow: hidden !important;
		padding: 0 !important;
		margin: 0 auto !important;
		width: 100% !important;
		max-width: 100% !important;
		aspect-ratio: auto !important;
	}
	
	a {
		font-size: 2.057cqw !important;
		text-align: left !important;
		padding: 0 !important;
		margin: 0 !important;
	}
	
	a.main {
		font-size: 2.42cqw !important;
		text-align: left !important;
		padding: 0 !important;
		margin: 0 !important;
	}
	
	.parent .box {
		transform: translate(0, -5vh) !important;
		position: absolute !important;
		padding: 0 !important;
	}
	
	.parent .box.rulebooks,
	.parent .box.modules,
	.parent .box.periodicals,
	.parent .box.misc,
	.parent .box.rares,
	.parent .box.jg,
	.parent .box.ps,
	.parent .box.wiki {
		transform: translate(2vw, -5vh) !important;
	}
	
	#wrapper {
		padding: 0 !important;
		align-items: flex-start !important;
	}
	
	body {
		overflow: hidden !important;
	}
}


.parent {
	position: relative;
	container-type: inline-size;
	max-width: 1600px;
	width: 100%;
	margin: 0 auto;
	padding: 2em;
}

@media screen and (max-width: 500px) {
	.parent {
		position: absolute;
		top: 4em;
		left: 0;
		padding: 0;
		margin: 0;
		max-width: 100%;
		max-height: none;
		width: 100%;
	}
}


@media screen and (min-width: 501px) {
	.parent {
		aspect-ratio: 1824 / 1127;
		width: calc((100vh - 1.5em) * 1824 / 1127);
		max-width: min(1600px, calc(100vw - 1.5em));
		height: auto;
		margin: 0;
		padding: 0;
		overflow: hidden;
	}
}

.parent .box {
	position: absolute;
}

.parent .box.frontdesk {
	left: 10.564%;
	top: 31.831%;
}

@media screen and (max-width: 500px) {
	.parent {
		padding: 0;
		margin: 0;
		max-width: 100%;
		max-height: none;
		width: 100%;
	}
	
	.parent .box.frontdesk {
		left: 14.79%;
		top: 30.081%;
	}
}

.parent .box.whatsnew {
	left: 9.986%;
	top: 36.548%;
}

@media screen and (max-width: 500px) {
	.parent .box.whatsnew {
		left: 13.98%;
		top: 34.048%;
	}
}

.parent .box.forum {
	left: 12%;
	top: 40.914%;
}

@media screen and (max-width: 500px) {
	.parent .box.forum {
		left: 16.8%;
		top: 38.414%;
	}
}

.parent .box.library {
	left: 11.9%;
	top: 45.081%;
}

@media screen and (max-width: 500px) {
	.parent .box.library {
		left: 16.66%;
		top: 42.581%;
	}
}

.parent .box.search {
	left: 8.836%;
	top: 49.023%;
}

@media screen and (max-width: 500px) {
	.parent .box.search {
		left: 12.37%;
		top: 46.523%;
	}
} 

.parent .box.links {
	left: 8.5%;
	top: 57.468%;
}

@media screen and (max-width: 500px) {
	.parent .box.links {
		left: 11.9%;
		top: 54.968%;
	}
}

.parent .box.contact {
	left: 10.5%;
	top: 61.748%;
}

@media screen and (max-width: 500px) {
	.parent .box.contact {
		left: 14.7%;
		top: 59.248%;
	}
} 

@font-face {
    font-family: "Lombardic";
    src: url(./Lombardic.woff2) format("woff2");
}