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

/*********************/
/* CUSTOM PROPERTIES */
/*********************/
:root {
	--color-text-eel: #4b4b4b;
	--color-text-marine: #052C60;
	--color-background-snow: #ffffff;
	--color-feather-green: #58cc02;
	--color-mask-green: #89e219;

	--color-secondary-blue: #1cb0f6;
	--color-secondary-blue-semitransparent: #1cb1f690;
	--color-secondary-blue-transparent: #1cb1f627;

	--color-secondary-grey: #E5E5E5;
	--color-secondary-turqoise: #02AF85;
	--color-turqoise-dark: #068C6B;
	--color-secondary-purple: #CE82FF;
	--color-purple-dark: #A567CC;

	--color-buttonborder-green: #58A700;
	--color-superduolingo: #100F3E;
	--color-learnanywhere: #DDF4FF;
	--color-superduolingo-buttonshadow: #88879F;
	--color-footer-heading: #D7FFB8;
	--color-footer-p: #A6ED6E;
	--color-footer-p-visited: #86ec38;

	--color-focus-border: #000000;
	--color-focus-border-opposite: #FFFFFF;

	--color-levels-locked-background: #E5E5E5;
	--color-levels-locked-shadow: #B7B7B7;

	--color-greyongrey: #AFAFAF;
	--color-darkgrey: #777777;

	--button-border-radius: 0.75rem;


	--color-white: #FFFFFF
}

@media (prefers-color-scheme: dark) {
	:root {
		--color-text-eel: #F1F7FB;
		--color-text-marine: #79a6e1;
		--color-background-snow: #121E24;
		--color-feather-green: #58cc02;
		--color-mask-green: #89e219;

		--color-secondary-blue: #1cb0f6;
		--color-secondary-blue-semitransparent: #1cb1f690;
		--color-secondary-blue-transparent: #1cb1f627;

		--color-secondary-grey: #37464F;
		--color-secondary-turqoise: #02AF85;
		--color-turqoise-dark: #068C6B;
		--color-secondary-purple: #CE82FF;
		--color-purple-dark: #A567CC;

		--color-buttonborder-green: #58A700;
		--color-superduolingo: #100F3E;
		--color-learnanywhere: #DDF4FF;
		--color-superduolingo-buttonshadow: #88879F;
		--color-footer-heading: #D7FFB8;
		--color-footer-p: #A6ED6E;

		--color-focus-border: #FFFFFF;
		--color-focus-border-opposite: #000000; 

		--color-levels-locked-background: #37464F;
		--color-levels-locked-shadow: #2A373F;

		--color-greyongrey: #AFAFAF;
		--color-darkgrey: #777777;
	}
}

@font-face {
	font-family: Feather;
	src: url(../fonts/FeatherBold.otf);
	font-weight: bold;
}

@font-face {
	font-family: DINNext;
	src: url(../fonts/DINNextRoundedLTPro-Light.otf);
	font-weight: 300;
}

@font-face {
	font-family: DINNext;
	src: url(../fonts/DINNextRoundedLTPro-Regular.otf);
	font-weight: 400;
}

@font-face {
	font-family: DINNext;
	src: url(../fonts/DINNextRoundedLTPro-Medium.otf);
	font-weight: 500;
}

@font-face {
	font-family: DINNext;
	src: url(../fonts/DINNextRoundedLTPro-Bold.otf);
	font-weight: 600;
}

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

.noDisplay {
	display: none;
}

body {
	padding: 0;
	margin: 0;
	font-family: DINNext, Arial, Helvetica, sans-serif;
	color: var(--color-text-eel);
	background-color: var(--color-background-snow);
}

a {
	text-decoration: none;
}

:focus-visible {
	outline: 0.125rem solid var(--color-focus-border);
	animation-name: focus_outline;
	animation-duration: 2s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

/* class voor het verbergen van elementen behalve voor de screen reader */
.visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

@keyframes focus_outline {
	50% {
		outline: 0.125rem solid var(--color-focus-border-opposite);
	}
}

@media (prefers-contrast: more) {
	:root {
		--color-text-eel: #FFFFFF;
		--color-text-marine: #79a6e1;
		--color-background-snow: #000000;
		--color-feather-green: #58cc02;
		--color-mask-green: #89e219;

		--color-secondary-blue: #1cb0f6;
		--color-secondary-blue-semitransparent: #1cb1f690;
		--color-secondary-blue-transparent: #1cb1f627;

		--color-secondary-grey: #37464F;
		--color-secondary-turqoise: #02AF85;
		--color-turqoise-dark: #068C6B;
		--color-secondary-purple: #CE82FF;
		--color-purple-dark: #A567CC;

		--color-buttonborder-green: #58A700;
		--color-superduolingo: #100F3E;
		--color-learnanywhere: #DDF4FF;
		--color-superduolingo-buttonshadow: #88879F;
		--color-footer-heading: #D7FFB8;
		--color-footer-p: #A6ED6E;

		--color-focus-border: #00FFFF;
		--color-focus-border-opposite: var

		--color-levels-locked-background: #37464F;
		--color-levels-locked-shadow: #2A373F;

		--color-greyongrey: #AFAFAF;
		--color-darkgrey: #777777;

		font-size: 1.25em;
	}

	body {
		background-color: #000000;
	}

	:focus {
		animation: none !important;
	}
}

@media (prefers-reduced-motion) {
	* {
		animation: none !important; 
		scroll-behavior: unset !important;
	}
}