:root{
	--border-width: 1px;
}

@media(orientation:portrait){
	:root{
		--input-border-width: 10px;
	}
	body{
		text-shadow: 0.15vh 0.15vh 0.3vh #00ff01;
	}
	h1{
		font-size: 5rem;
		text-shadow: 0.15vh 0.15vh 0.3vh #00ff01;
		-webkit-text-stroke: 0.05vh black;
	}
	h2{
		font-size: 3.5rem;
		z-index: 999;
		border-radius: 100%;
		text-shadow: 0.15vh 0.15vh 0.3vh #00ff01;
		-webkit-text-stroke: 0.05vh black;
	}
	span{
		width: 75vw;
	}
	#heads span{
		-webkit-text-stroke: 0.03vh black;
	}
	hr{
		width: 70vw;
		border-top: 0.3vh solid white;
		box-shadow: 0 0 0.2vh 0.2vh #00ff01;
	}
	#text p{
		-webkit-text-stroke: 0.05vw black;
	}
}

@media(orientation:landscape){
	:root{
		--input-border-width: 5px;
	}
	body{
		text-shadow: 0.15vw 0.15vw 0.3vw #00ff01;
	}
	h1{
		font-size: 2rem;
		text-shadow: 0.15vw 0.15vw 0.3vw #00ff01;
		-webkit-text-stroke: 0.05vw black;
	}
	h2{
		font-size: 1.4rem;
		text-shadow: 0.15vw 0.15vw 0.3vw #00ff01;
		-webkit-text-stroke: 0.05vw black;
	}
	hr{
		width: 70vh;
		border-top: 0.3vw solid white;
		box-shadow: 0 0 0.2vw 0.2vw #00ff01;
	}
	span{
		width: 75vh;
	}
	#text p{
		-webkit-text-stroke: 0.025vw black;
	}
	#heads span{
		-webkit-text-stroke: 0.025vw black;
	}
}

body{
	font-family: 'Lato Semi Bold';
	-webkit-touch-callout: none;
	-webkit-user-select: none;
}
span{
	text-align: center;
}
a{
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	text-decoration: none;
	color: white;
}
@font-face{
	font-family: 'Lato Semi Bold';
	src: url('../fonts/Lato-Semibold.ttf');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
@keyframes moveBackground{
	from{ 
		background-size: 100% 100%;
	}
	to{ 
		background-size: 130% 130%;
	}
}
dialog{
	color: white;
	background: rgba(0, 0, 0, 0.85);
}
dialog::backdrop{
	background: rgba(0, 0, 0, 0.4);
}
#background{
	background-image: url(../images/background.webp);
	background-color: black;
	color: white;
	animation: moveBackground 15s ease-in-out infinite alternate;
}
#heads{
	display: flex;
	align-items: center;
	flex-direction: column;
}
#ends{
	display: flex;
	align-items: center;
	flex-direction: column;
}
#info{
	display: flex;
	flex-direction: column;
	align-items: center;
}
#avatar{ 
	position: absolute;
	pointer-events: none;
	border-radius: 100%;
	margin: auto;
	aspect-ratio: 1 / 1;
	top: 3.5vh;
	right: 0;
	left: 0;
}
#text p{
	text-align: left;
}
#icons img{
	border-radius: 100%;
	aspect-ratio: 1 / 1;
	background-color: black;
}