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






/*********************/
/* CUSTOM PROPERTIES */
/*********************/
:root {
	/* startje */
	--color-text: #111;
	--color-background: #eee;
}





/****************/
/* JOUW STYLING */
/****************/

/* SECTION 1 */

/* eerste section algemene styling */
main section:first-of-type {
	background-image: url(../images/banner.png);
	background-size: cover;
	background-position: center;
	display: grid;
	padding: 1rem;
	grid-template-rows: 1fr auto auto auto auto .5fr .5fr 1fr 1fr .5fr .5fr;
	grid-template-columns: repeat(4, auto);
}

main section:first-of-type h1 {
	color: var(--color-white);
	font-size: 2.5rem;
	text-align: center;
	grid-column: 1 / 5;
	grid-row-start: 2;
	font-weight: var(--font-weight-h);
}

main section:first-of-type p:first-of-type {
	grid-column: 1 / 5;
	grid-row: 3 / 4;
	text-align: center;
	color: var(--color-white);
	font-size: var(--font-size-p);
}

/* Download latest button algemene styling */
main section:first-of-type>a:first-of-type {
	grid-column: 1 / 5;
	grid-row-start: 5;
	justify-self: center;

	display: grid;
	grid-template-columns: 3fr 1fr;
	align-items: stretch;

	background: var(--color-white);
	color: var(--dwnl-btn-txt-color);
	border-radius: .94rem;
	font-weight: var(--font-weight-btns);
	text-decoration: none;
	text-align: center;
	align-items: center;
	width: fit-content;
	max-width: 100%;
	box-shadow: 0px 0px 0px rgba(3, 7, 18, 0.01),
		/* Bron code van derde: smoothshadows.com */
		0px 0px 1px rgba(3, 7, 18, 0.02),
		0px 0px 2px rgba(3, 7, 18, 0.02),
		0px 0px 4px rgba(3, 7, 18, 0.03),
		0px 0px 6px rgba(3, 7, 18, 0.04),
		0px 0px 9px rgba(3, 7, 18, 0.05),
		0px 0px 12px rgba(3, 7, 18, 0.06),
		0px 0px 15px rgba(3, 7, 18, 0.06),
		0px 0px 19px rgba(3, 7, 18, 0.07),
		0px 0px 24px rgba(3, 7, 18, 0.08);
}

main section:first-of-type>a:first-of-type:hover {
	filter: brightness(var(--hover-brightness));
}

main section:first-of-type>a:first-of-type:focus {
	outline: var(--focus-size) solid var(--color-white);
}

main section:first-of-type>a:first-of-type:active {
	filter: brightness(var(--active-brightness));
}

/* Download latest button styling blauwe gedeelte */
main section:first-of-type>a:first-of-type em {
	background: var(--ltst-btn-color);
	color: var(--color-white);
	padding: 1.2rem 1rem;
	border-radius: 0 .6rem .6rem 0;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

/* Styling what's new button */
main section:first-of-type>a:nth-of-type(2) {
	grid-column: 2 / 4;
	grid-row-start: 7;
	justify-self: center;

	background-color: var(--wtsn-btn-color);
	padding: 1em 3.1em;
	max-width: 100%;
	border-radius: .93rem;
	color: var(--color-white);
	text-decoration: none;
	text-align: center;
	font-size: 1.12rem;
	font-weight: var(--font-weight-btns);
	box-shadow: 0px 0px 0px rgba(3, 7, 18, 0.01),
		/* Bron code van derde: smoothshadows.com */
		0px 0px 1px rgba(3, 7, 18, 0.02),
		0px 0px 2px rgba(3, 7, 18, 0.02),
		0px 0px 4px rgba(3, 7, 18, 0.03),
		0px 0px 6px rgba(3, 7, 18, 0.04),
		0px 0px 9px rgba(3, 7, 18, 0.05),
		0px 0px 12px rgba(3, 7, 18, 0.06),
		0px 0px 15px rgba(3, 7, 18, 0.06),
		0px 0px 19px rgba(3, 7, 18, 0.07),
		0px 0px 24px rgba(3, 7, 18, 0.08);
}

main section:first-of-type>a:nth-of-type(2):hover {
	filter: brightness(var(--hover-brightness));
}

main section:first-of-type>a:nth-of-type(2):focus {
	outline: var(--focus-size) solid var(--color-white);
}

main section:first-of-type>a:nth-of-type(2):active {
	filter: brightness(var(--active-brightness));
}

/* Looking for Godot 3 etc tekst algemene styling */
main section:first-of-type p:nth-of-type(2) {
	grid-column: 1 / 5;
	grid-row-start: 8;
	justify-self: center;
	text-align: center;
	color: var(--color-white);
	font-size: var(--font-size-p);
}

/* Looking for Godot 3 etc link styling */
main section:first-of-type p:nth-of-type(2) a {
	color: var(--color-white);
}

main section:first-of-type p:nth-of-type(2) a:hover {
	color: var(--a-lnks-hover-color);
}

main section:first-of-type p:nth-of-type(2) a:focus {
	outline: var(--focus-size) solid var(--color-white);
}

main section:first-of-type p:nth-of-type(2) a:active {
	color: var(--a-active-color);
}

/* Author of background image styling (Polychroma) */
main section:first-of-type>a:nth-of-type(3) {
	grid-column: 2 / 4;
	grid-row-start: 10;
	justify-self: center;
	color: var(--color-white);
	font-size: var(--font-size-p);
	background-color: var(--auth-bckg-color);

	display: flex;
	align-items: center;
	justify-content: center;
	padding: .2rem;
	border-radius: .31rem;
	opacity: .5;
	cursor: pointer;
}

main section:first-of-type>a:nth-of-type(3):hover {
	background-color: var(--auth-bckgrnd-hover-color);
}

main section:first-of-type>a:nth-of-type(3):focus {
	outline: var(--focus-size) solid var(--color-white);
}

main section:first-of-type>a:nth-of-type(3):active {
	background-color: var(--aut-backgrnd-active-color);
}


@media (min-width: 900px) {
	/* Padding in de gehele section */
	main section:first-of-type {
		padding-left: 2rem;
	}

	/* Gridverdeling section 1 groot scherm */
	main section:first-of-type {
		grid-template-rows: 1fr 1fr auto auto 1fr auto .5fr .5fr 1fr 1fr .5fr .5fr;
		grid-template-columns: .5fr 1fr 1fr 1fr 1fr
	}

	main section:first-of-type h1 {
		font-size: 3.75rem;
		text-align: start;
		grid-column: 2 / 5;
		grid-row-start: 3;
	}

	main section:first-of-type p:first-of-type {
		grid-column: 2 / 5;
		grid-row: 4 / 5;
		text-align: start;
	}

	/* Download Latest Version Button */
	main section:first-of-type>a:first-of-type {
		grid-column: 2 / 3;
		grid-row-start: 6;
		border-radius: .63rem;
		justify-self: start;
	}

	/* What's New Button */
	main section:first-of-type>a:nth-of-type(2) {
		grid-column: 3 / 4;
		grid-row-start: 6;
		justify-self: start;
	}

	main section:first-of-type p:nth-of-type(2) {
		grid-column: 2 / 4;
		grid-row-start: 8;
		justify-self: start;
	}

	/* Author of background image styling (Polychroma) */
	main section:first-of-type>a:nth-of-type(3) {
		grid-column: 5 / 6;
		grid-row-start: 11;
		justify-self: center;
		border-radius: .63rem;
		padding: .3rem;
		font-size: 1.13rem;
	}
}


/* SECTION 2 */

main section:nth-of-type(2) h2 {
	font-size: var(--font-size-h2);
	color: var(--main-txt-color);
	font-weight: var(--font-weight-h);
}

main section:nth-of-type(2)>ul {
	display: grid;
	grid-template-rows: auto .5fr 1fr 1fr;
	list-style-type: "";
	padding: .5rem;
	gap: 3rem;
	margin: 0;
}

/* Styling alle items */
main section:nth-of-type(2) a {
	text-decoration: none;
	color: inherit;
	display: inline-block;
}

main section:nth-of-type(2) a:hover {
	filter: brightness(var(--hover-brightness-brighter));
}

main section:nth-of-type(2) a:focus {
	outline: var(--focus-size) solid var(--blue-focus);
}

main section:nth-of-type(2) a:active {
	filter: brightness(var(--active-brightness));
}

/* Gridverdeling alle items */
main section:nth-of-type(2) article {
	display: grid;
	grid-template-rows: auto auto auto auto;
	gap: 1.5rem;
	align-items: start;
}

/* H3 styling alle items */
main section:nth-of-type(2) article h3 {
	color: var(--main-txt-color);
	font-size: 1.19rem;
	margin: 0;
	font-weight: var(--font-weight-h);
	grid-row-start: 2;
}

/* P styling alle items */
main section:nth-of-type(2) article p {
	font-size: var(--font-size-p);
	color: var(--scnd-txt-color);
	grid-row-start: 3;
}

/* Image styling alle items */
main section:nth-of-type(2) article img {
	width: 100%;
	grid-row-start: 1;
	border-radius: .44rem;
	box-shadow: 0px 0px 0px rgba(3, 7, 18, 0.01),
		/* Bron code van derde: smoothshadows.com */
		0px 0px 1px rgba(3, 7, 18, 0.02),
		0px 0px 2px rgba(3, 7, 18, 0.02),
		0px 0px 4px rgba(3, 7, 18, 0.03),
		0px 0px 6px rgba(3, 7, 18, 0.04),
		0px 0px 9px rgba(3, 7, 18, 0.05),
		0px 0px 12px rgba(3, 7, 18, 0.06),
		0px 0px 15px rgba(3, 7, 18, 0.06),
		0px 0px 19px rgba(3, 7, 18, 0.07),
		0px 0px 24px rgba(3, 7, 18, 0.08);
}

/* Datum indeling alle items */
main section:nth-of-type(2) article time {
	grid-row-start: 4;
	color: var(--scnd-txt-color);
}

/* Datum overschrijving eerste item */
main section:nth-of-type(2) li:first-of-type article:first-of-type time {
	grid-column-start: 1;
	grid-row-start: 4;
}

/* More news button styling */
main section:nth-of-type(2) ul li:last-of-type a {
	background-color: var(--main-btn-color);
	color: var(--main-txt-color);
	padding: 1em 2em;
	max-width: 100%;
	border-radius: .7rem;
	text-decoration: none;
	font-size: 1.12rem;
	font-weight: var(--font-weight-btns);
	opacity: 1;
	box-shadow: 0px 0px 0px rgba(3, 7, 18, 0.01),
		/* Bron code van derde: smoothshadows.com */
		0px 0px 1px rgba(3, 7, 18, 0.02),
		0px 0px 2px rgba(3, 7, 18, 0.02),
		0px 0px 4px rgba(3, 7, 18, 0.03),
		0px 0px 6px rgba(3, 7, 18, 0.04),
		0px 0px 9px rgba(3, 7, 18, 0.05),
		0px 0px 12px rgba(3, 7, 18, 0.06),
		0px 0px 15px rgba(3, 7, 18, 0.06),
		0px 0px 19px rgba(3, 7, 18, 0.07),
		0px 0px 24px rgba(3, 7, 18, 0.08);
}

main section:nth-of-type(2) ul li:last-of-type a:focus {
	outline: var(--focus-size) solid var(--blue-focus);
}

/* Hulp Bron: Stackoverflow @Media min-width & max-width */
@media (min-width: 500px) and (max-width: 1200px) {


	main section:nth-of-type(2)>ul {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr;
	}
}

@media (max-width: 900px) {

	main section:nth-of-type(2) a:has(article) {
		width: 100%;
	}

	/* Image styling overschrijving eerste item */
	main section:nth-of-type(2) li:first-of-type article:first-of-type img {
		width: 100%;
		height: auto;
		max-width: 29rem;
	}
}

@media (min-width: 1200px) {

	main section:nth-of-type(2) {
		padding: 1rem;
	}

	main section:nth-of-type(2)>ul {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr 1fr;
		grid-column-gap: 3rem;
		grid-row-gap: 0;
	}

	main section:nth-of-type(2) li:first-of-type {
		grid-row: 1 / 4;
	}

	/* H3 styling alle items */
	main section:nth-of-type(2) article h3 {
		grid-column-start: 2;
		grid-row-start: 1;
	}

	/* P styling alle items */
	main section:nth-of-type(2) article p {
		display: block;
		grid-column-start: 2;
		grid-row-start: 2;
		margin: 0;
	}

	/* Image styling alle items */
	main section:nth-of-type(2) article img {
		width: 10rem;
		height: 5.63rem;
		justify-self: start;
		grid-row: 1 / 3;
	}

	/* Datum indeling alle items */
	main section:nth-of-type(2) article time {
		grid-column-start: 2;
		grid-row-start: 3;
	}

	/* Gridverdeling overschrijving eerste item */
	main section:nth-of-type(2) li:first-of-type article {
		grid-template-rows: 1fr .5fr .25fr .45fr;
	}

	/* H3 overschrijving eerste item */
	main section:nth-of-type(2) li:first-of-type article:first-of-type h3 {
		font-size: 1.4rem;
		grid-row-start: 3;
		grid-column-start: 1;
		max-width: 37ch;
	}

	/* P overschrijving eerste item */
	main section:nth-of-type(2) li:first-of-type article:first-of-type p {
		grid-row-start: 4;
		max-width: 50ch;
		grid-column-start: 1;
		align-self: center;
	}

	/* Image styling overschrijving eerste item */
	main section:nth-of-type(2) li:first-of-type article:first-of-type img {
		width: 36.6rem;
		height: 20.6rem;
		justify-self: start;
		max-width: none;
	}

	/* Datum overschrijving eerste item */
	main section:nth-of-type(2) li:first-of-type article:first-of-type time {
		grid-column-start: 1;
		grid-row-start: 5;
	}
}


/* SECTION 3 */

/* Padding gehele section */
main section:nth-of-type(3) {
	padding-top: 2rem;
}

main section:nth-of-type(3) h2 {
	font-size: var(--font-size-h2);
	color: var(--main-txt-color);
	font-weight: var(--font-weight-h);
}

main section:nth-of-type(3)>p {
	font-size: var(--font-size-p);
	color: var(--scnd-txt-color);
}

/* Grid verdeling van alle items */
main section:nth-of-type(3) article {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(4, auto);
}

/* Indeling alle icons */
main section:nth-of-type(3) article img {
	grid-row-start: 1;
	grid-column: 1 / 4;
	justify-self: center;
}

/* Indeling en styling alle H3's */
main section:nth-of-type(3) article h3 {
	grid-row-start: 2;
	grid-column-start: 2;
	justify-self: center;
	font-size: var(--font-size-h3);
	font-weight: var(--font-weight-h);
	color: var(--main-txt-color);
}

/* Indeling en styling alle P's */
main section:nth-of-type(3) article p {
	grid-row-start: 3;
	grid-column: 1 / 4;
	text-align: center;
	font-size: var(--font-size-p);
	color: var(--scnd-txt-color);
	padding-left: 1rem;
	padding-right: 1rem;
	line-height: 2rem;
	max-width: 52ch;
	justify-self: center;
}

/* Indeling en styling alle Learn More linkjes */
main section:nth-of-type(3) article a {
	grid-row-start: 4;
	grid-column-start: 2;
	justify-self: center;
	text-align: center;
	background-color: var(--main-btn-color);
	color: var(--lrn-mr-btn-color);
	padding: 1em 2em;
	width: 11rem;
	max-height: 3.2rem;
	border-radius: .7rem;
	text-decoration: none;
	font-weight: var(--font-weight-btns);
	box-shadow: 0px 0px 0px rgba(3, 7, 18, 0.01),
		/* Bron code van derde: smoothshadows.com */
		0px 0px 1px rgba(3, 7, 18, 0.02),
		0px 0px 2px rgba(3, 7, 18, 0.02),
		0px 0px 4px rgba(3, 7, 18, 0.03),
		0px 0px 6px rgba(3, 7, 18, 0.04),
		0px 0px 9px rgba(3, 7, 18, 0.05),
		0px 0px 12px rgba(3, 7, 18, 0.06),
		0px 0px 15px rgba(3, 7, 18, 0.06),
		0px 0px 19px rgba(3, 7, 18, 0.07),
		0px 0px 24px rgba(3, 7, 18, 0.08);
}

main section:nth-of-type(3) article a:hover {
	filter: brightness(var(--hover-brightness-brighter));
}

main section:nth-of-type(3) article a:focus {
	outline: var(--focus-size) solid var(--color-white);
}

main section:nth-of-type(3) article a:active {
	filter: brightness(var(--active-brightness));
}

@media (min-width: 650px) {

	/* Grid verdeling gehele section */
	main section:nth-of-type(3) {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}
}


@media (min-width: 900px) {

	/* Grid verdeling gehele section */
	main section:nth-of-type(3) {
		grid-template-columns: repeat(3, 1fr);
	}

	main section:nth-of-type(3) h2 {
		grid-row-start: 1;
	}

	main section:nth-of-type(3)>p {
		grid-row-start: 2;
		grid-column: 1 / 3;
	}

	main section:nth-of-type(3) article {
		grid-row-start: 3;
	}
}


/* SECTION 4 */

/* Padding voor de gehele section */
main section:nth-of-type(4) {
	padding: 2rem;
}

main section:nth-of-type(4) h2 {
	font-size: var(--font-size-h2);
	color: var(--main-txt-color);
	font-weight: var(--font-weight-h);
}

main section:nth-of-type(4) h3 {
	font-size: var(--font-size-spnsr-h3);
	color: var(--main-txt-color);
	font-weight: 400;
}

/* Alle lijsten in de section */
main section:nth-of-type(4) ul {
	list-style-type: "";
	display: flex;
	flex-direction: column;
	justify-content: start;
	gap: 3rem;
	margin: 0;
	padding: 0;
}

/* Alle linkjes met logo op de pagina */
/* Hulp bron: W3schools CSS :has() Pseudo-class */
main section:nth-of-type(4) a:has(img) {
	display: inline-flex;
	padding: 1rem;
	width: 90%;
	border-radius: .5rem;
	background: var(--spnsr-btn-color);
	align-items: center;
	justify-content: center;
	box-shadow: 0px 0px 0px rgba(3, 7, 18, 0.01),
		/* Bron code van derde: smoothshadows.com */
		0px 0px 1px rgba(3, 7, 18, 0.02),
		0px 0px 2px rgba(3, 7, 18, 0.02),
		0px 0px 4px rgba(3, 7, 18, 0.03),
		0px 0px 6px rgba(3, 7, 18, 0.04),
		0px 0px 9px rgba(3, 7, 18, 0.05),
		0px 0px 12px rgba(3, 7, 18, 0.06),
		0px 0px 15px rgba(3, 7, 18, 0.06),
		0px 0px 19px rgba(3, 7, 18, 0.07),
		0px 0px 24px rgba(3, 7, 18, 0.08);
}

main section:nth-of-type(4) a:has(img):hover {
	filter: brightness(var(--hover-brightness-brighter));
}

main section:nth-of-type(4) a:has(img):focus {
	outline: var(--focus-size) solid var(--blue-focus);
}

main section:nth-of-type(4) a:has(img):active {
	filter: brightness(var(--active-brightness));
}

/* Logo van Patron sponsoren */
main section:nth-of-type(4)>a:first-of-type img {
	width: 90%;
}

/* Logo van Corporate Platinum sponsoren */
main section:nth-of-type(4) ul:first-of-type img {
	width: 80%;
}

/* Logo van Corporate Gold sponsoren */
main section:nth-of-type(4) ul:nth-of-type(2) img {
	width: 60%;
}

/* Logo van Corporate Silver sponsoren */
main section:nth-of-type(4) ul:nth-of-type(3) img {
	width: 40%;
}

main section:nth-of-type(4) p {
	color: var(--scnd-txt-color);
	font-size: var(--font-size-p);
	font-weight: 500;
	padding-top: .5rem;
	padding-bottom: 1rem;
}

main section:nth-of-type(4) p a {
	color: var(--lnk-txt-color);
}

main section:nth-of-type(4) p a:hover {
	color: var(--lnk-txt-hover-color);
}

main section:nth-of-type(4) p a:focus {
	outline: var(--focus-size) solid var(--blue-focus);
}

main section:nth-of-type(4) p a:active {
	color: var(--lnk-active-color);
}

/* Donate Knop */
main section:nth-of-type(4)>a:last-of-type {
	background-color: var(--main-btn-color);
	color: var(--main-txt-color);
	padding: 1em 2em;
	max-width: 100%;
	border-radius: .7rem;
	text-decoration: none;
	font-size: 1.12rem;
	font-weight: var(--font-weight-btns);
	opacity: 1;
	box-shadow: 0px 0px 0px rgba(3, 7, 18, 0.01),
		/* Bron code van derde: smoothshadows.com */
		0px 0px 1px rgba(3, 7, 18, 0.02),
		0px 0px 2px rgba(3, 7, 18, 0.02),
		0px 0px 4px rgba(3, 7, 18, 0.03),
		0px 0px 6px rgba(3, 7, 18, 0.04),
		0px 0px 9px rgba(3, 7, 18, 0.05),
		0px 0px 12px rgba(3, 7, 18, 0.06),
		0px 0px 15px rgba(3, 7, 18, 0.06),
		0px 0px 19px rgba(3, 7, 18, 0.07),
		0px 0px 24px rgba(3, 7, 18, 0.08);
}

main section:nth-of-type(4)>a:last-of-type:hover {
	filter: brightness(var(--hover-brightness-brighter));
}

main section:nth-of-type(4)>a:last-of-type:focus {
	outline: var(--focus-size) solid var(--blue-focus);
}

main section:nth-of-type(4)>a:last-of-type:active {
	filter: brightness(var(--active-brightness));
}

@media (min-width: 768px) {

	/* SECTION 4 */
	main section:nth-of-type(4) ul {
		flex-direction: row;
		flex-wrap: wrap;
	}

	/* Logo van Patron sponsoren */
	main section:nth-of-type(4) a:first-of-type {
		height: 4.86rem;
		width: 36.88rem;
	}

	/* Logo van Corporate Platinum sponsoren */
	main section:nth-of-type(4) ul:first-of-type a {
		height: 7.125rem;
		width: 24.16rem;
	}

	/* Logo van Corporate Gold sponsoren */
	main section:nth-of-type(4) ul:nth-of-type(2) a {
		height: 5.88rem;
		width: 17.81rem;
	}

	/* Logo van Corporate Silver sponsoren */
	main section:nth-of-type(4) ul:nth-of-type(3) a {
		height: 4.63rem;
		width: 14rem;
	}

	/* Alle foto's in de section */
	main section:nth-of-type(4) img {
		width: fit-content;
		height: fit-content;
	}
}


@media (min-width: 1400px) {

	/* Padding tweede section */
	main section:nth-of-type(2),
	main section:nth-of-type(3),
	main section:nth-of-type(4) {
		padding-left: 10rem;
		padding-right: 10rem;
	}
}