@font-face {
	font-family: "Super Legend Boy";
	src: url("./fonts/super-legend-boy.woff") format("woff");
}
@font-face {
	font-family: "Pocket Monk";
	src: url("./fonts/pocket-monk.woff") format("woff");
}
:root {
	/* Shadows */
	--shadow-color: 208deg 78% 39%;
	--shadow-elevation-low: 0.4px 0.3px 0.6px hsl(var(--shadow-color) / 0.34), 0.6px 0.6px 1px -1.2px hsl(var(--shadow-color) / 0.34), 1.5px 1.3px 2.2px -2.5px hsl(var(--shadow-color) / 0.34);
	--shadow-elevation-medium: 0.4px 0.3px 0.6px hsl(var(--shadow-color) / 0.36), 1.2px 1.1px 1.8px -0.8px hsl(var(--shadow-color) / 0.36), 3px 2.7px 4.5px -1.7px hsl(var(--shadow-color) / 0.36),
		7.3px 6.7px 11.1px -2.5px hsl(var(--shadow-color) / 0.36);
	--shadow-elevation-high: 0.4px 0.3px 0.6px hsl(var(--shadow-color) / 0.34), 2.1px 1.9px 3.2px -0.4px hsl(var(--shadow-color) / 0.34), 4px 3.6px 6.1px -0.7px hsl(var(--shadow-color) / 0.34),
		6.5px 5.9px 9.9px -1.1px hsl(var(--shadow-color) / 0.34), 10.4px 9.5px 15.8px -1.4px hsl(var(--shadow-color) / 0.34), 16.3px 14.9px 24.8px -1.8px hsl(var(--shadow-color) / 0.34),
		24.8px 22.6px 37.7px -2.1px hsl(var(--shadow-color) / 0.34), 36.5px 33.3px 55.6px -2.5px hsl(var(--shadow-color) / 0.34);

	/* Colours */
	--background-color: #29aafd;
	--primary-color: #facd0d;
	--footer-color: #e8edef;
	--heart-color: #e74c3c;

	/* Fonts */
	--font-family: "Super Legend Boy", sans-serif;
}
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
html {
	font-size: 62.5%;
}
body {
	font-size: 1.6rem;
	min-height: 100vh;
	background-color: var(--background-color);
	font-family: var(--font-family);
}
img.logo {
	margin-top: 3rem;
	max-width: 100%;
	filter: drop-shadow(0 0 3px #333199);
}
.flex__row {
	display: flex;
	flex-direction: row;
}
.flex__column {
	display: flex;
	flex-direction: column;
}
.container {
	gap: 3rem;
	align-self: center;
	align-items: center;
	width: 90%;
	flex-grow: 1;
}
svg {
	max-width: 800px;
	margin-bottom: 3rem;
}
#form {
	gap: 2rem;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}
#form > input {
	padding: 1rem;
	font-size: clamp(1rem, 4vw, 2rem);
	font-family: sans-serif;
	letter-spacing: -0.1em;
	word-spacing: -0.2em;
	border: 2px solid black;
	border-radius: 0.5rem;
	box-shadow: 2px 2px 2px black;
}
#form > button {
	align-self: stretch;
	padding: 1rem;
	font-family: "Pocket Monk", sans-serif;
	font-size: clamp(1rem, 4vw, 2rem);
	border-radius: 0.5rem;
	box-shadow: 2px 2px 2px black;
	background-color: var(--primary-color);
	color: rgb(51, 49, 153);
}
#form > button:hover {
	background-color: #f1c40f;
	cursor: pointer;
}
#form > button:active {
	background-color: #f1c40f;
	transform: scale(0.95);
}
#form > button:disabled {
	background-color: #f1c40f;
	opacity: 0.5;
}
footer {
	justify-content: center;
	align-items: center;
	background-color: var(--footer-color);
	flex-shrink: 0;
}
footer span {
	/* font-size: clamp(.1rem, 4vw, 2rem); */
}
.heart {
	color: var(--heart-color);
	margin: 0 0.5rem;
}
.small {
	height: 100px;
	transform: translatey(25px);
}
.large {
	height: 140px;
	transform: translatey(5px);
}