/*
 * This file contains styles specific to the "index" view. The corresponding
 * HTML/template file is `views/index.html`.
 */

.hero {
	/* We want the hero at the top to take up a big portion of the screen,
	 * while still showing that there's more content to be found below. */
	min-height: 50vh;

	/* Put children smack-dab in the center */
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	/* Place a cool background image with a radial gradient over it, to give vibezzz and readability. */
	background-image:
		radial-gradient(circle at center, rgba(0, 0, 0, 20%) 0, rgba(0, 0, 0, 80%) 100%),
		url(/images/hero.jpeg);
	background-size: cover;

	/* TODO: Put some cool image here */
	background-color: purple;
	color: white;
}

.hero__title {
	font-size: 5rem;
	margin: 1rem;

	/* TODO: Use (subset) font for this very important text. */
}

.hero__subtitle {
	font-size: large;
	font-style: italic;
}

.achievements {
	padding: 2rem 1rem;

	/* Use a dark and twisted color to make this band stand out as a separate element. */
	background-color: #6e1818;

	/* Disperse achievements evenly horisontally */
	display: flex;
	justify-content: space-around;
	align-items: center;
}

.achievements__item {
	/* Stack the two children vertically */
	display: flex;
	flex-direction: column;
	align-items: center;
}

.achievements__number {
	/* Numbers should be big and attention grabbing */
	font-size: 2rem;
	font-style: bold;
}

.achievements__text {
}

.boxes {
	/* The columns should be aligned in the center.
	 * N.B. margin matches padding of achievements. */
	max-width: 700px;
	margin: 2rem auto;
}

.boxes__column {
	--gap: 1rem;
	width: calc(50% - var(--gap) / 2);
}

.boxes__column--right {
	float: right;
}

.boxes__column--left {
	float: left;
	margin-right: var(--gap);
}

.boxes__item {

}

.boxes__header {

}

.boxes__body-text {
	line-height: 1.5;
}

.boxes__image {
	max-width: 100%;
	height: auto;
}