/* CSS Document */

body {
	margin: 0;
	font-family: "gotham", "Montserrat", "Helvetica Neue", Arial, sans-serif;
}

.logo{
	letter-spacing: -0.03em;
}

a {
  color: black;           /* ændrer linkfarve til sort */
  text-decoration: none;  /* fjerner understregning */
}

h1 {
	font-weight: 800;
	font-size: 31px;
	letter-spacing: -0.06em;
	text-align: center;
	margin: 10px;
	margin-top: 10px;
	margin-bottom: 25px;
	line-height: 27px;
}

h2 {
	font-weight: 800;
	font-size: 31px;
	letter-spacing: -0.06em;
	text-align: center;
	margin: 10px;
	margin-top: 25px;
	line-height: 30px;
}

p{
	margin-top: 0px;
	margin-left: 15px;
	margin-right: 15px;
	margin-bottom: 15px;
	line-height: 17px;
	font-size: 14px;	
}

article{
	margin-bottom: 25px;
}

#education p{
	margin-bottom: 0px;
}
#work p{
	margin-bottom: 0px;
}

ul{
	margin: 0px;
	font-size: 14px;
	line-height: 17px;
}
.burger {
	size: 20px;
	}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  margin: 0;
  overflow: visible;
  background-color: #fff;
  font-size: 20px;
  font-weight: 800;
  position: sticky;	
  top: 0;              /* hvor langt fra toppen den skal sidde */
  z-index: 3000;       /* ligger over alt andet */
}

video {
  display: block;
}

img {
	width: 100%;
	}

.image-row {
  display: flex;           /* gør container til flex */
  gap: 0px;               /* afstand mellem billeder */
  flex-wrap: wrap;         /* gør, at billeder kan gå til næste række på small screens */
}

.image-row img {
  width: 50%;              /* 2 billeder per række */
  height: auto;            /* bevarer proportioner */
}

.leo {
  position: relative; /* container til absolute-positionering */
  display: inline-block; /* eller block */
}

.overlay-text {
	position: absolute;
	bottom: 1px; /* 10px fra bunden */
	right: 8px;  /* 10px fra højre kant */
	font-size: 14px;
	font-weight: 800;
	display: inline-flex;        /* inline så det ligger sammen med teksten */
	align-items: center;         /* centrerer SVG vertikalt */
	gap: 0px;                    /* afstand mellem tekst og pil */
	color: #fff;                 /* tekstfarve */
}

.forsideprojekter {
  display: flex;
  flex-wrap: wrap; /* hvis du vil have flere rækker */
}
.forside {
  position: relative;        /* vigtig! gør overlay absolut i forhold til container */
  display: inline-block;	/* gør, at hvert billede fylder sin egen box */
  margin:0;
}

.forside img {
  display: block;
  width: 100%;               /* eller fast bredde fx 300px */
  height: auto;
}

.page-text {
	margin-top: 0px;
	margin-bottom: 0px;
}

footer {
  font-size: 14px;
  color: #000;
  transition: color 0.3s;
  padding: 15px;
}

i:hover {
  color: #555;
}

footer-link:hover {
  color: #555;
}

.footer-link {
  display: block;       /* gør hvert link til et blok-element */
  margin: 5px 0;        /* lodret afstand mellem links */
}

.footer-link i {
  margin-right: 4px; /* afstand mellem ikon og tekst */
}

.site-footer {
	background-color: #f1f1f1;
}

/* Overlay-menu */
.overlay-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  z-index: 2200;
}

.overlay-menu a {
  font-size: 16px;
  color: #000;
  font-weight: 700;	
  text-decoration: none;
}

.overlay-menu.show {
  opacity: 1;
  pointer-events: auto;
}

/* Lås scroll når menu er åben */
body.menu-open {
  overflow: hidden;
}

.burgerikon,
.closeikon {
  cursor: pointer;
  font-size: 26px;
  color: #000;
  z-index: 3100;
}

/* Kryds skjult som standard */
.closeikon {
  display: none;
}

/* Når menu er åben */
body.menu-open .burgerikon {
  display: none;
}

body.menu-open .closeikon {
  display: block;
}

.header-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative; /* reference for sticky element */
}

.back-arrow {

  display: flex;
  align-items: center;
  color: #000;
  text-decoration: none;
  margin: 10px;
  margin-top: 0px;
  margin-right: auto;
  position: fixed;           /* bliver sticky */                 /* afstand fra toppen af viewport */
  z-index: 1000;              /* ovenpå alt andet */
  left: 0px;         /* afstand fra venstre kant */	
}

.back-arrow svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
}

/* Standard: små skærme */
.header-links {
  display: none; /* skjul links på små skærme */
}

.burgerikon {
  display: block;
  cursor: pointer;
}

.page-layout {
  display: flex;
  flex-direction: column; /* mobil: ovenpå hinanden */
}

.page-images img {
  width: 100%;
  display: block;
}

.page-images {
	margin-bottom: 0;
}

	#kirstentekst {
		margin-top: 10px;
}

	#keepcalmtekst {
		margin-top: 10px;
}

	#linotekst {
		margin-top: 10px;
}

	#dageneiparadistekst {
		margin-top: 10px;
}

	#majtekst {
		margin-top: 10px;
}

	#falcktekst {
		margin-top: 10px;
}

/* Store skærme >580px */
@media (min-width: 580px) {
  .burgerikon {
    display: none;        /* skjul burgerikon */
  }
	
.image-row {
  display: grid;                  /* vigtige! */
	grid-template-columns: repeat(4, 1fr); /* 4 billeder per række */
  gap: 10px; /* afstand mellem billeder */
	margin: 10px;
	}

.image-row img {
  width: 100%;
  display: block;
  height: auto;
}
	
  .forside {
    flex: 25%;       /* to billeder per række */
	  padding: 5px;
	}

  .header-links {
    display: flex;        /* vis links */
  gap: clamp(50px, 7vw, 10px); /* min 20px, max 60px, vokser med viewport */
  align-items: center;
  }

  .header-links a {
    text-decoration: none;
    color: #000;
    font-weight: 400;
	font-size: 14px;
  }
	
	.logo {
  margin-right: 100px; /* afstand mellem logo og første link */
}
	.forsideprojekter{
		margin: 5px;
		margin-top: 0px;
	}


.header-links a.active {
  text-decoration: underline;
  text-underline-offset: 4px;
}
#archive{
	margin-bottom: 10px;
	color: #fff;
}		

  }