html, body {
	margin: 0;
	font-family: "Kanit", sans-serif;
	color: white;
	background-color: #0d1117;
}
body {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
.header {
	height: 30px;
	padding: 15px;
	align-items: center;
	display: flex;
}
.header-logo {
	height: 30px;
}
.header-link-logo {
	margin-right: 15px;
	height: 30px;
}
.header-link {
	text-decoration: none;
	color: #b1b1b1;
	margin: 0px 10px;
}
.header-link-last {
	margin-left: auto;
}

.footer {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	width: calc(100% - 100px);
	padding: 20px 50px 20px 50px;
	background-color: #30363d;
}
.footer-logo {
	height: 30px;
}
.footer-logohref {
	margin: 0;
	height: 30px;
	width: fit-content;
}
.footer-logotext {
	width: fit-content;
	font-size: 13px;
	text-align: center;
}
@media only screen and (max-width: 499px) {
	.footer {
		width: calc(100% - 40px);
		padding: 10px 20px 20px 20px;
	}
}

.underline {
	text-decoration: none;
	position: relative;
}

.underline:after {
	position: absolute;
	content: '';
	height: 2px;
	bottom: -5px;
	margin: 0 auto;
	left: 0;
	right: 0;
	width: 100%;
	opacity: 0;
	background: #ffffff;
}

.underline-active:after {
	opacity: 1;
}

.underline:hover:after {
	width: 100%;
	opacity: 1;
}

.trophy-text {
	display: flex;
	align-items: center;
	margin: 3px 10px;
}
.trophy {
	margin-right: 3px;
}
.trophy-gold {
	filter: invert(90%) sepia(19%) saturate(6218%) hue-rotate(354deg) brightness(94%) contrast(110%);
}
.trophy-silver {
	filter: invert(91%) sepia(0%) saturate(254%) hue-rotate(159deg) brightness(85%) contrast(89%);
}
.trophy-bronze {
	filter: invert(76%) sepia(17%) saturate(7498%) hue-rotate(338deg) brightness(86%) contrast(85%);
}
.trophy-red {
	filter: invert(18%) sepia(93%) saturate(7485%) hue-rotate(0deg) brightness(86%) contrast(85%);
}

.contact-img {
	width: 30px;
	height: 30px;
	margin-right: 5px;
}
.contact-link {
	text-decoration: none;
	color: white;
	margin: 5px 10px;
	font-size: 20px;
	display: flex;
	align-items: center;
	text-align: center;
	justify-content: center;
}

.showcase {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-bottom: 100px;
}
.showcase-left {
	width: 50%;
	padding-left: 2%;
	padding-right: 2%;
}
.showcase-right {
	width: 50%;
	border-top-left-radius: 45px;
	border-bottom-left-radius: 45px;
	object-fit: cover;
	max-height: 500px;
}
@media only screen and (max-width: 600px) {
	.showcase {
		flex-direction: column;
	}
	.showcase-left {
		width: 85%;
	}
	.showcase-right {
		width: 100%;
		border-radius: 0;
		margin-top: 20px;
	}
}

h1 {
	font-weight: 400;
	font-size: 75px;
	display: inline-block;
	position: relative;
	padding: 10px;
	margin-bottom: 80px;
}

h2 {
	font-weight: 400;
	font-size: 50px;
	display: inline-block;
	position: relative;
	margin-bottom: 20px;
}

@media only screen and (max-width: 800px) {
	h1 {
		font-size: 35px;
		line-height: 2;
	}
	.mail {
		font-size: 40px;
	}
	.contact-link {
		font-size: 20px;
	}
	.underline-h-h1 {
		margin-bottom: 10px;
	}
}

@media only screen and (max-width: 600px) {
	h1 {
		font-size: 30px;
	}
	.mail {
		font-size: 20px;
	}
	.contact-link {
		font-size: 15px;
	}
	.header-link {
		font-size: 10px;
	}
}

@media only screen and (max-width: 400px) {
	h2 {
		font-size: 25px;
	}
	.sponsor-logo {
		margin-top: 10px;
	}
}

.word {
	position: relative;
	display: inline-block;
}

.underline-h {
	position: absolute;
	bottom: -10px;
	left: 0;
	height: 5px;
	width: 0;
	transition: width 0.5s ease-in-out;
}

.blue {
	background-color: #568aff;
}

.yellow {
	background-color: #ffc163;
}

p,
span {
	font-size: larger;
	font-weight: 300;
}

.contact {
	width: 100%;
	text-align: center;
	display: flex;
	flex-direction: column;
	margin-bottom: 30px;
}
.contact-links {
	display: flex;
	justify-content: center;
}

@media only screen and (max-width: 350px) {
	.contact-links {
		flex-direction: column;
	}
	.header-link {
		display: none;
	}
	.sponsor-logo {
		width: 100%;
	}
}

@media only screen and (max-width: 200px) {
	.mail {
		font-size: 15px;
	}
	.footer-logotext {
		display: none;
	}
}