*,
*::before,
*::after {
    box-sizing: border-box;
}

:target {
	scroll-margin-top: 25px;
}

html {
	scroll-behavior: smooth;
}

:root {
	--color-primary-1: #003865;
	--color-primary-2: #0061A0;
	--color-secondary-1: #0091DA;
	--color-secondary-2: #FF671F;
}

@keyframes dropDown {
	0% {
		transform: scaleX(1);
		transform: scaleY(1);
		translate: 0 -150px;
		transform-origin: center;
	}

	to {
		transform: scaleX(1);
		transform: scaleY(1);
		translate: 0 0;
	}
}

@keyframes fadeIn {
	0% {
		transform: scaleX(1);
		transform: scaleY(1);
		opacity: 0;
		transform-origin: center;
	}

	to {
		transform: scaleX(1);
		transform: scaleY(1);
		opacity: 1;
	}
}

@keyframes enlarge {
	0% {
		transform: scaleX(1);
		transform: scaleY(1);
		transform: scaleZ(1);
		transform-origin: center;
	}

	25% {
		transform: scale3d(1.125, 1.125, 1);
	}

	50% {
		transform: scale3d(1.25, 1.25, 1);
	}

	75% {
		transform: scale3d(1.375, 1.375, 1);
	}

	to {
		transform: scale3d(1.5, 1.5, 1);
	}
}

body {
	background-color: black;
	margin-top: 25px;
	margin-bottom: 25px;
}

.envy {
	--color-primary-1: #062324;
	--color-primary-2: #314448;
	--color-secondary-1: #445C5A;
	--color-secondary-2: #DBF4EA;
	--header-background: url(../images/wr-01-header.webp);
}

.veerle {
	--color-primary-1: #7E4B71;
	--color-primary-2: #9283A8;
	--color-secondary-1: #81ADCC;
	--color-secondary-2: #FF80AA;
	--header-background: url(../images/wr-02-header.webp);
}

.desmos {
	--color-primary-1: #1B407A;
	--color-primary-2: #275FB6;
	--color-secondary-1: #3072DD ;
	--color-secondary-2: #02991C;
	--header-background: url(../images/wr-03-header.webp);
}

.wrapper {
	width: 100%;
	margin: 0 auto;
	background-color: var(--color-primary-1);
	font-family: Verdana, sans-serif;
}

.main-page-heading {
	padding-bottom: 25px;
	line-height: normal;
}

header {
	color: var(--color-secondary-2);
	background-color: black;
}

.envy > .wrapper > header > h1 {
	background: var(--header-background), linear-gradient(to right, var(--color-secondary-1), var(--color-primary-2), var(--color-primary-1), black, var(--color-primary-1), var(--color-primary-2), var(--color-secondary-1));
	border-top: 5px solid var(--color-secondary-1);
	border-left: 5px solid var(--color-secondary-1);
	border-right: 5px solid var(--color-secondary-1);
}

.veerle > .wrapper > header > h1 {
	background: var(--header-background), linear-gradient(to right, var(--color-secondary-1), var(--color-primary-2), var(--color-primary-1), black, var(--color-primary-1), var(--color-primary-2), var(--color-secondary-1));
	border-top: 5px solid var(--color-secondary-1);
	border-left: 5px solid var(--color-secondary-1);
	border-right: 5px solid var(--color-secondary-1);
	color: black;
}

.desmos > .wrapper > header > h1 {
	background: var(--header-background), linear-gradient(to right, var(--color-secondary-1), var(--color-primary-2), var(--color-primary-1), black, var(--color-primary-1), var(--color-primary-2), var(--color-secondary-1));
	border-top: 5px solid var(--color-secondary-1);
	border-left: 5px solid var(--color-secondary-1);
	border-right: 5px solid var(--color-secondary-1);
	color: black;
}

header > h1 {
	font-family: Cambria, serif;
	text-align: center;
	font-weight: bold;
	line-height: 1.5em;
	text-transform: uppercase;
	height: 75px;
}

header > h1 {
	animation-duration: 1.5s;
	animation-fill-mode: forwards;
	animation-name: dropDown;
	animation-iteration-count: 1;
	transform-origin: 0 center;
	opacity: 1;
}

header > h1:target {
	animation-duration: 1.5s;
	animation-fill-mode: forwards;
	animation-name: dropDown;
	animation-iteration-count: 1;
	transform-origin: 0 center;
	opacity: 1;
}

header > p {
	font-family: Verdana, sans-serif;
	background-color: white;
	text-align: center;
	font-weight: normal;
	line-height: 1.5em;
	margin-top: -1.325em;
	width: 100%;
}

header > p > a:hover,
header > p > a:focus {
	animation-duration: 1s;
	animation-fill-mode: forwards;
	animation-name: enlarge;
	animation-iteration-count: 1;
	transform-origin: 0 center;
	opacity: 1;
}

a {
	font-family: Verdana, sans-serif;
	text-decoration: none;
	color: var(--color-primary-1);
}

a:link {
	text-decoration: none;
	color: var(--color-primary-1);
}

a:visited {
	text-decoration: none;
	color: var(--color-primary-1);
}

a:hover {
	text-decoration: underline;
	color: var(--color-primary-1);
}

a:focus {
	text-decoration: underline;
	color: var(--color-primary-1);
}

a:active {
	text-decoration: underline;
	color: var(--color-primary-2);
}

.main-page-nav {
	margin-top: -25px;
}

nav {
	background-color: white;
	margin-top: 0;
}

nav > ul {
	list-style-type: none;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-content: center;
	justify-self: center;
	gap: 2em;
	padding: 0;
}

nav > ul > li {
	text-align: center;
	line-height: 1.5em;
}

main {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-content: center;
	justify-self: center;
	gap: 5em;
	width: 100%;
}

main {
	animation-duration: 2.5s;
	animation-fill-mode: forwards;
	animation-name: fadeIn;
	animation-iteration-count: 1;
	transform-origin: 0 center;
	opacity: 1;
}

a.review-link {
	width: 100%;
}

a.review-link > .review > .review-content > p,
a.review-link > .review > .review-content > h2 {
	color: black;
	text-decoration: none;
}

a.review-link:link > .review > .review-content > p,
a.review-link:link > .review > .review-content > h2 {
	color: black;
	text-decoration: none;
}

a.review-link:visited > .review > .review-content > p,
a.review-link:visited > .review > .review-content > h2 {
	color: black;
	text-decoration: none;
}

a.review-link:hover > .review > .review-content > p,
a.review-link:hover > .review > .review-content > h2 {
	color: black;
	text-decoration: none;
}

a.review-link:focus > .review > .review-content > p,
a.review-link:focus > .review > .review-content > h2 {
	color: black;
	text-decoration: none;
}

a.review-link:active > .review > .review-content > p,
a.review-link:active > .review > .review-content > h2 {
	color: black;
	text-decoration: none;
}

.review {
	background-color: white;
	display: flex;
	flex-direction: column-reverse;
	flex-wrap: nowrap;
	justify-content: space-between;
	gap: 25px;
	width: 100%;
}

.review-content {
	background-color: white;
	width: 100%;
}

[class*="stars"]:before {
	position: relative;
	z-index: 1;
	display: block;
	float: left;
	animation-name: fadeIn;
	animation-duration: 2s;
}

[class*="stars"]:after {
	content: "✪✪✪✪✪";
	color: rgba(50, 50, 50, 0.4);
	position: absolute;
	left: 25px;
	top: 45px;
}

.stars-5:before {
	content: "✪✪✪✪✪";
	padding-right: 10px;
}

.stars-4:before {
	content: "✪✪✪✪";
	padding-right: 32px;
}

.stars-3:before {
	content: "✪✪✪";
	padding-right: 54px;
}

.stars-2:before {
	content: "✪✪";
	padding-right: 76px;
}

.stars-1:before {
	content: "✪";
	padding-right: 98px;
}

.review-content > h2 {
	font-family: Cambria, serif;
	padding-top: 25px;
	padding-right: 25px;
	padding-left: 25px;
	color: black;
	overflow: hidden;
}

.review-content > p {
	font-family: Verdana, sans-serif;
	padding-bottom: 25px;
	padding-right: 25px;
	padding-left: 25px;
	color: black;
}

.review-content > p.review-content-desc {
	line-height: 1.5em;
	font-family: Verdana, sans-serif;
	font-weight: normal;
	max-width: calc(70ch + 25px);
}

.review-content > p.review-content-desc > code {
	font-family: 'Cascadia Code', 'Cascadia Mono', Courier, monospace;
	font-weight: normal;
	background-color: black;
	color: var(--color-secondary-2);
	padding: 0.25em;
	margin: 0.125em;
	border-radius: 0.25em;
}

.review-content > p.review-content-more {
	font-family: Verdana, sans-serif;
	font-weight: bold;
}

.review-featured-image {
	padding-top: 25px;
	padding-bottom: 25px;
	padding-left: 25px;
	padding-right: 25px;
	background-color: white;
	width: 100%;
	margin: 0;
}

.review-featured-image-img {
	background-color: var(--color-primary-2);
	border: 5px solid var(--color-primary-1);
	max-width: 512px;
	width: 100%;
}

.review-featured-image > figcaption {
	font-family: Verdana, sans-serif;
	font-weight: normal;
	max-width: 512px;
}

.review-summary {
	background-color: white;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	gap: 25px;
	width: 100%;
}

.review-content-summary {
	padding-left: 25px;
}

footer > p {
	font-family: Verdana, sans-serif;
	text-align: center;
	font-weight: bold;
	line-height: 1.5em;
}

footer > p > a,
footer > p > span > a {
	text-decoration: underline;
	color: white;
}

footer > p > a:link,
footer > p > span > a:link {
	text-decoration: underline;
	color: white;
}

footer > p > a:visited,
footer > p > span > a:visited {
	text-decoration: underline;
	color: white;
}

footer > p > a:hover,
footer > p > span > a:hover {
	text-decoration: underline;
	color: white;
}

footer > p > a:focus,
footer > p > span > a:focus {
	text-decoration: underline;
	color: white;
}

footer > p > a:active,
footer > p > span > a:active {
	text-decoration: underline;
	color: var(--color-secondary-2);
}

@media screen and (min-width: 500px) {
	.review {
		display: flex;
		flex-wrap: nowrap;
		flex-direction: row;
	}

	[class*="stars"]:after {
		content: "✪✪✪✪✪";
		color: rgba(50, 50, 50, 0.4);
		position: absolute;
		left: calc(50% + 12px);
		top: 45px;
	}

	.review-content > h2,
	.review-content > p {
		padding-left: 0;
	}
	
	.review-content,
	.review-featured-image {
		width: 50%;
	}

	.review-featured-image {
		padding-right: 0;
	}

	.review-summary {
		display: block;
		margin-top: 0;
		margin-bottom: 0;
		width: 100%;
	}

	.review-summary > .review-content {
		width: 100%;
	}

	h2.review-content-summary,
	p.review-content-summary {
		padding-left: 25px;
		padding-right: 25px;
		width: 100%;
		text-align: center;
		justify-self: center;
	}
}

@media screen and (min-width: 768px) {
	.wrapper {
		width: 70%;
		max-width: 1250px;
	}

	nav > ul {
		list-style-type: none;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		align-content: flex-start;
		justify-self: center;
		gap: 2em;
	}

	main {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		align-content: flex-start;
		justify-self: center;
		gap: 5em;
		width: 100%;
	}

	footer {
		height: 50px;
	}

	footer > p {
		display: flex;
		flex-direction: row;
		align-content: flex-start;
		justify-content: center;
		justify-self: center;
		width: 100%;
		height: 100%;
		padding-left: 25px;
		padding-right: 25px;
	}

	footer > p > a:nth-child(1) {
		text-align: left;
		justify-self: flex-start;
		margin-right: auto;
		width: 33.3%;
	}

	footer > p > span:nth-child(2) {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-self: center;
		margin-right: auto;
		width: 33.3%
	}

	footer > p > span:nth-child(2) > a {
		text-align: center;
		justify-self: center;
		width: 100%;
	}

	footer > p > a:nth-child(3) {
		text-align: right;
		justify-self: flex-end;
		margin-right: auto;
		width: 33.3%;
	}

	footer > p > a:nth-child(3) > span {
		text-align: right;
	}
}