* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: font3;
}
@font-face {
	font-family: 'Aerospace';
	src: url('Animated-Portfolio-main/Aerospace.otf') format('otf'), url('Animated-Portfolio-main/Aerospace.ttf') format('truetype'), url('Animated-Portfolio-main/AnkhSanctuary-PVK0B.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'font7';
	src: url('Animated-Portfolio-main/DamingaMedium.otf') format('otf');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'font4';
	src: url('Animated-Portfolio-main/GeographWeb-Medium.44477467.woff2') format('woff2');
}

@font-face {
	font-family: 'font2';
	src: url('Animated-Portfolio-main/AnkhSanctuary-PVK0B.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'font6';
	src: url('Animated-Portfolio-main/underwave.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'font8';
	src: url('Animated-Portfolio-main/Montserrat-Regular.2cf917c2.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'font9';
	src: url('Animated-Portfolio-main/Montserrat-SemiBold.a62d229e.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'font4';
	src: url('Animated-Portfolio-main/Solaris.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'font5';
	src: url('Animated-Portfolio-main/Glaser\ Stencil\ W01.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'font3';
	src: url('./Animated-Portfolio-main/Infusive.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'font0';
	src: url('./Animated-Portfolio-main/AquireBold-8Ma60.f61ae48e.otf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
.overlay {
	min-height: 100vh;
font-family: font0;
	text-align: center;
	padding: 1rem;
	color: white;
	background-color: #030140;
}
select,
input,
button {
	padding: 10px;
	margin: 8px;
	font-size: 1em;
}

table {
	width: 90%;
	max-width: 600px;
	margin: 20px auto;
	border-collapse: collapse;
}

th,
td {
	padding: 0;
	border: 1px solid #ddd;
	text-align: center;
}

input[type='number'] {
	padding: 0.3rem;
	outline: none;
	text-align: center;
	background-color: #b6b4f191;
	color: white;
	border: none;
}

.result,
.thank-you {
	text-align: center;
	margin-top: 20px;
}

.thank-you {
	color: lightgreen;
}

.footer {
	text-align: center;
	color: #ccc;
}

@media only screen and (max-width: 600px) {
	table,
	th,
	td {
		font-size: 0.9em;
	}

	input[type='number'] {
		width: 50px;
	}

	.logo img {
		height: 80px;
	}
}