:root {
	--text: rgba(255, 255, 255, 0.9);
	--background: rgb(16, 16, 16);
	
	--headerBackground: rgba(253, 253, 255, 0.1);
	--headerText: var(--text);
	--navBackground: white;

	--footerBackground: rgba(255, 255, 255, 0.1);
	--footerText: rgba(255, 255, 255, 0.5);
	
	--rose: hsl(334, 70%, 55%);
	--turquoise: hsl(167, 80%, 40%);
	
	--color1: var(--rose);
}
@font-face {
	font-family: 'Great Vibes';
	font-weight: 400;
	font-display: swap;
	font-style: normal;
	font-named-instance: 'Regular';
	src: url("fonts/great-vibes-v21-latin-regular.woff2") format("woff2");
}
@font-face {
	font-display: swap;
	font-family: 'Lora';
	font-style: normal;
	font-weight: 400;
	src: url('fonts/lora-v37-latin-regular.woff2') format('woff2');
}
@font-face {
	font-display: swap;
	font-family: 'Lora';
	font-style: normal;
	font-weight: 700;
	src: url('fonts/lora-v37-latin-700.woff2') format('woff2');
}
html {
	font-family: 'Lora';
	font-weight: 400;
}
h1, h2, h3 {
	font-family: 'Great Vibes';
	font-weight: 400;
	color: var(--color1);
}
h1 {
	font-size: 3em;
}
h2 {
	font-size: 2.5em;
}
header .logo img {
	max-height: 50px;
}
nav a {
	font-size: 18px;
}

main section {
	background-color: hsla(167, 80%, 40%, 0.15);
	color: var(--text);
	border: 1px solid hsl(167, 100%, 60%);
	box-shadow: 0 0 1em var(--turquoise);
}
@media (max-width: 600px) {
	main section {
		border-radius: 1em;
		margin-left: -0.5em;
		margin-right: -0.5em;
	}
}

/* Texte centré */
.center {
	text-align: center;
}

/* 2 colonnes */
.grid2 {
	display: grid;
	gap: 1em;
	grid-template-columns: repeat(2, 1fr);
}

/* 3 colonnes */
.grid3 {
	display: grid;
	gap: 1em;
	grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 600px) {
	.grid2, .grid3 {
		grid-template-columns: repeat(1, 1fr);
	}
}