.form {

	ul {
		position: relative;
		display: flex;
		flex-direction: row;
		gap: 1rem;
		width: 100%;

		li {
			&:first-of-type {
				width: calc( (100% / 3 * 1) - 1rem );
			}
			&:last-of-type {
				width: calc( (100% / 3 * 2) );
			}
		}
	}

	input {
		border: 1px solid var(--primary-dark);
		border-radius: 0.5rem;
		padding: 0.5rem 2rem;
		font-size: 1.25rem;
		width: 100%;
	}
}

.button {
	margin-top: 2rem;
	color: var(--background);
	background: var(--secondary);

	&:hover {
		background: var(--secondary-bright);
	}
}

.results {
	margin-top: 4rem;
	min-height: 200px;
	width: 100%;
	border-radius: 1rem;
	border: 1px solid var(--primary-dark);
	background-color: var(--background-dim);
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 4rem;

	svg {
		pointer-events: all;
		user-select: all;
	}
}