@font-face {
  font-family: inter;
  src: url(../fonts/Inter_18pt-Regular.ttf);
  font-weight: 400;
}

@font-face {
  font-family: inter;
  src: url(../fonts/Inter_18pt-Bold.ttf);
  font-weight: 700;
}

@font-face {
  font-family: inter;
  src: url(../fonts/Inter_18pt-Thin.ttf);
  font-weight: 200;
}

@font-face {
  font-family: inter;
  src: url(../fonts/Inter_18pt-Medium.ttf);
  font-weight: 550;
}

@font-face {
	font-family: lobster;
	src: url(../fonts/Lobster-Regular.ttf);
}

@font-face {
	font-family: pressStart;
	src: url(../fonts/PressStart2P-Regular.ttf);
}

@font-face {
	font-family: limelight;
	src: url(../fonts/Limelight-Regular.ttf);
}



/* CUSTOM PROPERTIES */

:root {
	--color-text:white;
	--indexWhite: rgb(253, 253, 253);
	--color-textWhite: #ffffff;
	--color-textBlue: #3e40c1;
	--color-headings: white;
	--color-whiteheadings: #ffffff;
	--color-background:#3e40c1;
	--color-sectionbackground: #3e40c1;

	--color-headerback: #3e40c1;
	--color-white: white;

	--blue: #3E40C1;
	--yellow: #ffc21c;
	
	--color: transparent;

	--black-text: rgb(25, 25, 25);
	--heroTitle: rgb(25, 25, 25);
	--heroBackground: #0000004c;
}


*, *::after, *::before {
box-sizing:border-box;  
margin: 0;
padding: 0;

max-width: 100%;
font-family: inter;

text-decoration: none;

}

::selection {
	background-color: var(--blue);
	color: var(--yellow);
}

*:focus{
	outline: var(--yellow);
	outline-style:dashed;
	outline-width: .2rem;
	outline-offset: .5rem;
}

a:active {
	background-color: var(--yellow);
	border-radius: .2em;
}

/* BODY ETC. */
/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* when keyboard-focused, make it visible */
.skip-link:focus,
.skip-link:active {
  position: fixed;
  left: 1rem;
  top: 1rem;
  width: auto;
  height: auto;
  padding: .5rem .75rem;
  background: #111;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  z-index: 9999;
}

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

body, html {
	position: relative;
	overflow-x: hidden;
	max-width: 100%;
	margin: 0;
	padding: 0;
}
/* algemeen */

h1, h2, h3 {
    color: var(--color-whiteheadings);
    font-size: 2.5em;

    text-transform: uppercase;
}

p {
	line-height: 1.6em;
    font-size: 20px;
	color: var(--black-text);
}

strong {
	text-transform: none;
	font-weight: 550;
}

em {
	font-size: 18px;
	color: var(--blue);
	opacity: 70%;
}

.lobster {
	font-family: lobster;
	font-size: 3rem;
}

.pressStart {
	font-family: pressStart;
}

.limelight {
	font-family: limelight;
}


/* Header - nav */
main {
	background-blend-mode: lighten;
	background-position: center;
	background-attachment: fixed;
}

header {
	background-color: var(--color-headerback);
	display: flex;
	flex-direction: column;
	padding: 1em;
	width: 100%;
	align-items: start;
	
}

header svg {
	display: none;
	fill: white;
}

header svg:hover {
	fill: var(--yellow);
}

header button {
      display: flex;
	  grid-column-start: 1;
      cursor: pointer;
      padding: 1em;
      background: none;
      border-style: none;
	  gap: 1em;
}

header button span {
      display: block;
      width: 1rem;
      height: 1rem;
      margin: 0.33em 0;
      background-color: var(--color-white);
      transition: all 0.3s ease;
	  border-radius: 20rem;
}

header button span:hover {
	background-color: var(--yellow);
}

nav {
	display: none;
	background-color: var(--color-headerback);
}

nav ul {
	list-style: none;
	display: flex;
	flex-direction: column;
	padding: 1em;
	gap: 1rem;

	font-size: 24px;

}

nav ul li a {
	color: var(--color-textWhite);
	text-transform: uppercase;
	font-weight: bold;
	transition: ease-in-out;
}

nav ul li a:hover {
	color: var(--yellow);
}

nav.open {
	display: flex;
}

@media screen and (max-width: 1024px) {
	nav.open {
		margin-top: 2rem;
	}
}

@media screen and (min-width: 1024px) {
	header button {
		display: none;
	}

	header svg {
		display: block;
		fill: var(--color-textWhite);
		width: 30em;
	}

	header {
		justify-content: space-between;
		flex-direction: row;
		align-items: center;
	}

	nav {
		display: block;
	}

	nav ul {
		display: flex;
		flex-direction: row;
		gap: 1.5em;
	}
}

h2 {
	color: var(--color-headings);
}

/* footer */

footer {
	padding: 2em;

	display: flex;
	gap: 2em;
	align-items: center;
}

footer ul {
	display: flex;
	gap: 3em;
	list-style: none;
}

footer ul li a {
	font-size: 1.5rem;
	text-transform: uppercase;
	color: var(--blue);
	font-weight: bold;
}

footer ul li a:hover {
	color: var(--yellow);
} 

footer a {
	margin-left: auto;
}

footer a svg {
	width: 4em;
	fill: var(--blue);
}

footer a svg:hover {
	fill: var(--yellow);
}

footer a svg {
	padding: 0.3em;
}

/* Cool lettering */
/* p::first-letter {
    float: left;
    font: 390px lobster;
    line-height: 1;
    margin-right: -1000px; 
    margin-left: -85px; 
    margin-top: -110px;  
    color: crimson;
} */