@charset "utf-8";
@font-face
{
	font-family: Teko;
	src: url("Teko-Variable.woff") format('woff'),
	url("Teko-Variable.ttf") format('truetype');
}
html {
	background-image: url(Images/MainPage/Background.png);
	background-attachment: fixed;
	background-size:cover;
	font-family: Teko, Cascadia Code, arial;
	padding: 0;
	margin: 0;
	border: 0;
	}
.main-box {
	margin-right: 15%;
	margin-left: 15%;
	}
.main-box p {
	background-color: black;
	background-color: rgba(0,0,0,0.5);
	backdrop-filter: blur(20px);
	border-radius: 20px;
	font-family: Teko, Cascadia Code, arial;
	color: white;
	font-size: 200%;
	position: static;
	padding:1em;
	float:left;
}
.main-box img  {
	border-radius: 2em;
}
.main-box h1 {
	font-family: Teko, Impact;
	color: white;
	background-color: skyblue;
	background-color: rgba(0,255,234,0.2);
	backdrop-filter: blur(10px); 
	text-decoration: none;
	text-shadow:0px 0px 0.5em white;
	text-align: center;
	font-size:clamp(1em,8em,15em);
	padding:20px;
	border:0;
	border-radius: 40px;
}
.threebox {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 1em;
	margin-top: 0;
}
.threebox p{
  margin-left: 0.25em;
  margin-right: 0.25em;
  font-size: 1.5em;
  padding: 2em;
  text-align: center;
}
.threebox p:hover {
  color:skyblue;
}
.threebox p img {
	max-height:100%;
	width:auto;
	border-radius: 20px;
}
img {
	
	float: none;
	width: auto;
	max-width: 100%;
	position: static;
}
nav {
	margin-left:2%;
	margin-right: 98%;
	font-family: Teko, Cascadia Code, arial;
	color: white;
	position: fixed;
	text-align: center;
	background-color: rgba(0,0,0,0.75);
	border-radius: 30px;
	float: left;
	top: auto;
}
nav h1 {
font-size: clamp(0.1em, 3vw, 3vw);
padding:0.25em;
margin:0;
border:0;
}
nav ul {
	font-size: clamp(1vw,1.5vw, 2.5vw);
	padding:1em;
	list-style: none;
	
}
nav hr {
	border-radius: 5px;
	max-width:80%;
	height:auto;
	background-color: white;
}
nav ul li {
	margin-bottom: 1em;
}
nav ul a {
	color:deepskyblue;
	font-stretch:ultra-expanded;
}
nav ul a:hover {
	color:skyblue;
}
nav ul img {
max-height:100%;
width: clamp(1vw,2.5vw, 2.5vw);
}