/* mobile menu  */
* {
  margin: 0;
  padding: 0;
}
/* Baggrunds farve på hele sitet */
body {
  background-color: #efe9e3;
}
/* Header sektion */
header {
  background-color: #f9f8f6;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 30px;
  font-family: "Libre Baskerville", serif;
}
header a {
  color: #fd9a3d;
  text-decoration: none;
  font-family: "Libre Baskerville", serif;
}
.topnav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-weight: bold;
  font-family: "Libre Baskerville", serif;
}

/* Gør at burgermenu ikke kommer frem på desktop */
.topnav .icon {
  display: none;
}

/* Kunne ikke få resten af min hover til at virke, så jeg fik hjælp af min bror */
/* GENEREL stil for alle links i topnav */
.topnav a {
  color: #fd9a3d;
  padding: 14px 16px;
  text-decoration: none;
  font-weight: bold;
  font-family: "Libre Baskerville", serif;
  /* så hover får afrundede hjørner */
  border-radius: 6px;
}

/* HOVER-effekt på ALLE topnav links */
.topnav a:hover {
  background-color: #fd7901; /* mørk orange */
  color: #fdddb7; /* lys orange tekst */
}

/* Dropdown container */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown "knappen" */
.dropbtn {
  background-color: transparent;
  color: #fd9a3d;
  font-weight: bold;
  padding: 14px 16px;
  text-decoration: none;
  display: inline-block;
}

/* Dropdown indhold */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #fdddb7;
  min-width: 180px;
  z-index: 1;
  border-radius: 6px;
}

.dropdown-content a {
  color: #fd9a3d;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #fd7901;
  color: #fdddb7;
}

/* Hover viser dropdown */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Gør at linket også får hover-stil */
.dropdown:hover .dropbtn {
  color: #fdddb7;
  background-color: #fd7901;
}

/* Overskrift sektion */
/* Overskriften - Gør at teksten ligger ovenpå billedet*/
.overskrift {
  background-image: url(Ellipsebaggrundmobil.png);
  background-size: cover;
  background-position: center;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.overskrift h1 {
  font-size: 40px;
  font-weight: bold;
  color: #fd7901;
}

/* Indhold sektion */
.introportfolio {
  color: #fd7901;
  line-height: 150%;
  font-size: 15px;
  font-weight: bold;
  text-align: left;
  max-width: 300px;
  margin: 0 auto;
}
/* Flow kortene generelt */
.card {
  background-color: #f7e2c9;
  border-radius: 54px;
  margin-top: 30px;
  padding: 30px;
  text-align: center;
}

/* kort overskrifterne */
.card h2 {
  color: #fd7901;
  font-weight: bold;
}

/* Kort teksten */
.card p {
  color: #fd7901;
  text-align: left;
  margin-top: 10px;
}

/* Flow knappen - generelt */
.flowknap {
  background-color: #fc8e29;
  border-radius: 54px;
  padding: 8px;
  margin-top: 20px;
  box-shadow: #b06101 2px 2px 5px;
}

/* Flow knap tekst */
.flowknap a {
  text-decoration: none;
  color: #faefbe;
  font-size: 20px;
}

/* Flow 1.1 side */
/* Overskrift */
.intro h2 {
  color: #fd7901;
  text-align: center;
  margin-top: 20px;
  font-weight: bold;
}
/* Underoverskrift */
.intro h4 {
  color: #fd9a3d;
  text-align: center;
  margin-top: 5px;
  font-style: italic;
  /* SKAL DEN VÆRE BOLD?? */
  font-weight: lighter;
}
/* Tekst */
.intro p {
  color: #fd7901;
  line-height: 150%;
  font-size: 15px;
  margin-top: 5px;
  max-width: 360px;
  margin-left: 20px;
}

/* Proces */
/* Underoverskrift */
.processen h4 {
  color: #fd9a3d;
  text-align: center;
  margin-top: 30px;
  font-style: italic;
  /* SKAL DEN VÆRE BOLD?? */
  font-weight: lighter;
}
/* Tekst */
.processen p {
  color: #fd7901;
  line-height: 150%;
  font-size: 15px;
  margin-top: 5px;
  max-width: 360px;
  margin-left: 20px;
}

/* Resultater */
/* Underoverskrift */
.resultat h4 {
  color: #fd9a3d;
  text-align: center;
  margin-top: 30px;
  font-style: italic;
  /* SKAL DEN VÆRE BOLD?? */
  font-weight: lighter;
}
/* Postkort billeder */
/* Kærlighed postkort */
.kærlighed {
  margin-top: 15px;
  width: 80%;
  margin-left: 40px;
}
/* Bevægelse postkort */
.bevægelse {
  margin-top: 15px;
  width: 80%;
  margin-left: 40px;
}
/* Reflektion postkort */
.reflektion {
  margin-top: 15px;
  width: 80%;
  margin-left: 40px;
}

/* Flow 1.2 side */
/* Tekst og overskrift har samme navngivning som flow 1.1, så designet er det samme */
.video {
  width: 60%;
  margin-top: 15px;
  border-radius: 20px;
  margin-left: 75px;
}

/* Link til figma prototype */
.prototypefigma {
  background-color: #fc8e29;
  border-radius: 54px;
  padding: 8px;
  margin-top: 20px;
  max-width: 200px;
  margin-left: 85px;
  box-shadow: #b06101 2px 2px 5px;
}
.prototypefigma a {
  text-decoration: none;
  color: #faefbe;
  font-size: 18px;
  margin-left: 15px;
}

/* Flow 2 side */
/* Overskrift */
.intro h2 {
  color: #fd7901;
  text-align: center;
  margin-top: 20px;
  font-weight: bold;
}
/* Underoverskrift */
.intro h4 {
  color: #fd9a3d;
  text-align: center;
  margin-top: 5px;
  font-style: italic;
  /* SKAL DEN VÆRE BOLD?? */
  font-weight: lighter;
}
/* Tekst */
.intro p {
  color: #fd7901;
  line-height: 150%;
  font-size: 15px;
  margin-top: 5px;
  max-width: 360px;
  margin-left: 20px;
}

/* Proces */
/* Underoverskrift */
.processen h4 {
  color: #fd9a3d;
  text-align: center;
  margin-top: 30px;
  font-style: italic;
  /* SKAL DEN VÆRE BOLD?? */
  font-weight: lighter;
}
/* Tekst */
.processen p {
  color: #fd7901;
  line-height: 150%;
  font-size: 15px;
  margin-top: 5px;
  max-width: 360px;
  margin-left: 20px;
}
.processen img {
  width: 100%;
  max-width: 360px;
  display: block;
  margin: 20px auto 0;
}

/* Flow 5 - Projektstyring */
/* Underoverskrift */
.projektstyring h4 {
  color: #fd9a3d;
  text-align: center;
  margin-top: 30px;
  font-style: italic;
  /* SKAL DEN VÆRE BOLD?? */
  font-weight: lighter;
}
/* Tekst */
.projektstyring p {
  color: #fd7901;
  line-height: 150%;
  font-size: 15px;
  margin-top: 5px;
  max-width: 360px;
  margin-left: 20px;
}
.projektstyring img {
  width: 100%;
  max-width: 360px;
  display: block;
  margin: 20px auto 0;
}

/* Flow 5 - Research og inspiration */
/* Underoverskrift */
.research h4 {
  color: #fd9a3d;
  text-align: center;
  margin-top: 30px;
  font-style: italic;
  /* SKAL DEN VÆRE BOLD?? */
  font-weight: lighter;
}
/* Tekst */
.research p {
  color: #fd7901;
  line-height: 150%;
  font-size: 15px;
  margin-top: 5px;
  max-width: 360px;
  margin-left: 20px;
}
.research img {
  width: 100%;
  max-width: 360px;
  display: block;
  margin: 20px auto 0;
}

/* Flow 5 - Andre flows */
/* Underoverskrift */
.andreflows h4 {
  color: #fd9a3d;
  text-align: center;
  margin-top: 30px;
  font-style: italic;
  /* SKAL DEN VÆRE BOLD?? */
  font-weight: lighter;
}
/* Tekst */
.andreflows p {
  color: #fd7901;
  line-height: 150%;
  font-size: 15px;
  margin-top: 5px;
  max-width: 360px;
  margin-left: 20px;
}
.andreflows img {
  width: 100%;
  max-width: 360px;
  display: block;
  margin: 20px auto 0;
}

/* Flow 5 - Wireframes og designproces */
/* Underoverskrift */
.wireframes h4 {
  color: #fd9a3d;
  text-align: center;
  margin-top: 30px;
  font-style: italic;
  /* SKAL DEN VÆRE BOLD?? */
  font-weight: lighter;
}
/* Tekst */
.wireframes p {
  color: #fd7901;
  line-height: 150%;
  font-size: 15px;
  margin-top: 5px;
  max-width: 360px;
  margin-left: 20px;
}
.wireframes img {
  width: 100%;
  max-width: 360px;
  display: block;
  margin: 20px auto 0;
}

/* Flow 5 - Videoide */
/* Underoverskrift */
.videoide h4 {
  color: #fd9a3d;
  text-align: center;
  margin-top: 30px;
  font-style: italic;
  /* SKAL DEN VÆRE BOLD?? */
  font-weight: lighter;
}
/* Tekst */
.videoide p {
  color: #fd7901;
  line-height: 150%;
  font-size: 15px;
  margin-top: 5px;
  max-width: 360px;
  margin-left: 20px;
}
.videoide img {
  width: 100%;
  max-width: 360px;
  display: block;
  margin: 20px auto 0;
}

/* Flow 5 - Kodning */
/* Underoverskrift */
.kodning h4 {
  color: #fd9a3d;
  text-align: center;
  margin-top: 30px;
  font-style: italic;
  /* SKAL DEN VÆRE BOLD?? */
  font-weight: lighter;
}
/* Tekst */
.kodning p {
  color: #fd7901;
  line-height: 150%;
  font-size: 15px;
  margin-top: 5px;
  max-width: 360px;
  margin-left: 20px;
}
.kodning img {
  width: 100%;
  max-width: 360px;
  display: block;
  margin: 20px auto 0;
}

/* Resultater */
/* Underoverskrift */
.resultat h4 {
  color: #fd9a3d;
  text-align: center;
  margin-top: 30px;
  font-style: italic;
  /* SKAL DEN VÆRE BOLD?? */
  font-weight: lighter;
}
.resultat p {
  color: #fd9a3d;
  text-align: center;
  font-style: italic;
  font-size: 15px;
}

/* Flow 4 - Mellemrum mellem videorne */
.video-item {
  margin-bottom: 20px;
}

/* Footer sektion */
.footer {
  background-color: #f9f8f6;
  display: flex;
  padding: 30px 20px;
  margin-top: 70px;
  gap: 40px;
  flex-wrap: wrap;
}

.footervenstre h2 {
  color: #fd7901;
}
.tlf {
  color: #fd9a3d;
  margin-top: 5px;
}
.mail {
  color: #fd9a3d;
  margin-top: 5px;

  /* Gør at mailen bliver på en linje */
  white-space: nowrap;
}
.icon {
  width: 20px;
  height: auto;
  margin-right: 10px;
}

.footerhøjre {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 15px;
}
.footerhøjre a {
  color: #fd7901;
  font-size: 20px;
  font-weight: bold;
  text-decoration: none;
  text-align: left;
  /* "siderne" under hinanden */
  display: flex;
  gap: 15px;
}

@media screen and (max-width: 600px) {
  /* Teksten forsvinder på mobil */
  .topnav a {
    display: none;
  }
  /* Burgermenu kommer frem på mobil */
  .topnav .icon {
    display: block;
  }
  header {
    padding-left: 10px;
  }
  /* Udfoldet burgermenu */
  .responsive {
    position: relative;
    padding: 60px 0 40px 0;
    flex-direction: column;
    align-items: center;
  }
  .responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .responsive a {
    display: block;
    font-size: 1.2em;
  }
}

/* Desktop */
@media screen and (min-width: 600px) {
  /* Overskrift + baggrund på desktop */
  .overskrift {
    background-image: url(Ellipsebaggrunddesktop.png);
    background-size: cover;
    background-position: center;
    height: 300px;
  }

  .overskrift h1 {
    font-size: 100px;
  }

  /* Portfolio siden - Desktop */
  .introportfolio {
    text-align: left;
    margin: 20px auto 0; /* centrer + lidt luft fra toppen */
    padding: 0; /* fjern venstre padding */
    max-width: 745px;
    font-size: 20px;
  }

  /* Flow kortene genrelt */
  .flow {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    max-width: 1050px;
    margin: 0 auto;
  }

  /* Teksten i kortene */
  .card h2 {
    font-size: 28px;
  }
  .card p {
    font-size: 20px;
  }
  /* Teksten i knappen */
  .flowknap a {
    font-size: 20px;
  }

  /* Flow 1.1 - Desktop */
  /* Overskriften */
  .intro h2 {
    font-size: 45px;
  }
  /* Underoverskrift */
  .intro h4 {
    font-size: 24px;
  }
  /* Teksten */
  .intro p {
    font-size: 20px;
    max-width: 700px;
    margin: 20px auto 0;
  }
  /* Proces & resultat*/
  /* Generelt for proces og resultat */
  .opg11 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
    max-width: 1200px;
    margin: 0 auto;
  }
  .resultat img {
    width: 80%;
    margin-bottom: 20px;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  /* De sidste 2 billeder ved siden af hinanden */
  .tobilleder {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    width: 100%;
    margin: 0 auto;
  }
  .tobilleder img {
    width: 100%;
    display: block;
  }
  /* Proces overskrift + teksten*/
  .opg11 h4 {
    font-size: 30px;
  }
  .opg11 p {
    font-size: 20px;
    margin: 20px auto 0;
    max-width: 500px;
  }

  /* Proces & resultat*/
  /* Generelt for proces og resultat */
  /* Sætter proces og resultat ved siden af hinanden */
  .opg12 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
    max-width: 1200px;
    margin: 0 auto;
  }
  /* Flow 1.2 - Desktop */
  .processen h4 {
    font-size: 30px;
  }
  .processen p {
    font-size: 20px;
    margin: 20px auto 0;
    max-width: 700px;
  }
  .resultat h4 {
    font-size: 30px;
  }
  .resultat .video {
    display: block;
    width: 70%;
    max-width: 350px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Prototype knap */
  .prototypefigma {
    margin-left: auto;
    margin-right: auto;
  }

  /* Flow 2 */
  /* Mange af komandoerne går igen, da teksterne er navngivet det samme */
  .resultat p {
    font-size: 24px;
  }

  /* Generelt for proces og resultat */
  /* Sætter proces og resultat ved siden af hinanden */
  .opg2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
    max-width: 1200px;
    margin: 0 auto;
  }

  /* Tekst over videoerne */
  .video-navn {
    font-size: 24px;
    color: #fd7901; /* Din orange farve */
    text-align: center;
    margin-bottom: 10px;
  }

  /* Container til hver video + titel */
  .video-box {
    width: 45%;
    max-width: 500px;
  }

  /* Resultat videoerne ved siden af hinanden */
  .video-wrapper {
    display: flex;
    justify-content: center;
    /* afstand mellem videoerne */
    gap: 40px;
  }
  .video {
    width: 100%;
    max-width: 500px;
  }

  /* Flow 3 */
  /* Mange af kommandoerne går igen, grundet samme navngivning */

  /* Generelt for proces og resultat */
  /* Sætter proces og resultat ved siden af hinanden */
  .opg3 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
    max-width: 1200px;
    margin: 0 auto;
  }

  /* Flow 4 */
  /* Mange af kommandoerne går igen, grundet samme navngivning */
  /* Videorne ved siden af hinanden */
  .resultat-videoer {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 50px;
    justify-items: center;
    align-items: start;
  }
  .video-item video {
    width: 100%;
    max-width: 350px;
    display: block;
    margin: 0 auto;
  }

  /* FLOW 5 - Desktop */
  /* Proces */
  /* Generelt for hele processen */
  .opg5 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
    max-width: 1200px;
    margin: 0 auto;
  }
  .processen img {
    width: 100%;
    max-width: 700px;
  }

  /* Projektstyring */
  .projektstyring h4 {
    font-size: 30px;
  }
  .projektstyring p {
    font-size: 20px;
    margin: 20px auto 0;
    max-width: 700px;
  }
  .projektstyring img {
    width: 100%;
    max-width: 700px;
  }

  /* Research */
  .research h4 {
    font-size: 30px;
  }
  .research p {
    font-size: 20px;
    margin: 20px auto 0;
    max-width: 700px;
  }
  .research img {
    width: 100%;
    max-width: 700px;
  }
  /* Andre flows */
  .andreflows h4 {
    font-size: 30px;
  }
  .andreflows p {
    font-size: 20px;
    margin: 20px auto 0;
    max-width: 700px;
  }
  .andreflows img {
    width: 100%;
    max-width: 700px;
  }
  /* Wireframes */
  .wireframes h4 {
    font-size: 30px;
  }
  .wireframes p {
    font-size: 20px;
    margin: 20px auto 0;
    max-width: 700px;
  }
  .wireframes img {
    width: 100%;
    max-width: 700px;
  }

  /* Videoide */
  .videoide h4 {
    font-size: 30px;
  }
  .videoide p {
    font-size: 20px;
    margin: 20px auto 0;
    max-width: 700px;
  }
  .videoide img {
    width: 100%;
    max-width: 700px;
  }

  /* Kodning */
  .kodning h4 {
    font-size: 30px;
  }
  .kodning p {
    font-size: 20px;
    margin: 20px auto 0;
    max-width: 700px;
  }
  .kodning img {
    width: 100%;
    max-width: 700px;
  }
}