@import url('https://fonts.googleapis.com/css2?family=Ubuntu+Condensed&family=Ubuntu+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

/*
#	"Zaglądanie w źródło strony to jak zagkądanie kobiecie pod spódnicę"
#	-- Nieznany autor, rok tym bardziej.
*/

:root {
	--hex1_dd: #000000;
	--hex1_d: #07080c;
	--hex1: #262a40;
	--hex1_l: #3c4366;
	--hex1_ll: #535c8c;
	
	--hex2_dd: #616472;
	--hex2_d: #777a8c;
	--hex2: #a3a7bf;
	--hex2_l: #c3c8e5;
	--hex2_ll: #d9deff;
	
	--hex3_dd: #474c59;
	--hex3_d: #5c6173;
	--hex3: #858da6;
	--hex3_l: #a3adcc;
	--hex3_ll: #c2cdf2;
	
	--hex4_dd: #171c26;
	--hex4_d: #262f40;
	--hex4: #465573;
	--hex4_l: #5d7199;
	--hex4_ll: #748dbf;
	
	--hex5_dd: #2a303f;
	--hex5_d: #3b4459;
	--hex5: #5d6c8c;
	--hex5_l: #7689b2;
	--hex5_ll: #8fa7d8;
	
	--min-width: 250px;
	--max-width: 1280px;
}

html {
	scroll-behavior: smooth;
	font-size: 14px;
}

html.lf {
	font-size: 18px;
}

html.nf {
	font-size: 14px;
}

::-webkit-scrollbar {
  width: 3px;
	box-sizing: border-box;
}

::-webkit-scrollbar-track {
  background: var(--hex4);
	/*border-radius: 8px;*/
}

::-webkit-scrollbar-thumb {
  background: var(--hex2);
	border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--hex3);
}

::-webkit-scrollbar-corner {
	background: var(--hex4);
}

@keyframes geartablein {
	0% {
		transform: rotateX(-90deg);
		filter: drop-shadow(0px 0px 0px black) opacity(0%);
	}
	100% {
		transform: rotateX(0deg);
		filter: drop-shadow(0px 0px 3px black) opacity(100%);
	}
}

body {
	font-family: 'Ubuntu Condensed', sans-serif;
	color: var(--hex2);
	background-color: var(--hex4);
	background-image: linear-gradient(to right, var(--hex4), var(--hex5), var(--hex4));
	background-size: cover;
	/*height: 100dvh;
	height: 100vh;*/
	height: 100%;
	padding: 0px;
	margin: 0px;
}

#viewport {
	max-width: var(--max-width);
	background: var(--hex1);
	padding: 0px;
	margin: 0px auto;
	border-left: 3px solid var(--hex3);
	border-right: 3px solid var(--hex3);
	border-bottom: 3px solid var(--hex3);
	box-shadow: 0px 0px 100px black;
	border-radius: 0 0 20px 20px;
}

#content {
	max-width: var(--max-width);
	margin: 0px auto;
	padding: 10px;
}

svg {
	width: 1.5rem;
	height: 1.5rem;
}

h1 {
	font-family: 'Ubuntu', sans-serif;
	font-size: 2.25rem;
	font-weight: bolder;
	cursor: default;
	margin: 0px 0px 1.5rem 0px;
	background: radial-gradient(var(--hex2), var(--hex3), var(--hex3));
	color: var(--hex1);
	padding: 10px;
	text-align: center;
	letter-spacing: -2px;
	box-sizing: border-box;
	text-overflow: ellipsis;
	overflow: hidden;
}

h2 {
	font-family: 'Ubuntu', sans-serif;
	font-size: 2rem;
	font-weight: bold;
	cursor: default;
	margin: 1rem 0px 1rem 0px;
	/*background: linear-gradient(to bottom, var(--hex3), var(--hex2), var(--hex3));*/
	color: var(--hex2);
	border-bottom: 2px solid var(--hex2);
	padding: 10px;
	text-align: center;
	letter-spacing: -2px;
	text-overflow: ellipsis;
	overflow: hidden;
}

h2:has(svg) {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
}

h2 svg {
	width: 2rem;
	height: 2rem;
}

a.link {
	text-decoration: underline;
	color: var(--hex2);
	transition: .3s;
}

a.noUnderline {
	text-decoration: none;
}

a.link:hover {
	filter: brightness(150%);
	text-shadow: 0px 0px 3px white;
	transform: translatex(10px);
}

p {
	font-family: 'Ubuntu Condensed', sans-serif;
	font-size: 1.5rem;
	cursor: default;
}

ul, ol {
	font-size: 1.5rem;
}

code {
	font-family: 'Ubuntu Mono', sans-serif;
}

.nowrap {
	white-space: nowrap;
}

.left {
	text-align: left;
	text-indent: 1.5rem;
}

.center {
	text-align: center;
}

.right {
	text-align: right;
}

.justified {
	text-align: justify;
	text-indent: 1.5rem;
	/*text-justify: inter-word;*/
}

.smaller {
	font-size: .5rem;
}

.small {
	font-size: .75rem;
}

.normal {
	font-size: 1rem;
}

.large {
	font-size: 1.5rem;
}

.larger {
	font-size: 2rem;
}

.huge {
	font-size: 2.5rem;
}

.giant {
	font-size: 3rem;
}

.bold {
	font-weight: bold;
}

.italic {
	font-style: italic;
}

.underline {
	text-decoration: underline;
}

.fontU {
	font-family: 'Ubuntu', sans-serif;
}

.fontUC {
	font-family: 'Ubuntu Condensed', sans-serif;
}

.fontUM {
	font-family: 'Ubuntu Mono', sans-serif;
}

.flex_break {
	flex-basis: 100%;
}

header {
	width: 100%;
	height: 300px;
	background: url("img/topphoto1910.jpg") left no-repeat;
	background-position: 50% -60px;
	border-bottom: 3px solid var(--hex3);
}

@media only screen and (max-width: 600px) {
	#content img.floatLeft {
		width: 100%;
		height: auto;
		margin: 10px 0;
		transition: all 0.3s;
	}
}

div#shovel {
	text-align: center;
	background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0.2) 30%,rgba(0,0,0,0.2) 50%,rgba(0,0,0,0.2) 70%,rgba(0,0,0,0) 100%);
	font-size: 2.25rem;
	padding: 40px;
	font-family: 'Ubuntu', sans-serif;
}

img#shovel {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

nav {
	margin: 0px auto;
	padding: 0;
	cursor: default;
	text-shadow: 0 0 5px black;
	position: fixed;
	top: 0;
	z-index: 100;
	box-shadow: 0px 0px 20px black;
  max-width: var(--max-width);
	width: calc(100% - 6px);
	min-height: 64px;
	max-height: 64px;
	overflow-x: hidden;
	overflow-y: hidden;
	background: transparent;
	backdrop-filter: blur(10px) brightness(40%);
	-webkit-backdrop-filter: blur(10px) brightness(40%);
	transition: background .3s, max-height .3s ease-out;
}

:is(body.lq) nav {
	background: var(--hex4_dd);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	transition: background .3s, max-height .3s ease-out;;
}

nav::-webkit-scrollbar {
  width: 0px;
	box-sizing: border-box;
}

.settings {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 0px 10px;
	box-sizing: border-box;
	backdrop-filter: blur(40px);
	-webkit-backdrop-filter: blur(40px);
	background: transparent;
	transform: translatey(-64px);
	opacity: 0;
	position: fixed;
	height: 64px;
	z-index: 101;
	width: var(--max-width);
	transition: transform .3s ease-in, opacity .3s ease-in, background .3s;
}

:is(body.lq) .settings {
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	background: var(--hex1_dd);
	transform: background .3s;
}

.settings a.on svg {
	color: limegreen;
	filter: drop-shadow(1px 1px 1px limegreen);
	transition: all .3s;
}

.settings a.off svg {
	color: red;
	filter: drop-shadow(1px 1px 1px red);
	transition: all .3s;
}

.settings.open {
	transform: translatey(0px);
	opacity: 1;
	transition: transform .3s ease-out, opacity .3s ease-out;
}

@media only screen and (max-width: 1280px) {
	body {
		width: 100%;
	}

	#viewport {
		border-left: 0px solid var(--hex3);
    border-right: 0px solid var(--hex3);
    border-bottom: 0px solid var(--hex3);
		transition: all 0.3s;
	}
	
	body nav {
		width: 100%;
	}
	
	.settings {
		width: 100%;
	}
}

.topbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 64px;
	padding: 0 10px;
}

.topbar div:first-child {
	display: inline-flex;
	gap: 5px;
	width: 100%;
	text-align: left;
	float: left;
}

.topbar div:last-child {
	width: 100%;
	text-align: right;
	float: right;
}

.topnav {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-around;
	align-content: stretch;
	min-height: 236px;
	padding: 0px 20px 10px 20px;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	filter: opacity(0);
	transition: filter .3s;
	border-top: 2px solid var(--hex3);
}

nav:hover > .topnav {
	transition: filter .3s;
}

.topnav .navbox {
	display: flex;
	flex-direction: column;
	flex-basis: 19.5%;
}

@media only screen and (max-width: 1002px) {
	.topnav .navbox {
		flex-basis: 48.75%;
	}
}

@media only screen and (max-width: 550px) {
	.topnav {
		justify-content: flex-start;
	}
	
	.topnav .navbox {
		flex-basis: 100%;
	}
}

.topnav .navbox p {
	font-family: 'Ubuntu', sans-serif;
	font-weight: bold;
	font-size: 2rem;
	display: flex;
	gap: 10px;
	align-items: center;
	margin: 10px 0px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--hex3);
}

.topnav .navbox a {
	text-decoration: none;
	font-size: 1.5rem;
	line-height: 2rem;
	color: var(--hex2);
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: 0.3s;
}

.topnav .navbox p svg {
	width: 2.5rem;
	height: 2.5rem;
	vertical-align: middle;
}

.topnav .navbox a:hover {
	filter: brightness(150%);
	text-shadow: 0px 0px 3px white;
	transform: translatex(10px);
}

#main {
	transition: margin-left .5s;
	padding: 20px;
}

nav a.navmenu, .settings a {
	font-size: 1.5rem;
	text-wrap: nowrap;
	display: inline-block;
	vertical-align: middle;
	cursor: pointer;
	text-align: center;
	color: var(--hex2);
	margin: 0;
	text-decoration: none;
	padding: 0px 5px;
	transition: filter 0.3s, text-shadow 0.3s;
}

nav a.navmenu:has(svg) {
	display: inline-flex;
	align-items: flex-start;
	gap: 3px;
}

.settings a:has(svg) {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
	gap: 3px;
}

.settings a {
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2; 
}

nav a.navmenu:hover, .settings a:hover {
	filter: brightness(150%);
	text-shadow: 0px 0px 3px white;
	transition: filter 0.3s, text-shadow 0.3s;
}

a.navright {
	float: right;
	padding-left: 10px;
}

a.navlogo {
	font-size: 1.5rem;
	display: inline-flex;
	vertical-align: middle;
	text-align: center;
	color: var(--hex2);
	margin: 0px auto;
	padding: 16px 16px;
	text-decoration: none;
	line-height: 48px;
}

a.navlogo img {
	width: 48px;
	height: 48px;
}

img.navsocial {
	transform: scale3d(1,1,1) rotate3d(0,0,1,0deg);
	filter: drop-shadow(0px 0px 1px black);
	transition: transform 0.5s, filter 0.5s;
	width: 32px;
}

img.navsocial:hover {
	transform: scale3d(1.3,1.3,1.3) rotate3d(0,0,1,360deg);
	filter: drop-shadow(0px 0px 3px white);
	transition: transform 1s, filter 1s;
}

@media only screen and (max-width: 600px) {
	.topbar a.navlogo:not(.landing) span {
		display: none;
	}
}

@media only screen and (max-width: 450px) {
	header:not(.landingheader) .topbar a.navlogo {
		display: none;
	}
}

@media only screen and (max-width: 400px) {	
	
	:is(html.lf) .settings a span {
		display: none;
	}
}

@media only screen and (max-width: 360px) {	
	img.navsocial {
		width: 24px;
		padding-left: 3px;
	}
	
	a.navright {
		padding-left: 3px;
	}
}

@media only screen and (max-width: 320px) {
	:is(html.nf) .settings a span {
		display: none;
	}
	
	.settings a span {
		display: none;
	}
}

@media only screen and (max-width: 280px) {	
	header:not(.landingheader) .topbar div:last-child {
    width: 90px;
	}
}

@media only screen and (max-width: 220px) {	
	:is(html.lf) .topbar a.navmenu span {
		display: none;
	}
}

@media only screen and (max-width: 200px) {	
	header:not(.landingheader) .topbar div:last-child {
    display: none;
	}
	
	:is(html.nf) .topbar a.navmenu span {
		display: none;
	}
}

img.floatLeft {
	float: left;
	margin: 0px 10px 0 0;
	box-shadow: 0px 0px 5px black, 0px 0px 5px black inset;
	height: 250px;
}

table#gear {
	width: 100%;
	background: transparent;
	cursor: default;
	font-size: 1rem;
}

table#gear tr:nth-child(odd) {
	background: var(--hex5);
	transition: background 0.2s;
}

table#gear tr:nth-child(even) {
	background: var(--hex4);
	transition: background 0.2s;
}

table#gear td#firstcol {
	width: 21%;
	padding: 8px;
	border-radius: 10px 0 0 10px;
	text-align: center;
}

table#gear td#secondcol {
	padding: 8px;
}

table#gear td#thirdcol {
	width: 6%;
	padding: 8px;
	border-radius: 0 10px 10px 0;
}

table#gear a {
	text-decoration: none;
	color: var(--hex2);
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: clip;
	transition: 0.3s;
}

table#gear a:hover {
	filter: brightness(150%);
	text-shadow: 0px 0px 3px white;
	transform: translatex(3px);
}

table#gear tr {
	transform: rotateX(-90deg);
	animation: geartablein 0.8s forwards;
	animation-fill-mode: both;
	filter: drop-shadow(0px 0px 0px black) opacity(0%);
}

table#gear tr:hover {
	background: var(--hex1);
	transition: background 0.2s;
}

table#gear tr:nth-child(1) { animation-delay: .1s; }
table#gear tr:nth-child(2) { animation-delay: .2s; }
table#gear tr:nth-child(3) { animation-delay: .3s; }
table#gear tr:nth-child(4) { animation-delay: .4s; }
table#gear tr:nth-child(5) { animation-delay: .5s; }
table#gear tr:nth-child(6) { animation-delay: .6s; }
table#gear tr:nth-child(7) { animation-delay: .7s; }
table#gear tr:nth-child(8) { animation-delay: .8s; }
table#gear tr:nth-child(9) { animation-delay: .9s; }
table#gear tr:nth-child(10) { animation-delay: 1s; }
table#gear tr:nth-child(11) { animation-delay: 1.1s; }
table#gear tr:nth-child(12) { animation-delay: 1.2s; }
table#gear tr:nth-child(13) { animation-delay: 1.3s; }
table#gear tr:nth-child(14) { animation-delay: 1.4s; }
table#gear tr:nth-child(15) { animation-delay: 1.5s; }
table#gear tr:nth-child(16) { animation-delay: 1.6s; }
table#gear tr:nth-child(17) { animation-delay: 1.7s; }
table#gear tr:nth-child(18) { animation-delay: 1.8s; }
table#gear tr:nth-child(19) { animation-delay: 1.9s; }
table#gear tr:nth-child(20) { animation-delay: 2.0s; }
table#gear tr:nth-child(21) { animation-delay: 2.1s; }
table#gear tr:nth-child(22) { animation-delay: 2.2s; }
table#gear tr:nth-child(23) { animation-delay: 2.3s; }
table#gear tr:nth-child(24) { animation-delay: 2.4s; }
table#gear tr:nth-child(25) { animation-delay: 2.5s; }


/* 

	Grosowanie
	
*/


.goting {
	color: var(--hex2_ll);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
}

.goting svg {
	filter: drop-shadow(1px 1px 1px black);
}

.goting a {
	color: var(--hex2_ll);
	text-decoration: underline;
	transition: color 0.3s;
}

.goting a:has(svg) {
	display: flex;
	align-items: center;
	gap: 3px;
}

.goting a:hover {
	color: white;
	text-decoration: underline;
	transition: color 0.3s;
}

.goting .npGame {
	width: max(460px, 49%);
	height: 235px;
	aspect-ratio: 460 / 215;
	background-image: linear-gradient(var(--hex2), var(--hex2));
	background-size: 100% auto;
	background-position: center;
}

.goting .np {
	width: 100%;
	height: 100%;
	backdrop-filter: blur(5px) brightness(50%);
	-webkit-backdrop-filter: blur(5px) brightness(50%);
	background: transparent;
	gap: 20px;
	padding: 20px;
	box-sizing: border-box;
	box-shadow: 3px 3px 3px black;
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	border: 1px solid black;
	transition: background .3s;
}

:is(body.lq) .goting .np {
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	background: rgba(0,0,0,0.8);
	transition: background .3s;
}

.goting .np .cover {
	width: auto;
	height: 176px;
	aspect-ratio: 264 / 352;
	background-position: 50% 50%;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	border: 1px solid black;
}

.goting .npGame .text {
	display: grid;
	align-items: start;
	flex-grow: 1;
}

.goting .npGame .title {
	font-family: 'Ubuntu', sans-serif;
	letter-spacing: -1px;
	font-variant: small-caps;
	font-size: 1.5rem;
	font-weight: bold;
	padding-bottom: 3px;
	border-bottom: 2px solid var(--hex2);
	filter: drop-shadow(1px 1px 1px black);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.goting .npGame .title span:last-child {
	display: none;
}

.goting .npGame .desc p, .goting .game .title p, .goting .game .desc p {
	font-size: 1rem;
	font-weight: bold;
	margin: 0;
}

.goting .desc p {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-start;
	gap: 5px;
	line-height: 1.7rem;
	text-shadow: 1px 1px 1px black;
}

.goting .title p {
	line-height: 1.2rem;
	text-shadow: 1px 1px 1px black;
}

.goting .game .title {
	padding-bottom: 3px;
}

.goting .game .title p {
	filter: drop-shadow(0px 0px 0px gray);
	/*white-space: nowrap;*/
	padding: 2px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.goting .game .title p span {
	margin: 0px 3px;
	display: inline-flex;
	align-items: center;
	gap: 3px;
}

.goting .game .title p svg {
	width: 1.2rem;
	height: 1.2rem;
}

.goting .game .desc {
	backdrop-filter: blur(3px) brightness(70%);
	-webkit-backdrop-filter: blur(3px) brightness(70%);
	background: transparent;
	text-align: left;
	padding: 10px;
	box-sizing: border-box;
	opacity: 0;
	/*height: max(0px, 187px);*/
	aspect-ratio: 460 / 215;
	overflow-y: auto;
	transform: translatey(-30px);
	transition: background .3s ease-in-out .3s, opacity .3s ease-in-out .3s, transform .3s ease-in-out .3s;
}

:is(body.lq) .goting .game .desc {
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

.goting .desc p span {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px;
}

.goting .desc p span a {
	display: flex;
	align-items: center;
	gap: 5px;
}

.goting .game {
	width: 400px;
	/*height: 237px;*/
	background-image: linear-gradient(var(--hex1), var(--hex1));
	background-size: 100% auto;
	background-position: top;
	overflow: hidden;
	box-shadow: 3px 3px 3px black, 0px -1px 0px 1px black inset; /* 0-1px subpixel gap glitch fix (inset) */
	display: inline-flex;
	flex-direction: column;
	justify-content: flex-end;
	box-sizing: border-box;
	border: 1px solid black;
	transition: box-shadow 0.3s ease-in-out;
}

:is(body.lq) .goting .game {
	background-repeat: no-repeat;
}

.goting .bottom {
	font-weight: bold;
	font-size: 1rem;
	width: 100%;
	/*height: 50px;*/
	/*overflow-y: hidden;*/
	text-align: center;
	background: transparent;
	backdrop-filter: blur(10px) brightness(40%);
	-webkit-backdrop-filter: blur(10px) brightness(40%);
	transition: background .3s ease-in-out;
}

:is(body.lq) .goting .bottom {
	background: var(--hex1_d);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	transition: background .3s ease-in-out;
}

.goting .bottom::-webkit-scrollbar/*, .game .desc::-webkit-scrollbar*/ {
	display: none;
}

.goting .game:hover .desc {
	opacity: 1;
	transform: translatey(0px);
	transition: opacity .5s ease-in-out, transform .3s ease-in-out;
}

:is(body.lq) .goting .game:hover .desc {
	opacity: 1;
	transform: translatey(0px);
	background: rgba(0,0,0,0.7);
	transition: opacity .5s ease-in-out, transform .3s ease-in-out;
}

.goting .game:hover .bottom {
	background: rgba(0,0,0,0.75);
	transition: background .3s ease-in-out;
}

:is(body.lq) .goting .game:hover .bottom {
	background: var(--hex1_dd);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	transition: background .3s ease-in-out;
}

.goting .game .desc a {
	/*transform: scale3d(0,0,0);
	transition: transform 0s linear .4s;*/
}

.goting .game:hover .desc a {
	/*transform: scale3d(1,1,1);
	transition: transform 0s linear .01s;*/
}

.goting .game .desc a {
	transform: scale(0);
	text-decoration: underline;
	transition: transform 0s .5s;
}

.goting .game:hover .desc a {
	transform: scale(1);
	color: var(--hex2_ll);
	transition: transform 0s .1s, color .3s;
}

.goting .game:hover .desc a:hover {
	color: white;
	transition: color .3s;
}

.goting .progressBar {
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	background: gray;
	width: 100%;
	height: 3px;
	margin-bottom: 1px;
	z-index: 0;
}

.goting .warning {
	background: yellow;
}

.goting .finished {
	background: white;
}

.goting .progress {
	background: limegreen;
	height: 3px;
}

.goting .timedOut {
	animation: grayout 1s linear 1s forwards;
}

.goting .breathGreen {
	animation: breathGreen 5s linear infinite;
}

.goting .breathYellow {
	animation: breathYellow 5s linear infinite;
}

.goting .breathRed {
	animation: breathRed 5s linear infinite;
}

@media only screen and (max-width: 1020px) {
	.goting .npGame {
		width: 100%;
	}
}

@media only screen and (max-width: 480px) {
	.goting .npGame {
		width: 100%;
		height: fit-content;
		background-size: cover;
	}
	.goting .np {
		flex-wrap: wrap;
		justify-content: center;
    height: fit-content;
	}
	
	.goting .npGame .desc {
		margin-top: 5px;
	}
}

@media only screen and (max-width: 420px) {
	.goting .game, .goting .timedOut {
    /*background-size: cover;*/
    width: 100%;
    height: auto;
	}
}

@keyframes grayout {
	0% { filter: grayscale(0%) contrast(100%); }
	100% { filter: grayscale(100%) contrast(200%); }
}

@keyframes breathGreen {
	0% { filter: drop-shadow(0px 0px 1px transparent); }
	20%, 50% { filter: drop-shadow(0px 0px 2px green); }
	70%, 100% { filter: drop-shadow(0px 0px 1px transparent); }
}

@keyframes breathYellow {
	0% { filter: drop-shadow(0px 0px 1px transparent); }
	20%, 50% { filter: drop-shadow(0px 0px 2px yellow); }
	70%, 100% { filter: drop-shadow(0px 0px 1px transparent); }
}

@keyframes breathRed {
	0% { filter: drop-shadow(0px 0px 1px transparent); }
	20%, 50% { filter: drop-shadow(0px 0px 2px red); }
	70%, 100% { filter: drop-shadow(0px 0px 1px transparent); }
}

#gotingRules ol {
	font-size: 1.5rem;
}

#gotingDiagram .step {
	display: flex;
	text-align: center;
	justify-content: center;
	flex-direction: row;
	align-items: stretch;
	width: 100%;
	margin: 20px 0px;
	font-size: 1.5rem;
}

#gotingDiagram .box {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	border-radius: 15px;
	padding: 10px;
	width: 75%;
	background: linear-gradient(163deg, var(--hex4_dd), var(--hex5_dd), var(--hex4_dd));
	filter: drop-shadow(2px 4px 6px black);
}

#gotingDiagram .box.highlighted {
	background: linear-gradient(163deg, var(--hex1_l), var(--hex1_ll), var(--hex1_l));
}

#gotingDiagram .or {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 10px;
	width: 5%;
}

#gotingDiagram .arrow {
	text-align: center;
	font-size: 3rem;
}

@media only screen and (max-width: 768px) {
	#gotingDiagram .step {
		flex-direction: column;
	}

	#gotingDiagram .box {
		width: auto;
	}

	#gotingDiagram .or {
		width: auto;
	}
}


/*

	Jacos / Tokenos

*/


#rewardBronze, #rewardSilver, #rewardGold, #rewardEmerald, #rewardSapphire, #rewardOnyx, #rewardDiamond {
	padding-left: 10px;
}

#rewardBronze {	border-left: 5px solid rgb(205, 127, 50); }
#rewardSilver {	border-left: 5px solid rgb(192, 192, 192); }
#rewardGold {	border-left: 5px solid rgb(205, 127, 50); }
#rewardEmerald {	border-left: 5px solid rgb(80, 200, 120); }
#rewardSapphire {	border-left: 5px solid rgb(15, 82, 186); }
#rewardOnyx {	border-left: 5px solid rgb(15, 15, 15); }
#rewardDiamond {	border-left: 5px solid rgb(185, 242, 255); }

#rewardTitle {
	font-family: 'Ubuntu', sans-serif;
	font-weight: bold;
	font-size: 2rem;
	border-bottom: 2px solid var(--hex2);
}

#rewardIcon {
	margin-right: 5px;
}

/*#rewardIcon, #rewardCurrency {
	margin-top: -5px;
	vertical-align: middle;
}*/

.scheduleinfo {
	text-align: center;
}

.schedule thead tr, .schedule tfoot tr {
	display: block;
}

.schedule {
	border-spacing: 0px 0px;
	text-align: center;
	cursor: default;
	margin: 0px auto;
	box-shadow: 0 0 20px black;
}

.schedule thead {
	background: linear-gradient(to top, var(--hex4), var(--hex1));
}

.schedule tbody {
	background: #151520;
	display: block;
	height: 405px;
	overflow-y: scroll;
	resize: vertical;
	scroll-behavior: smooth;
}

.schedule td {
	box-sizing: border-box;
	box-shadow: 0 0 3px transparent inset;
	width: 80px;
	height: 60px;
	margin: 5px;
	padding: 0;
	text-shadow: 0px 0px 0px black;
	border-radius: 15px;
	transition: text-shadow 0.2s, filter 0.2s, box-shadow 0.2s;
}

.schedule td:hover:not(tfoot td) {
	box-shadow: 0 0 3px var(--hex2) inset;
	text-shadow: 0px 0px 1px black;
	filter: contrast(250%);
	transition: text-shadow 0.2s, filter 0.2s, box-shadow 0.2s;
}

.schedule thead th {
	width: 80px;
	height: 30px;
	vertical-align: top;
	padding-top: 5px;
	box-sizing: border-box;
}

.schedule th:last-child {
	width: 10px;
}

.schedule td.separator {
	height: 45px;
	font-size: 1.25rem;
	font-weight: bold;
}

.schedule tbody td.week span, .schedule tbody td.thisweek span {
	transform: rotate3d(0, 0, 1, 270deg);
}

.schedule thead th:first-child {
	width: 45px;
}

.schedule tbody td:first-child {
	height: 45px;
	width: 45px;
}

.schedule tbody td.thisweek {
	border-left: 2px solid white;
}

.schedule tfoot td.yupm, .schedule tfoot td.yupe, .schedule tfoot td.yups, .schedule tfoot td.nope, .schedule tfoot td.idk {
	background-color: #151520;
	border: 2px solid var(--hex2);
}

.schedule td.yupe {
	background-image: linear-gradient(45deg, rgba(63, 81, 181, 0.5), transparent);
}

.schedule td.yupm {
	background-image: linear-gradient(45deg, rgba(76, 175, 80, 0.5), transparent);
}

.schedule td.yups {
	background-image: linear-gradient(45deg, rgba(158, 158, 158, 0.5), transparent);
}

.schedule td.nope {
	background-image: linear-gradient(45deg, rgba(244, 67, 54, 0.5), transparent);
}

.schedule td.idk {
	background-image: linear-gradient(45deg, rgba(255, 235, 59, 0.5), transparent);
}

.schedule td.out {
	opacity: .2;
}

.schedule td.hidden {
	opacity: 0;
}

.schedule td a {
	text-decoration: underline var(--hex2) 1px;
}

.schedule td a span {
	font-size: 1.5rem;
	display: block;
}

.schedule tfoot {
	background: linear-gradient(to bottom, var(--hex4), var(--hex1));
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	align-content: center;
	align-items: flex-end;
	padding: 5px 0;
	gap: 5px;
}

.schedule tfoot td {
	height: 30px;
	box-sizing: border-box;
}

.schedule span {
	font-family: 'Ubuntu', sans-serif;
	font-weight: bold;
	font-size: 2rem;
	color: var(--hex2);
}

.schedule span.today {
	color: white;
	text-shadow: 0px 0px 10px silver;
}

.schedule td a:target {
	scroll-margin-top: 180px;
}

.schedule ::-webkit-scrollbar {
  width: 10px;
	box-sizing: border-box;
}

.schedule ::-webkit-scrollbar-track {
  background: var(--hex4);
}

.schedule ::-webkit-scrollbar-thumb {
  background: var(--hex2);
	border-radius: 8px;
}

.schedule ::-webkit-scrollbar-thumb:hover {
  background: var(--hex3);
}

.schedule ::-webkit-scrollbar-corner {
	background: var(--hex4);
}

@media only screen and (max-width: 400px) {
	.schedule span {
		font-size: 1.5rem;
	}
	
	.schedule thead th {
		font-size: 0.8rem;
    vertical-align: middle;
    padding-top: 0;
	}
	
	.schedule tfoot td {
		font-size: 0.8rem;
	}
}

@media only screen and (max-width: 300px) {
	#content {
		padding: 0;
	}
	
	.schedule span {
		font-size: 1rem;
	}
	
	.schedule thead th:first-child {
		width: auto;
	}
}

.donations {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: center;
}

.donations .dnt_block {
	display: flex;
	padding: 10px;
	box-sizing: border-box;
	justify-content: center;
	align-items: center;
	flex-wrap: nowrap;
	background: linear-gradient(15deg, black 33%, transparent);
	box-shadow: 1px 3px 5px black;
	height: fit-content;
}

.donations .dnt_block:nth-of-type(1) {
	background: linear-gradient(15deg, rgba(255, 193, 7, 1), transparent);
	margin-bottom: 40px;
}

.donations .dnt_block:nth-of-type(2) {
	background: linear-gradient(15deg, rgba(158, 158, 158, 1), transparent);
}

.donations .dnt_block:nth-of-type(3) {
	background: linear-gradient(15deg, rgba(121, 85, 72, 1), transparent);
	margin-bottom: 30px;
}

.donations .dnt_block:nth-of-type(n+4) {
	background: linear-gradient(15deg, rgba(97, 97, 97, 1), transparent);
}

.donations .dnt_block:nth-of-type(10) {
	margin-bottom: 20px;
}

.donations .dnt_block:nth-of-type(n+11) {
	background: linear-gradient(15deg, rgba(33, 33, 33, 1), transparent);
}

.donations p {
	margin: 0;
	text-align: center;
}

.donations p.dnt_avatar {
	width: 70px;
	height: 70px;
	border-radius: 100%;
}

.donations .dnt_block:nth-of-type(1) p.dnt_avatar {
	border: 3px solid rgba(255, 193, 7, 1);
	box-shadow: 0px 0px 20px rgba(255, 193, 7, 1);
}

.donations .dnt_block:nth-of-type(2) p.dnt_avatar {
	border: 3px solid rgba(158, 158, 158, 1);
	box-shadow: 0px 0px 20px rgba(158, 158, 158, 1);
}

.donations .dnt_block:nth-of-type(3) p.dnt_avatar {
	border: 3px solid rgba(121, 85, 72, 1);
	box-shadow: 0px 0px 20px rgba(121, 85, 72, 1);
}

.donations .dnt_block:nth-of-type(n+4) p.dnt_avatar {
	border: 3px solid rgba(97, 97, 97, 1);
	box-shadow: 0px 0px 20px rgba(97, 97, 97, 1);
}

.donations .dnt_block:nth-of-type(n+11) p.dnt_avatar {
	border: 3px solid rgba(33, 33, 33, 1);
	box-shadow: 0px 0px 20px rgba(33, 33, 33, 1);
}

.donations .dnt_rank {
	font-family: 'Ubuntu Mono', sans-serif;
	background: var(--hex1);
	border: 3px solid var(--hex2);
	color: var(--hex2);
	padding: 1px;
	font-weight: bolder;
	font-size: 1.2rem;
	margin-top: -8px;
	border-radius: 10px;
	text-align: center;
	box-shadow: 0px 0px 20px black;
}

.donations .dnt_right {
	padding: 0 10px;
}

.donations .dnt_donator {
	font-family: 'Ubuntu', sans-serif;
	font-weight: bold;
	text-align: left;
	letter-spacing: -2px;
}

.donations .dnt_total {
	font-family: 'Ubuntu Mono', sans-serif;
	text-align: left;
	font-size: 1rem;
}

.donations .dnt_block:nth-of-type(n+11) .dnt_right {
	width: 100%;
}

.donations .dnt_block:nth-of-type(1), .donations .dnt_block:nth-of-type(2), .donations .dnt_block:nth-of-type(3) {
	font-family: 'Ubuntu', sans-serif;
	text-shadow: 0px 0px 2px black;
}

.donations .dnt_block:nth-of-type(1) {
	flex-basis: 100%;
}

.donations .dnt_block:nth-of-type(2), .donations .dnt_block:nth-of-type(3) {
	flex-basis: 50%;
}

.donations .dnt_block:nth-of-type(n+4) {
	flex-basis: 33.333%;
}

.donations .dnt_block:nth-of-type(n+7) {
	flex-basis: 25%;
}

.donations .dnt_block:nth-of-type(n+11) {
	justify-content: space-between;
	flex-basis: 20%;
}

.donations .dnt_block:nth-of-type(n+11) p.dnt_avatar {
	width: 40px;
	height: 40px;
}

.donations .dnt_block:nth-of-type(n+11) .dnt_rank {
	width: 40px;
	font-weight: normal;
	border: 2px solid var(--hex2);
}

.donations .dnt_block:nth-of-type(n+11) p.dnt_donator {
	font-size: 1.2rem;
	text-overflow: ellipsis;
}

@media only screen and (max-width: 1200px) {
	:is(html.lf) .donations .dnt_block:nth-of-type(n+11) {
		flex-direction: column;
	}
	
	:is(html.lf) .donations .dnt_block:nth-of-type(n+11) .dnt_donator {
	text-align: center;
	}
	
	:is(html.lf) .donations .dnt_block:nth-of-type(n+11) .dnt_total {
	text-align: center;
	}
	
	:is(html.lf) .donations .dnt_block:nth-of-type(n+7) {
		flex-direction: column;
	}
	
	:is(html.lf) .donations .dnt_block:nth-of-type(n+7) .dnt_donator {
	text-align: center;
	}
	
	:is(html.lf) .donations .dnt_block:nth-of-type(n+7) .dnt_total {
	text-align: center;
	}
}

@media only screen and (max-width: 1100px) {
	.donations .dnt_block:nth-of-type(n+11) {
		flex-direction: column;
	}
	
	.donations .dnt_block:nth-of-type(n+11) .dnt_donator {
	text-align: center;
	}
	
	.donations .dnt_block:nth-of-type(n+11) .dnt_total {
	text-align: center;
	}
}

@media only screen and (max-width: 1000px) {
	.donations .dnt_block:nth-of-type(n+7) {
		flex-direction: column;
	}
	
	.donations .dnt_block:nth-of-type(n+7) .dnt_donator {
	text-align: center;
	}
	
	.donations .dnt_block:nth-of-type(n+7) .dnt_total {
	text-align: center;
	}
	
	:is(html.lf) .donations .dnt_block:nth-of-type(n+4) {
		flex-direction: column;
	}
	
	:is(html.lf) .donations .dnt_block:nth-of-type(n+4) .dnt_donator {
	text-align: center;
	}
	
	:is(html.lf) .donations .dnt_block:nth-of-type(n+4) .dnt_total {
	text-align: center;
	}

	:is(html.lf) .donations .dnt_block:nth-of-type(n+11) {
		flex-basis: 25%;
	}
}

@media only screen and (max-width: 900px) {
	.donations .dnt_block:nth-of-type(n+4) {
		flex-direction: column;
	}
	
	.donations .dnt_block:nth-of-type(n+4) .dnt_donator {
	text-align: center;
	}
	
	.donations .dnt_block:nth-of-type(n+4) .dnt_total {
	text-align: center;
	}

	.donations .dnt_block:nth-of-type(n+11) {
		flex-basis: 25%;
	}
	
	:is(html.lf) .donations .dnt_block:nth-of-type(n+4) {
		flex-direction: column;
	}

	:is(html.lf) .donations .dnt_block:nth-of-type(n+7) {
		flex-basis: 50%;
	}
}

@media only screen and (max-width: 700px) {
	.donations .dnt_block:nth-of-type(n+4) {
		flex-direction: column;
	}

	.donations .dnt_block:nth-of-type(n+7) {
		flex-basis: 50%;
	}
	
	:is(html.lf) .donations {
		flex-direction: row;
	}
	
	:is(html.lf) .donations .dnt_block:nth-of-type(n+1) .dnt_donator {
	text-align: center;
	}
	
	:is(html.lf) .donations .dnt_block:nth-of-type(n+1) .dnt_total {
	text-align: center;
	}

	:is(html.lf) .donations .dnt_block:nth-of-type(n+1) {
		flex-direction: row;
		flex-basis: 100%;
	}

	:is(html.lf) .donations .dnt_block:nth-of-type(n+11) {
		justify-content: center;
		flex-direction: row;
		flex-basis: 50%;
	}

	:is(html.lf) .donations .dnt_block .dnt_right {
		width: 100%;
		padding: 0;
	}
}

@media only screen and (max-width: 600px) {
	.donations {
		flex-direction: row;
	}
	
	.donations .dnt_block:nth-of-type(n+1) .dnt_donator {
	text-align: center;
	}
	
	.donations .dnt_block:nth-of-type(n+1) .dnt_total {
	text-align: center;
	}

	.donations .dnt_block:nth-of-type(n+1) {
		flex-direction: row;
		flex-basis: 100%;
	}

	.donations .dnt_block:nth-of-type(n+11) {
		justify-content: center;
		flex-direction: row;
		flex-basis: 50%;
	}

	.donations .dnt_block .dnt_right {
		width: 100%;
		padding: 0;
	}
}

@media only screen and (max-width: 500px) {
	:is(html.lf) .donations {
		flex-direction: column;
	}

	:is(html.lf) .donations .dnt_block:nth-of-type(n+1) {
		flex-direction: row;
		flex-basis: 100%;
	}

	:is(html.lf) .donations .dnt_block .dnt_right {
		width: 100%;
		padding: 0;
	}
}

@media only screen and (max-width: 400px) {
	.donations {
		flex-direction: column;
	}

	.donations .dnt_block:nth-of-type(n+1) {
		flex-direction: row;
		flex-basis: 100%;
	}

	.donations .dnt_block .dnt_right {
		width: 100%;
		padding: 0;
	}
}

@media only screen and (max-width: 300px) {
	:is(html.nf, html.lf) .donations .dnt_block:nth-of-type(n+1) {
		flex-direction: column;
	}
}
	

#col50 {
	float: left;
	width: 50%;
}

#row:after {
	content: "";
	display: table;
	clear: both;
}

#archiveblock {
	margin: 0px;
}

#archiveblock:after {
	content: "";
	clear: both;
	display: table;
}

#archiveblock p {
	text-align: justify;
	clear: right;
}

#archive {
	clear: both;
	float: left;
	margin: 0px 20px;
}

#players {
	display: flex;
	flex-direction: row;
	justify-content: center;
}

#player {
	width: 120px;
	height: 120px;
	margin: 5px;
	box-shadow: 1px 1px 3px var(--hex4);
	background: var(--hex4);
	border-radius: 5px;
	text-align: center;
}

#playerhelm {
	width: 80px;
	height: 80px;
	margin: 7px auto;
}

#playercube {
	width: 40px;
}

#playername {
	margin: 0;
	font-size: 1.1rem;
	font-weight: bold;
}

#playercard {
	padding-left: 200px;
	min-height: 360px;
	text-shadow: 1px 1px 1px black;
}

.rules {
	font-size: 1.5rem;
}

.rules ul li {
	list-style-type: lower-alpha;
}

.nav {
	display: flex;
	font-family: 'Ubuntu Condensed', sans-serif;
	font-size: 1.5rem;
	text-align: center;
	margin: 10px;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-content: center;
	gap: 15px;
}

.nav a {
	display: flex;
	background: var(--hex1_dd);
	color: var(--hex2);
	text-decoration: none;
	text-shadow: none;
	border: 2px solid var(--hex2);
	border-radius: 10px;
	box-shadow: 3px 3px 15px black;
	padding: 8px 15px;
	flex-direction: row;
	justify-content: center;
	flex-wrap: wrap;
	align-items: center;
	gap: 3px;
	transition: border 0.3s, color 0.3s, text-shadow 0.3s;
}

.nav a:hover {
	color: white;
	border: 2px solid white;
	text-shadow: 0px 0px 3px white;
	transition: border 0.3s, color 0.3s, text-shadow 0.3s;
}

.nav a:active {
	filter: brightness(120%);
	box-shadow: 0px 0px 5px white;
	transition: box-shadow 0.15s, filter 0.15s;
}

.nav img {
	width: 1rem;
	height: 1rem;
}

.servermap {
	max-width: var(--max-width);
	min-width: 99%;
	height: 500px;
	display: block;
	margin: 25px auto;
	border: none;
	border-radius: 10px;
	background: rgb(26,26,26);
	box-shadow: 3px 3px 3px black;
}

#maplink {
	display: block;
	font-family: 'Ubuntu Condensed', sans-serif;
	margin-top: 10px;
	font-size: 1.5rem;
	color: var(--hex2);
	filter: brightness(100%);
	text-align: center;
	text-shadow: none;
	transition: filter 0.3s, text-shadow 0.3s;
	text-decoration: none;
}

#maplink:hover {
	filter: brightness(150%);
	text-shadow: 0px 0px 3px white;
	transition: filter 0.5s, text-shadow 0.5s;
	text-decoration: none;
}

hr {
	border: 1px solid var(--hex2);
}

footer {
	text-align: center;
	font-size: 1.5rem;
	color: var(--hex1);
	background: var(--hex3);
	margin: 25px 0px 0px 0px;
	padding: 10px 0px;
	border-radius: 0px 0px 10px 10px;
}

footer svg, .navmenu svg {
	display: inline;
	position: relative;
	top: 0.15rem;
}

.cookies {
	position: fixed;
	width: 100%;
	left: 1rem;
	bottom: 1rem;
	border-top: 2px solid var(--hex3);
	padding: 0px 1rem;
	box-sizing: border-box;
	width: calc(var(--max-width) / 3);
	box-shadow: 5px 10px 30px black, 0px 2px 4px gray inset;
	border-radius: 3rem;
	backdrop-filter: blur(1em) brightness(50%);
	-webkit-backdrop-filter: blur(1em) brightness(50%);
	background: transparent;
}

:is(body.lq) .cookies {
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	background: var(--hex1_dd);
}

.cookies p {
	margin: .3rem;
}

.eaten {
	transform: translatey(50em);
	opacity: 0;
	transition: opacity .3s ease-in, transform 3s ease-in;
}

@media only screen and (max-width: 800px) {
	.cookies {
		left: 0;
		bottom: 0;
		width: 100%;
		border-radius: 0px;
	}
}

body:has(#maintenance) * {
	box-sizing: border-box;
	margin: 0;
}

body:has(#maintenance) {
	overflow: hidden;
	height: 100vh;
	height: 100dvh;
}

@keyframes cwRotation {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

@keyframes cwCounterRotation {
	0% {
		transform: rotate(360deg);
	}
	100% {
		transform: rotate(0deg);
	}
}

#maintenance {
  display: flex;
  align-items: center;
  justify-content: center;
	flex-wrap: wrap;
	align-content: center;
  height: 100vh;
	height: 100dvh;
}
	
#maintenance h1 {
	margin-bottom: 10px;
}

#maintenance div.maintenanceInfo {
  width: 50%;
	transition: all .3s;
}

#maintenance p.footer {
	margin-top: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 5px;
}

#maintenance p {
	text-align: justify;
	padding: 0px 10px 10px 10px;
}

#maintenance p:not(.footer) {
	text-indent: 1.5rem;
}

#maintenance .maintenanceInfo .main {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.bgCogwheels {
	width: 100vw;
	height: 100dvh;
	height: 100vh;
	position: fixed;
	z-index: -1;
	filter: blur(10px);
}

.bgCogwheels svg {
	width: 200vw;
	height: 200dvh;
	height: 200vh;
	transform: translate(-50vw, -50vh) rotate(180deg);
	filter: drop-shadow(-1vw -1vh 1vw var(--hex1_dd));
	fill: var(--hex4_d);
}

.bgCogwheels .cwLarge {
	animation: cwCounterRotation 20s infinite linear;
	transform-origin: 461.37px 173.694px;
}

.bgCogwheels .cwMedium {
	animation: cwRotation 15s infinite linear;
	transform-origin: 254.675px 379.447px;
}

.bgCogwheels .cwSmall {
	animation: cwCounterRotation 10s infinite linear;
	transform-origin: 100.136px 225.345px;
}

.cogwheels svg {
	width: 100%;
	height: 12.5vw;
	padding: 10px;
	fill: var(--hex2_ll);
	filter: drop-shadow(0.5vw 0.5vw 1vw black);
	transition: all .3s;
}

.cogwheels .cwLarge {
	animation: cwCounterRotation 5s infinite linear;
	transform-origin: 461.37px 173.694px;
}

.cogwheels .cwMedium {
	animation: cwRotation 3.75s infinite linear;
	transform-origin: 254.675px 379.447px;
}

.cogwheels .cwSmall {
	animation: cwCounterRotation 2.5s infinite linear;
	transform-origin: 100.136px 225.345px;
}

@media only screen and (max-width: 768px) {
	#maintenance p {
		/*font-size: 2rem;*/
	}
	
	#maintenance div.maintenanceInfo {
		width: 100%;
		transition: all .3s;
	}

	.cogwheels svg {
		height: 20vw;
	}
}

@media only screen and (max-width: 768px) and (orientation: landscape) {
	#maintenance div.maintenanceInfo {
		width: 100%;
		transition: all .3s;
	}
	
	#maintenance h1 {
		font-size: 1.75rem;
	}
	
	#maintenance p {
		font-size: 1.25rem;
		margin: .5rem 5px;
	}
}

@media only screen and  (orientation: landscape) {
	#maintenance .maintenanceInfo .main {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	#maintenance .maintenanceInfo .main div {
		flex-basis: 25%;
	}
	#maintenance .maintenanceInfo .main p {
		flex-basis: 75%;
	}
}

@media only screen and (max-width: 425px) {
	.cogwheels svg {
		height: 33vw;
		transition: all .3s;
	}
	
	#maintenance h1 {
		font-size: 1.75rem;
	}
	
	#maintenance p {
		font-size: 1.25rem;
	}
}