@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap');@import url('https://fonts.googleapis.com/css2?family=Afacad+Flux:wght@100..1000&family=Dongle&family=Lexend:wght@100..900&display=swap');@property --color-loading {
	syntax: "<color>";
	inherits: true;
	initial-value: red;
}

@property --radius-loading {
	syntax: "<length>";
	inherits: true;
	initial-value: 24px; /* for whatever reason the property does not work correctly if the inital value uses rem or em */
}

.loading{
	background-image: conic-gradient(from 0deg at 50% 50%, #0000 25%, var(--color-loading) 100%);
	aspect-ratio: 1;
	width: calc(2 * var(--radius-loading));
	mask-image: radial-gradient(circle, #0000 calc(0.8 * var(--radius-loading)), #fff calc(0.8 * var(--radius-loading)) var(--radius-loading), #0000 var(--radius-loading) 0);
	margin: auto;
	animation: loading-spin 1s linear infinite;
}

.loading-big{
	--radius-loading: 2.5rem;
}

@keyframes loading-spin {
	from {
		rotate: 0deg;
	}
	to{
		rotate: 360deg;
	}
}
.profile {
	--icon-size: 3rem;
	white-space: nowrap; /* Prevents word wrap */

	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap:0.5em;
	user-select: none;

	div.profile-picture {
		width: var(--icon-size);
		height: var(--icon-size);

		border-radius: 100%;
		border: 2px solid #0000;
		outline: 2px solid #fff;
		overflow: hidden;
	}
}
.navbar {
	display: grid;
	grid: 1fr / 1fr auto auto 1fr;
	justify-items: center;
	align-items: stretch;
	
	position: sticky;
	top: 0;
	z-index: 1001;

	backdrop-filter: blur(10px);
	background-color: rgba(255, 255, 255, 0.2);

	white-space: nowrap; /* Disables word wrap. */
	text-align: center;

	--horizontal-padding: min(1rem, 3.5vw); /* 3.5vw is a "magic number" that makes it not cause overflow until the screen width is below 320px */

	a, a:visited{
		text-decoration: none; /* Removes underline from links */
		color: var(--color-text) !important;
	}

	.logo-button {
		align-self: stretch; /* Makes it the same height as parent. */
		padding-inline: var(--horizontal-padding);
		justify-self: left;
	}

	.logo-container {
		font-size: 2em;
	}

}

.navbar-link {
	display: flex;
	flex-direction: row;
	gap: 0.02rem;
	padding-block: 1rem;
	padding-inline: var(--horizontal-padding);
	transition: background-color 0.1s;
	font-family: "Lexend";
	text-shadow: 0 0.0625rem 0.125rem #1a1a1a;

	&:where(:hover, :focus-within) {
		background-color: var(--lowlight);
	}
}

.navbar-icon{
	display: flex;
		>svg{
			filter: drop-shadow(0 0.0625rem 0.125rem #1a1a1a);
		}
}

.nav-auth-wrapper{
	justify-self: right;
	display: flex;
	padding-inline: var(--horizontal-padding);
}

@media (min-width: 850px){
	.navbar{
		padding-inline: 1rem;
	}
}

@media (min-width: 700px){
	.navbar-link{
		&[href="/game"]{
			justify-self: right;
		}

		&[href="/leaderboard"]{
			justify-self: left;
		}
	}
}

@media (max-width: 700px){
	.navbar{ 
		font-size: 1.1rem;
		grid: 1fr / repeat(4, auto);
		
		.login-container a{
			width: 100%;
		}
	}
}

.login-container{
	justify-self: right;
	padding-inline: var(--horizontal-padding);
	height: 100%;
	display: flex;
	.profile{
		margin-block: auto;
	}
}

.console-controller-svg{
	margin-block: auto;
	width: 100%;
}.dropdown {
	--triangle-size: 1rem;

	position: relative; /* Makes it so that the position: absolute contents are placed relative to the dropdown icon */
	
	.contents {
		background-color: var(--color-dropdown);

		position: absolute;
		top: calc(var(--icon-size) + 1rem);

		width: max-content;
		height: max-content;

		z-index: 1000;

		--dropdown-border-radius: 0.5em;
		border-radius: var(--dropdown-border-radius);
		&.vertical {
			&::before{
				content:"";
				position: absolute;
				right: var(--dropdown-border-radius);
				top: calc(0q - var(--triangle-size));
				border-right: var(--triangle-size) solid #0000;
				border-left: var(--triangle-size) solid #0000;
				border-bottom: var(--triangle-size) solid var(--color-dropdown);
			}
			>:first-child{
				border-radius: var(--dropdown-border-radius) var(--dropdown-border-radius) 0 0;

			}
			>:last-child{
				border-radius: 0 0 var(--dropdown-border-radius) var(--dropdown-border-radius);
			}
		}
		&:not(.vertical) {
			>:first-child{
				border-radius: var(--dropdown-border-radius) 0 0 var(--dropdown-border-radius);
			}
			>:last-child{
				border-radius: 0 var(--dropdown-border-radius) var(--dropdown-border-radius) 0;
			}
		}

		&:not(.align-right, .align-center) {
			left: 0px;
		}
		&.align-right {
			right: calc(var(--triangle-size) - var(--dropdown-border-radius))
		}
	}
	&:not(:hover, :focus-within) .contents {
		display: none; /* Hides dropdown contents by default */
	}
}
.main-home{
	width: clamp(320px, 90%, 70ch);
	margin-inline: auto;
	padding-bottom: 5vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6em;
	h2{
		text-align: left;
		width: 100%;
	}
	hr{
		width: 100%;
		margin: 0;
	}
}

.home-how-to-image{
	width: 70%;
	min-height: 50%;
	margin-inline: auto;
	box-sizing: content-box;
	border: 5px solid #0000;
	outline: 1px dashed #fff;
}

.home-how-to-container{
	display: flex;
	flex-direction: column;
	gap:0.5em;
}

.button-play-now {
	--background-color: var(--color-blue);
	font-size: larger;
	width: fit-content;
}

.welcome-container {
    text-align: center;
    margin-block: 1em;
    color: white;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5em;
	.button-wrapper-cool{
		margin-top: 0.5em;
	}
}

.welcome-title {
    font-size: 3rem;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	svg{
		filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2))
	}
}

.welcome-subtitle {
    font-size: 1.5rem; 
    color: white; 
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
	font-family: "Lexend", "Mozilla Twemoji", serif;
	font-weight: 700;
}

.small-text {
	max-width: 40%;
	font-size: 11px;
	font-style: italic;
	color: #ffffff80;
}

@media (max-width: 700px){
	.welcome-title{
		font-size: 2rem;
	}
	.welcome-subtitle {
		font-size: 1.2rem;
	}
}.button {
	background-image: radial-gradient(150% 160% at 50% 15%, #fffa 0, #0000 30%);
	background-color: var(--background-color);
	
	color: var(--color);
	font-size: 1.4em;
	font-weight: bold;
	font-family: "Lexend", serif;
	text-shadow: 0 0.0625rem 0.125rem #1a1a1a;
	white-space: nowrap;

	border: none;
	border-radius: 2in;
	
	transition: 
		background-color 0.1s,
		transform 0.15s ease;

	cursor: pointer;
	user-select: none;

	box-shadow: 
		0 0.275rem 1.125rem rgba(0, 0, 0, 0.25),
		inset 0 0.0625rem 0 rgba(255, 255, 255, 0.2),
		inset 0 -0.125rem 0 rgba(0, 0, 0, 0.3);

	div {
		border-radius: 2in;
		padding: 0.5em;
	}

	&[disabled=""]{
		filter: brightness(70%);
		cursor: not-allowed;
	}
}

:where(.button-wrapper-cool){
	--color: #fff;
	--background-color: #44d238;
}

.button-hover{
	transition: background-color 0.1s;
	&:where(:hover, :focus-within) {
		background-color: var(--lowlight);
	}
}

.button-wrapper-cool{
	padding: 3px;
	background: #0000;
	width: fit-content;
	border: 2px solid #fff;
	border-radius: 2in;
	display: flex;
	&>.button{
		font-size: 1em;
	}

	transition: transform 0.15s ease;
	&:has(.button:is(:hover, :focus-within):not([disabled=""])){
		transform: scale(1.05);
	}

	&:has(.button[disabled=""]){
		filter: brightness(70%);
	}
}

.button-copy{
	box-sizing: content-box;
	--m: calc(0.4 * var(--w)); /* distance that the top layer is offset from the bottom layer */
	--w: 12px; /* width of one layer */
	--a: 1.3; /* denominator of the aspect ratio */
	--b: 2px; /* width of the border on each layer */
	width: calc(var(--w) + var(--m));
	height: calc(var(--w) * var(--a) + var(--m));
	transition: filter 0.1s;
	cursor: pointer;

	&::after, &::before{
		box-sizing: border-box;
		content: '';
		display: block;
		width: var(--w);
		aspect-ratio: 1/var(--a);
		border: var(--b) solid #ccc;
		border-radius: 20%;
		position: absolute;
		pointer-events: none;
	};

	&::after{
		margin: var(--m);
	}
	&::before{
		--o: 2px; /* "gap" between the two different layers */
		mask-image: conic-gradient(from 90deg at calc(var(--m) - var(--o)) calc(var(--m) - var(--o)), transparent 0% 25%, #fff 25% 0);
	}
}
fieldset {
	width: max-content;
	padding: 1rem;
	padding-top: 0.5rem;
}

input {
    font-family:'Trebuchet MS';
    font-size: large;

    padding: 0.5rem;

	background-color: white;
    
	border: 0.2rem solid rgb(152, 181, 192);
	border-radius: 1rem;

    &:where(:hover, :focus-within):not([disabled=""]) {
        outline: none;
        border-color: rgb(71, 181, 255);
    }

    &[type="submit"] {
        background-color: rgb(40, 115, 200);
        color: white;
        cursor: pointer;
    }

    &[type="button"] {
        cursor: pointer;
    }

    &[id="google"] {
        text-align: center;
        width: auto;
    }

    &[type="range"]{
        border:none;
        padding: 0;
    }

	&[type="number"]{
		width: 100%;
	}

	&[type="checkbox"], &[type="radio"] {
		width: 1.2rem;
	}
}

.radio-button-wrapper{
	display: grid;
	grid: 1fr / 1fr max-content;
}.game-setup {
	display: flex;
	flex-direction: column;
	gap: 2em;
	align-items: center;
	justify-content: space-between;
}

.game-setup-container {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: stretch;
	gap: 1em;
	padding: 1rem;
	border: 1px solid #101011;
	border-radius: 12px;
	box-shadow: 
		inset 0px 2px 0px 0px rgba(255, 255, 255, 0.15), 
		0px 3px 0px 0px rgba(255, 255, 255, 0.15);
	max-width: 1200px;
	margin: 0 auto;
	width: fit-content;
}

.game-setup-option-wrapper{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	margin-block: auto;
}

.invite-container, 
.game-setup-settings-form{
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	align-items: center;
	white-space: nowrap;
}

.game-setup-settings-container{
	display: flex;
	flex-direction: column;
	gap: 0.2em;
	align-items: center;
	width: 100%; 
	padding: 1rem;
	flex-grow: 1;
	font-family: "Lexend", serif;
	text-shadow: 0 0.0625rem 0.125rem #1a1a1a;
	span, .game-setup-settings-label{
		font-weight: 700;
	}
}

.game-setup-players-container{
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	*::after{
		font-size: small;
		color: #999;
	}
	.host::after{content: '👑'}
	.you::after{content: '(You)'}
	.host.you::after{content: '👑 (You)'}
}

.game-setup-round-length:not(.´){
	width: 100%
}

.game-button-start{
	padding-inline: 0.5rem;
	padding-block: 0.2rem;
}

.qr-code {
	/* qr code is 33 x 33 squares */
	--w: 9rem;
	height: auto;
	width: var(--w);
	box-sizing: content-box;
	padding: calc(1 / 33 * var(--w)); /* makes the qr code have a "border" that is one square wide */
	background: #fff;
}

@media (max-width: 700px) {
	.game-setup-container {
		flex-wrap: wrap;
		justify-content: space-around;
	}

	.multiplayer-pane {
		order: -1;
		width: 100%;
		fieldset{
			width: 100%
		}
	}

	.qr-code{
		--w: 8rem;
	}

}

@media (min-width: 700px){
	.game-setup{
		padding-top: 4em;
	}
}
.game-main{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5em;
	flex-grow: 1;
}

.game-layout {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	padding: 2rem;
	max-width: 1200px;
	margin: auto;
}

.game-timer {
	text-align: center;
}

.game-content {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	width: 75%;
	>*{
		flex: 1; 
		text-align: center;
	}
}

.game-video-wrapper{
	width: 100%;
	height: 100%;
	display: flex;
	iframe{
		width: 100%;
	}
}

.game-map-video-wrapper{
	display: grid;
	grid-template: 1fr / 1fr 1fr;
	gap: 0.5rem;
	width: 100%;
}

.game-controls{
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: 0.5rem;
	margin-top:1rem;
}

.game-container{
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	align-items: center;
	width: 100%;
}

#result-list {
	border-radius: 10px;
	padding: 2rem;	
}

#result-list h2 {
	text-align: center;
	margin-bottom: 30px;
}

.result-list-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem;
	margin-bottom: 10px;
	border-radius: 1rem;

	background-color: rgba(255, 255, 255, 0.2);
	background-position: center;
	backdrop-filter: blur(10px);
	box-shadow: 0 2px 4px 2px rgba(0, 0, 0, .2);

	/* border-bottom: 1px solid #ddd; */
}


.result-list-item .rank,
.result-list-item .name,
.result-list-item .muted-highlight {
	flex: 1;
	text-align: center;
}

.result-list-item .rank {
	font-size: 24px;
	font-weight: bold;
}

.result-list-item .name .score {
	font-size: 18px;
}



.map {
	width: 100%;
	aspect-ratio: 16/9;
	max-height: 60vh;
}

.map-country-label{
	font-size: 16px;
}

.game-map-results{
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	font-family: "Lexend", "Mozilla Twemoji", serif;
	margin-block: auto;
	/* margin-block: auto;*/
	padding: 1rem;
	.highlight{
		color: var(--color-success);
	}
}

.next-round-button,
.finish-game-button {
	/* border: 0.2rem solid rgb(0, 93, 126); */
	/* --background-color: rgba(192, 255, 254, 0.473); */
	--color: whitesmoke;
	--background-color: var(--color-blue);

}

.youtube-wrapper{
	width:100%;
	iframe{
		height: 100%;
	}
}

.game-round-status {

	display: grid;
	
	width: 100%;
	align-items: center;
	font-size: 0.7rem;
	text-align: center;
	font-weight: bold;
	justify-content: center;
	color: #727272;

}

:where(.game-round-status){
	grid: 1fr / repeat(4, 1fr);
}

.timer {
	display: flex;
	flex-direction: column;
	font-size: 1.5rem;
}

.button-abort-game{
	--background-color: rgb(189, 0, 0);
	height: min-content;
	margin-block: auto;
	>*{
		padding-inline: 1em;
	}
}

.game-round-status-total{
	font-family: "Lexend", serif;
	font-weight: 800;
	text-shadow: 0 0.0625rem 0.125rem #1a1a1a;
}

.game-round-status-total-value{
	color: #fff;
}

.game-round-status-score,
.game-round-status-round,
.failed-guess,
.success-guess,
.muted-highlight,
.timer {
	font-family: "Lexend", serif;
	font-weight: 800;
	color: var(--color-text);
	--shadow-1: #0ff;
	--shadow-2: #227fdb;
	--shadow-3: #164b4b;
	--color-stroke: #00a6ff;
	text-shadow: 
	-2px 2px 0 var(--shadow-2),
	1px -1px 5px var(--shadow-3),
	2px -2px 10px var(--shadow-1),
	5px -5px 15px var(--shadow-1),
	5px -10px 20px var(--shadow-1),
	5px -10px 25px var(--shadow-1),
	5px -10px 30px var(--shadow-1),
	-1px 1px 5px var(--shadow-2),
	-2px 2px 10px var(--shadow-2),
	-5px 5px 15px var(--shadow-2),
	-5px 10px 20px var(--shadow-2),
	-5px 10px 25px var(--shadow-2),
	-5px 10px 30px var(--shadow-2);
}

.game-round-status-score,
.game-round-status-round{
	font-size: 2.5rem;
}

.success-guess {
	font-size: 1.5rem;
	--color-stroke: rgb(13, 186, 7);
	--shadow-1: rgb(63, 119, 0);
	--shadow-2: #44ff00;
}

.muted-highlight {
	font-size: 1.5rem;
	--color-stroke: rgb(13, 186, 7);
	--shadow-1: rgb(63, 119, 0);
	--shadow-2: #009cb7;
}


.failed-guess {
	font-size: 1.5rem;
	--color-stroke: rgb(255, 0, 128);
	--shadow-1: rgb(143, 3, 87);
	--shadow-2: #dd0000;
}

.game-end-main{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5em;
}

@media (min-width: 900px){
	.game-map-results{
		gap: 0.2em;
	}
	.next-round-button,
	.finish-game-button {
		margin-top: 0.5em;
	}
}

@media (max-width: 900px){

	.game-map-video-wrapper{
		grid-template: 1fr 1fr / 1fr;
	}

	.game-map-results{
		display: grid;
		grid-template: 1fr 1fr / 1fr 1fr 1fr;
		justify-items: center;
		grid-auto-flow: column;
		>.button-wrapper-cool{
			grid-row: span 2;
		}
		>.button-didnt-guess{
			grid-column: 3;
			grid-row: 1;
		}
		>.didnt-guess{
			grid-column: 1/3;
		}
	}

	.map{
		max-height: 35vh;
	}

}

@media (max-width: 700px){
	

	.button-abort-game{
		margin-inline: auto;
	}

	.youtube-video{
		height: calc(9 / 16 * (100vw - 2rem));
	}

	.no-timer{
		grid: 1fr / repeat(3, 1fr);
	}
}

@media (max-width: 450px){
	.game-map-results{
		grid-template: 1fr 1fr 1fr / 1fr 1fr;
		>.button-wrapper-cool{
			grid-column: 1/-1;
			grid-row: 3;
		}
	}
	
}

@font-face {
	font-family: "Mozilla Twemoji"; /* fixes emoji flags in Chrome */
	src: url("/fonts/Twemoji.Mozilla.ttf");
}
@property --color-background {
	syntax: "<color>";
	inherits: true;
	initial-value: rgb(58 232 189);
}
:root{
	--lowlight: #00000022;
	--highlight: #ffffff22;

	--color-text: #ffffff;
	--color-dropdown: #eeeeee;

	--color-success: #5ce519;
	--color-blue: #2e85cc;

	--font-family-main: "Fredoka One", Arial, "Mozilla Twemoji", 'Helvetica Neue', Helvetica, sans-serif;
	--font-family-heading: "Fredoka One", Arial, sans-serif;

	--link-link: #252222;
	--link-visited: #252222;
	--link-hover: #92e9eb;
	--link-active: #003503;
}
h1, h2, h3, h4, h5, h6 {
	text-shadow: 0 0.0625rem 0.125rem #1a1a1a;
	font-family: var(--font-family-heading);
}
/* CSS Reset */
*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
iframe {
	border: none;
}
img {
	max-width: 100%;
}
body {
	position: relative; /* Needed for the footer to be placed on the bottom of the page. */
	min-height: 100svh; /* svh means that the min height does not let you scroll up and down on mobile */

	font-family: var(--font-family-main), system-ui;
	line-height: 1.4;
	font-size: 1.2rem;
	color: var(--color-text);

	transition: --color-background 0.5s;
	background: 
		linear-gradient(
			rgb(0 132 255 / 10%), 20%, 
			rgb(12 13 36 / 10%)
		),
		radial-gradient(
			66.5% 221.21% at 136.03% -61.44%, 
			rgb(from var(--color-background) r g b / 50%) 0%, 
			rgb(from var(--color-background) r g b / 0%) 92.09%
		),
		radial-gradient(
			93.54% 126.91% at 29.15% -56.29%, 
			rgb(from var(--color-background) r g b / 80%) 0%, 
			rgb(from var(--color-background) r g b / 0%) 92.09%
		),
		radial-gradient(
			86.19% 101.84% at -17.13% -24.8%,
			#5055e5 0%,
			rgb(121 80 229 / 0%) 92.09%
		),
		#1a1a2e;
}
#root{
	min-height: inherit;
	display: flex;
	flex-direction: column;
}
main{
	padding-top: 0.5rem;
	padding-inline: 1rem;
}
hr {
    height: 0;
    border: 1px solid rgb(152, 181, 192);
    display: inline-block;
	width: 100%;
	margin-block: 0.5em;
}
.logo-svg{
	height: 1.2em;
	margin-block: auto;
}
.logo-container {
	display: inline-flex;
	align-items: baseline;
	gap: 0.2em;
	height: 100%;

	span {
		font-weight: bold;
	}
}
.console-controller-svg {
	max-width: 1.2em;
	max-height: 1.2em;
}
/* Shadow */
.shadow-minor{
	box-shadow: 0 2px 4px 2px rgba(0, 0, 0, .15);
}
.error {
	color: #f00;
	font-weight: bold;
	font-size: 0.8em;
}
.align-right {
	text-align: right;
}
.align-center {
	text-align: center;
}
.align-center-element {
	display: flex;
	justify-content: center;
	align-items: center;
}
/* links */
a:link {color: var(--link-link)}
a:visited {color: var(--link-visited)}
a:is(:hover, :focus-within) {color: var(--link-hover)}
/* need to use :is rather than :where due to it having higher specificity */
a:active {color: var(--link-active)}
/* Generic panel of clickable buttons */
.panel {
	display: flex;

	&.vertical {
		flex-direction: column;
	}

	> * { /* Anything placed directly inside a .panel (the buttons) */
		display: block;
		margin: 0;
		padding-block: 1rem;
		padding: 1rem;
		transition: background-color 0.1s;

		&:where(:hover, :focus-within) {
			background-color: var(--lowlight);
		}
	}
}
/* Generic container with a "frosted glass" kind of background */
.box {
    border-radius: 1rem;
    padding: 1rem;
    
    background-color: rgba(255, 255, 255, 0.2);
    background-position: center;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 4px 2px rgba(0, 0, 0, .15);

    width: fit-content;
}
/* Colors */
.red {
	background-color: #ee3333;
}
.green {
	background-color: #33aa33;
}
.pink {
	background-color: #eda0d5;
}
.barbie-pink{ 	
	background-color: #E0218A;
	color: #fff;
}
/* Auth page */
body:has(#auth){
	--color-background: rgb(229 180 57);
}
/* Game setup */
body:has(#gameForm){
	--color-background: rgb(229 57 134);
}
/* Leaderboard */
body:has(.leaderboard){
	--color-background: rgb(111, 229, 57);
}
/* Home page */
body:has(#home){
	--color-background: rgb(229, 57, 57);
}
.footer-earth{
	background: url("/assets/earth.webp") center 10% no-repeat;
	mask-image: 
		linear-gradient(#0000, #fff8);
	height: 25vh;
	width: 100%;
	position: absolute;
	bottom: 0;
	z-index: -1;
}
/* Media queries */
@media (max-width: 700px) {
	.hide-on-mobile{
		display: none;
	}

	body{
		font-size: 1rem;
	}

	.map{
		height: unset;
		aspect-ratio: 16/9;
	}
}
@media (max-width: 450px){
	.hide-on-small-mobile{
		display: none;
	}

	h2{
		font-size: 1.3em;
	}

	main{
		padding-inline: 0.5rem;
	}
}
/* Animation on load */
.animation-wrapper-load{
	animation: 0.2s ease-out 0s 1 loadAnimation;
}
@keyframes loadAnimation {
	0%{
		opacity: 0%;
		transform: translateY(5%);
	}
	100%{
		opacity: 100%;
		transform: translateY(0);
	}
}
.leaderboard {
	display: flex;
	justify-content: center;
	padding-bottom: 2rem;

	font-size: 1.4rem;
	font-family: "Lexend", "Mozilla Twemoji";

	table {
		border-collapse: collapse;
	}
	td {
		padding-inline: 0.5em;

		&:first-child {
			color: #aaa;
			font-weight: bolder;
			font-style: italic;
		}

		&:last-child {
			text-align: right;
		}
	}

	tr.current-user {
		background-color: var(--highlight);
		color: #ff0;
	}
}
.auth-container {
    font-family: 'Trebuchet MS';
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: larger;

    border-width: 2rem;
    padding-top: 2vh;

    input{
        width: min(25rem, 85vw);
    }

}

.need-to-be-logged-in{
    font-size: 1rem;
}

.auth-container input {
    margin-block: 0.2em;
}

.text-login-signup-switch {
    color: rgb(152, 181, 192);
    padding-top: 1rem;
    padding-bottom: 0rem;
    font-size: .67em;
    margin-block: 2.33em;
    font-weight: bold;
}

#auth hr{
    width: min(23rem, 85vw);
}

.error {
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    text-align: center;
    width: fit-content;
    padding: 0.5rem;
    color: rgb(255, 77, 77);
    border-bottom: 1px solid rgb(255, 77, 77);
}