style.css

:root {
	/* theme colors */
}

/* ### element styles ### */
* {
}

html {
	scroll-behavior: smooth;
}

body {
	background: linear-gradient(
		180deg,
		#03032b,
		#202057,
		#c27278,
		#f18475
	) !important;
	color: #fff !important;
	margin: 0;
	padding: 0;
	font-family: "Inter", sans-serif;
	transition: ease 0.2s;
}

main {
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

footer {
	width: 100%;
	background: rgba(12, 12, 12, 0.5);
	padding: 10px 0;
	position: fixed;
	bottom: 0;
}

/* ### class styles ### */
.hidden {
	display: none;
}

.bold {
	font-weight: bold !important;
}

/* ### page styles ### */

#howManyDaysForm {
}

#howManyDaysForm input {
	transition: 0.2s ease;
	border: none;
}

#howManyDaysForm input:focus-visible {
	background-color: #a1a1a1;
	color: #000;
}

#submit {
}

#result {
}

#result p {
	margin: 12px 0 0 0;
	font-weight: bold;
}

#days {
}

#days-label {
}

#years {
}

#years-label {
}