@import url('root.css');
@import url('header.css');
@import url('footer.css');

* {
	margin: 0;
	padding: 0;
}

header {
	grid-area: header;
}

main {
	grid-area: main;
}

footer {
	grid-area: footer;
}

body {
	font-family: 'Roboto', sans-serif;
	width: 100dvw;
	height: 100dvh;
	display: grid;
	grid-template-rows: auto 1fr auto;
	grid-template-areas:
		'header'
		'main'
		'footer';
}

main {
	max-width: 70vw;
	justify-self: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

#mainLogo {
	width: 80%;
}

#mainLogo img {
	width: 100%;
}

h1,
h2 {
	font-size: 2rem;
	margin: 0 0 1rem 0;
}

p {
	text-align: justify;
}

main span {
	display: block;
	margin-bottom: var(--span-margin);
}

hr {
	width: 100%;
	margin: 1rem 0;
}

@media screen {
	/* Phones */
	@media (max-width: 768px) {
		main {
			max-width: 90vw;
		}

		#mainLogo {
			width: 100%;
		}
	}

	/* Tablets */
	@media (min-width: 768px) and (max-width: 1200px) {
		main {
			max-width: 80vw;
		}
	}
}