* {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth; /* scroller smooth ned fra menuen */
}

body {
  color: #333;
  font-family: montserrat, sans-serif;
  padding-top: 90px;
}

p {
  font-size: 16px;
  line-height: 150%;
}

h1 {
  font-size: 32px;
  line-height: 120%;
}

h2 {
  margin-bottom: 25px;
}

section {
  scroll-margin-top: 240px;
}

/* links */
a {
  text-decoration: none; /* så der ikke streg under */
  color: #333;
  align-self: flex-start;
}

/* menu styling */
.mobilnavigation {
  position: fixed; /* følger med ved scroll */
  background-color: #ffffff80;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  top: 0;
  left: 0;
  right: 0; /* barren fylder hele bredden */
  z-index: 1000;
}

.mobilmenu {
  display: none; /* vises kun når "aktiv" */
  position: fixed;
  width: 100vw; /* fylder hele bredden (viewport width) */
  height: 110px;

  right: 0;
  background: #ffffff80;
  padding: 20px 16px;
  z-index: 999; /* under navigationen (1000) men over indhold */
}

/* når menuen er aktiv */
.mobilnavwrapper.active .mobilmenu {
  display: block;
}

.mobilmenu ul li {
  margin: 16px 0; /* lidt luft i punkterne */
}

.mobilmenu ul li a {
  display: block;
  font-size: 20px;
  font-weight: 700;
  width: 100%;
  text-align: center;
}
/* burger styling */
.bar {
  display: block; /* for at styrre width og height */
  width: 40px;
  height: 4px;
  margin: 8px auto;
  background-color: #333;
  border-radius: 10px;
}

.burgermenu {
  display: block;
}

.desktopnav {
  display: none; /* skjules på mobil */
}

ul {
  list-style: none; /* fjerner "punkterne" */
}

.logo {
  margin-right: auto; /* skubber alt andet til højre */
  display: flex;
  width: 100px;
}

.solsortenlogo {
  width: 100%;
  display: block;
}

/* indhold styling */
.indhold {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5%;
  margin: 0 auto;
}

.tekst {
  margin-bottom: 20px;
  width: 100%;
}

.overskrift {
  margin: 15% 0% 5% 0%;
  align-self: flex-start;
}

/* forside */
#tekstogvideo {
  position: relative;
}

#forsidetekst {
  margin-left: 5%;
  top: 250px;
  width: 300px;
  line-height: 230%;
  position: absolute;
  z-index: 2;
}

#forsidetekst h1 {
  font-size: 36px;
}

#ft1 {
  margin-bottom: 40px;
}

#video {
  width: 100%;
  margin-top: -95px;

  z-index: 1;
}

#solvideo {
  width: 100%;
  height: 800px;
  object-fit: cover; /* så videoen ikke "strækkes" */
}

/* projekter */
#projektertekst {
  padding: 10% 0% 0% 5%;
}

#pnav {
  display: flex;
  margin: 5% auto 5% 5%;
  gap: 12px;
}

#pnav a.is-active {
  text-decoration: underline; /* hvor er man */
  font-weight: 600;
}

.mineprojekter {
  display: flex;
  justify-content: space-between;
  overflow-x: auto; /* scroll horisontalt*/
}

.spor {
  display: flex;
  margin: 0% 5% 15% 5%;
  gap: 20px; /* Lidt afstand mellem billeder */
}

.sporbilleder {
  max-width: 140px;
  border: 1px solid #333;
}

/* Bruges af JS til at skjule projekter */
.is-hidden {
  display: none;
}

/* om */
#om {
  background-color: #f0f0f0;
  padding: 10% 0% 0% 0%;
}

#omboks {
  display: flex;
  flex-direction: column; /* tekst over billde og liste */
}

#omtekst {
  margin: 5%;
}

#migbillede {
  display: flex;
  justify-content: center;
  width: 60%;
  margin: 5% auto;
}

#mig {
  width: 100%;
}

#tjekliste1 {
  display: flex;
  justify-content: center;
  width: 90%;
  margin: 10% auto 5% auto;
}

#tjekliste2,
#tjekliste3 {
  display: none;
}

.liste {
  width: 100%;
}

#kompetencertekst,
#workspacetekst {
  margin: 10% 5%;
}

#vandvideo {
  width: 90%;
  height: 200px;
  margin: 0% 5% 5% 5%;
  object-fit: cover; /* overskydende skæres fra */
}

/* kontakt */
#kontakttekst {
  margin: 20% 5%;
}

/* projekt videolinks */
#videoer a,
#ditkbh a,
#alternativet a,
#dcfest a,
#dchyg a,
#bug a {
  position: relative;
}

#videoer a i.fa-link,
#ditkbh a i.fa-link,
#alternativet a i.fa-link,
#dchyg a i.fa-link,
#dcfest a i.fa-link,
#bug a i.fa-link {
  position: absolute;
  bottom: 15px;
  right: 10px;
  background: #ffffff90;
  color: #000;
  padding: 15px;
  border-radius: 50%;
  font-size: 16px;
  z-index: 2;
}

/* house of share */
.hsvideo {
  width: 100%;
}

#videoer {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10% auto;
}

#sek5,
#sek15 {
  width: 50%;
  margin: 5% auto;
}

#sek30 {
  width: 80%;
  margin: 5% auto;
}

/* hænder */
#illustrationer {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10% auto;
}

.handsbillede {
  width: 100%;
}

#handsb1,
#handsb2,
#handsb3 {
  width: 70%;
  border: 1px solid #333;
  margin: 5% auto;
}

/* dit københavn */
#ditkbh {
  width: 70%;
  margin: 10% auto;
}

#ditkbhb {
  width: 100%;
  border: 1px solid #333;
}

/* alternativet */
#alternativet {
  width: 60%;
  margin: 10% auto;
}

.webwrap a {
  display: inline-flex;
  align-items: center;

  margin-top: 20%;
  margin-bottom: 185%;
}

/* dream city */
.dcb {
  width: 100%;
}

#dc {
  display: flex;
  flex-direction: column;
  width: 70%;
  margin: 10% auto;
}

.dcgrafik,
#dchyg,
#dcfest {
  margin: 5% auto;
}

/* hagerup */
#bug {
  width: 50%;
  margin: 10% auto;
}

#bugb {
  width: 100%;
}

/* footer */
footer {
  margin: 0% 5%;
  border-top: solid #333;
}

.somelinks {
  display: flex;
  justify-content: center;
  margin: 10% auto;
}

.fa-instagram {
  font-size: 30px;
}

.fa-linkedin-in {
  font-size: 30px;
}

.kontaktinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10% auto;
}

/* layout til tablet */
@media screen and (min-width: 768px) {
  section {
    scroll-margin-top: 250px;
  }

  /* indhold */
  .indhold {
    padding: 0% 10% 10% 10%;
  }

  /* tekst */
  .overskrift {
    align-self: center;
    text-align: center;
    margin: 15% 0% 10% 0%;
  }

  h2 {
    margin-bottom: 16px;
  }

  /* forside */
  #forsidetekst {
    width: 650px;
    margin-top: 30px;
    margin-left: 5%;
  }

  #forsidetekst h1 {
    font-size: 45px;
  }

  /* projekter */
  #projektertekst {
    padding: 10% 0% 0% 5%;
  }

  .spor {
    margin: 0% 5% 10% 5%;
    gap: 50px;
  }

  .sporbilleder {
    max-width: 200px;
  }

  /* om */
  #sologliste {
    display: flex;
    align-items: flex-start;
    flex-direction: row-reverse; /* billedet til højre, liste til venstre */
  }

  #migbillede {
    width: 40%;
    height: auto;
    margin-left: 10%;
  }

  #tjekliste1 {
    display: none;
  }

  #tjekliste2 {
    display: flex;
    justify-content: center;
    width: 35%;
    margin: 2% 0% 0% 5%;
  }

  #vandvideo {
    height: 300px;
  }

  /* house of share */
  #videowrap {
    display: flex;
  }

  #sek5 {
    margin-right: 7%;
  }

  #sek15 {
    margin-left: 8%;
  }

  /* dream city */
  #dc {
    width: 100%;
  }

  #dcbilleder {
    display: flex;
    gap: 5%;
  }

  #dcvideowrap {
    display: flex;
    gap: 5%;
  }

  .dcgrafik {
    width: 60%;
  }
}

/* layout til computer */
@media screen and (min-width: 1024px) {
  /* indhold */
  section {
    scroll-margin-top: 5px;
  }

  .indhold {
    padding: 0% 15% 10% 15%;
  }

  h1 {
    font-size: 40px;
  }

  h2 {
    font-size: 32px;
  }

  /* menu */
  .mobilnavwrapper {
    display: none;
  }
  .desktopnav {
    display: block;
  }

  .desktopnavwrapper {
    position: fixed;
    background-color: #ffffff80;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    top: 0;
    left: 0;
    right: 0; /* barren fylder hele bredden */
    z-index: 1000; /* så den ligger over alt andet */
  }

  .uldesk {
    display: flex;
    flex-direction: row;
    gap: 20px;
    font-size: 20px;
    font-weight: 700;
  }

  /* tekst */
  .overskrift {
    margin: 10% 0% 2% 0%;
  }

  /* hover effekter */
  a {
    display: inline-block;
    transition: transform 0.3s ease;
  }

  a:hover {
    transform: scale(1.08);
  }

  /* forside */
  #forsidetekst {
    width: 900px;
    margin-top: 20px;
    margin-left: 75px;
    margin-bottom: 1%;
  }

  #forsidetekst h1 {
    font-size: 60px;
  }

  #solvideo {
    height: 960px;
  }

  /* projekter */
  .spor {
    padding-top: 1%; /* så der er plads til hover-effekten */
    gap: 60px;
  }

  #projektertekst {
    margin-bottom: 2%;
  }

  .sporbilleder {
    max-width: 360px;
  }

  #pnav {
    margin: 2% auto 5% 5%;
    font-size: 20px;
    gap: 50px;
  }

  /* om */
  #omboks {
    display: flex;
    flex-direction: row;
    align-items: flex-end; /* tekst flugter med bunden af billedet */
  }

  #omtekst {
    margin: 5% 5% 0% 10%;
  }

  #sologliste {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #migbillede {
    width: 65%;
  }

  #mig {
    width: 100%;
    height: auto;
  }

  #tjekliste1,
  #tjekliste2 {
    display: none;
  }

  #tjekliste3 {
    display: flex;
    justify-content: center;
    width: 70%;
    margin: 5% auto;
  }

  #kompetencertekst,
  #workspacetekst {
    margin: 5% 10% 0% 10%;
    width: 65%;
  }

  #vandvideo {
    height: 400px;
    width: 80%;
    margin: 2% 10% 10% 10%;
  }

  /* kontakt */
  #kontakttekst {
    margin: 10% 5%;
    width: 60%;
  }

  /* house of share */
  #videoer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 3% auto 10% auto;
  }

  #sek5 {
    width: 33%;
    margin: 0% 8% 0% 0%;
  }

  #sek15 {
    width: 33%;
    margin: 0 9%;
  }

  #sek30 {
    width: 100%;
    margin-right: 0%;
  }

  /* hænder */
  #illustrationer {
    flex-direction: row;
    margin: 8% auto 5% auto;
  }

  #handsb1 {
    width: 30%;
    margin: 0% 5% 0% 0%;
  }
  #handsb2 {
    width: 30%;
    margin: 0% 5% 0% 0%;
  }
  #handsb3 {
    width: 30%;
    margin: 0%;
  }

  /* dit københavn */
  #ditkbh {
    width: 40%;
    margin: 8% auto 0% auto;
  }

  /* alternativet */
  #alternativet {
    width: 30%;
    margin: 8% auto 0% auto;
  }

  /* dream city */
  #dc {
    margin-top: 2%;
  }

  #dcvideowrap {
    justify-content: center;
    gap: 5%;
  }

  #dcfest,
  #dchyg {
    margin: 0;
    width: 35%;
  }

  /* footer */
  .kontaktinfo {
    flex-direction: row;
    justify-content: space-between;
    margin-top: 0%;
    margin-bottom: 5%;
  }

  footer {
    margin: 0% 3%;
  }

  .somelinks {
    margin: 5% auto;
  }

  .fa-instagram {
    font-size: 40px;
  }

  .fa-linkedin-in {
    font-size: 40px;
  }
}