www.iger.events/assets/style.scss

@import 'breakpoints';
@import 'colors';

* {
	box-sizing: border-box;
	font-family: sans-serif;
	margin: 0;
	padding: 0;
}

body {
	color: $color-text;
	display: flex;
	flex-direction: column;
	margin: 0 auto;
	min-height: 100vh;
	max-width: $large;

	main {
		flex-grow: 1;
	}
}

header, footer {
	padding: 0 1rem;
}

header {
	margin-top: 0.5rem;

	nav {
		font-size: 1.2rem;
	}
}

main {
	padding: 1rem;
}

footer {
	margin-bottom: 0.5rem;

	nav {
		align-items: end;

		@media screen and (min-width: $small) {
			align-items: normal;
			justify-content: end;
		}
	}
}

nav {
	display: flex;
	flex-direction: column;

	:not(:first-child) {
		margin: 0.5rem 0 0 0;
	}

	@media screen and (min-width: $small) {
		flex-direction: row;

		:not(:first-child) {
			margin: 0 0 0 1rem;
		}
	}
}

a {
	color: currentColor;
	text-decoration: none;

	&:hover {
		text-decoration: underline;
	}

	&.is-active {
		color: $color-highlight;

		&:hover {
			text-decoration: none;
		}
	}
}

:where(h1, h2, h3, h4, h5, h6, p) + :where(h1, h2, h3, h4, h5, h6, p) {
	margin-top: 1rem;
}

p + p {
	margin-top: 0.5rem;
}