main.css

:root {
	--main-color: #3273dc;
	--main-color-rgb: 50, 115, 220; /* Same as above but stored as a pure color values */
}

body {
	font-family:
		-apple-system,
		BlinkMacSystemFont,
		'Segoe UI',
		Roboto,
		Helvetica,
		Arial,
		sans-serif,
		'Apple Color Emoji',
		'Segoe UI Emoji',
		'Segoe UI Symbol';
}

a {
	color: var(--main-color);
	text-decoration: none;
}

.has-nice-link a:not(.button):not(.no-underline) {
	box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
}

.has-nice-link a:not(.button):not(.no-underline):hover {
	box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.3);
}

.is-centered {
	margin-left: auto;
	margin-right: auto;
}

.hero-body > .container {
	margin-bottom: 100px;
}

#app-icon {
	display: none;
	margin: 0 auto;
	margin-bottom: 20px;
}

.ios-app #app-icon {
	border-radius: 30px;
	filter: drop-shadow(0px 1px 3px #D5D5D5);
}

h1,
h2,
#additional-info,
p {
	text-align: center;
}

#additional-info {
	display: none;
	padding-bottom: 20px;
}

#feedback-form {
	padding-top: 20px;
}

#feedback-form .required:invalid {
	border-color: #ff3860;
}

/* Hack to override the form input border color, since I can't use the SASS variables */
.input.is-active,
.input.is-focused,
.input:active,
.input:focus,
.textarea.is-active,
.textarea.is-focused,
.textarea:active,
.textarea:focus {
	border-color: var(--main-color);
	box-shadow: 0 0 0 0.125em rgba(var(--main-color-rgb), 0.25);
}

/* For the imported navbar */
#nav-container {
	min-height: 52px;
	opacity: 0;
	transition: 0.8s ease-in-out;
}
#nav-container.visible {
	opacity: 1;
}