@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");


h1,
h2,
h3,
h4,
h5 {
  font-family: "Poppins";
  font-weight: 600;
}

html {
  font-size: 70%;
}
/* størrelser målt igennem https://www.realtimecolors.com/?colors=050315-fbfbfe-2f27ce-dedcff-433bff&fonts=Poppins-Poppins*/

h1 {
  font-size: 2.489rem; /* 39.84px */
  font-weight: 700;
}

h2 {
  font-size: 2.074rem; /* 33.12px */
}

h3 {
  font-size: 1.728rem; /* 27.68px */
}

h4 {
  font-size: 1.44rem; /* 23.04px */
}

h5 {
  font-size: 1.2rem; /* 19.2px */
  font-weight: bold;
}

small {
  font-size: 0.833rem; /* 13.28px */
}

:root {
  /* farve variabler */
  --background1: #fdfdfa;
  --background2: #ebebe3;
  --accent: #88a998;
  --primary: #114761;
  --secondary: #b18b44;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /*border: 1px dashed red; */
}
body {
  font-family: "poppins";
  font-weight: 300;
  background-color: var(--background1); /* baggrundsfarve på hele siden */
  /* font-family: "Poppins"; /
  background-color: var(--background1); / baggrundsfarve på hele siden */
}

.top__bar {
  background-color: var(--background1); /* baggrundsfarve på topbaren*/
  display: flex; /* indikere at der bruges flex-koder*/
  justify-content: space-between; /* indikere at de to ikoner skal deles op */
  align-items: center; /* indikere at ikonerne skal være på samme linje */
  padding: 8px; /* giver luft foroven og for neden i topbaren */
  padding-left: 20px; /* giver luft ude til venstre i topbaren, det alternativelogo er lidt større i det transparent*/
  padding-right: 21px; /* derfor er ikonet til venstre 1px større for skabe alignment*/
}


.dropdown__link {
  color: var(--background2);
  display: block;
}

/* Modifier – når linket er valgt */
.dropdown__link--valgt {
  background-color: var(--background2);
}
/* dropdown menu fra w3school.com: 
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown_right*/

/* The container <div> - needed to position the dropdown content */
.dropdown {
  float: right;
  position: relative;
  display: block;
}

/* Dropdown Content (Hidden by Default) */
#dropdown-content {
  display: none;
  position: absolute;
  background-color: var(--background1);
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  right: 0;
  text-align: center;
  width: 90.5vw;
}

#dropdown-content.show {
  display: block;
}

/* Links inside the dropdown */
#dropdown-content a {
  color: var(--accent);
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  font-family: poppins;
  padding: 20px;
  justify-self: center;
  width: 100%;
}

.dropdown a:hover {
  background-color: var(--background2);
}

/* w3school.com - slutter */

/* burgermenu ikon hentet fra fontawsome start */

.fa-bars {
  /* burgermenuen */
  font-size: 30px; /* størrelsen på burgermenuen */
  color: var(--primary);
}

.fa-bars:hover {
  cursor: pointer;
}
/* burgermenu hentet fra fontawsome slut */

.__logo {
  /* det alternative logo */
  width: 40px; /* størrelsen på det alternativelogo */
}
.__forside {
  background-image: url(Billeder/hulum.svg); /* Billedet under tekst, logo og knap*/
  background-color: var(
    --primary
  ); /* en kasse som hulum ligger oven på for at hulum kan have samme størrelse */
  background-repeat: no-repeat; /* gør at billedet ikke gentager sig flere gange */
  background-size: cover; /* gør at hulum bliver samme størrelse som background-color/kassen*/
  background-position: 6%; /* fuldt billede 100% og dette fortæller hvilken del af de 100% der skal vises */
  height: 600px; /* skalere hvor stort billedet skal være */
  display: flex; /* indikere at flex metoden bliver brugt */
  /* align-items: left;  indikere at elementerne skal justeres til venstre */
  flex-direction: column; /* indikere at elementerne skal ''listes''*/
  justify-content: center; /* indikere at det skal centeres på background-image */
  padding: 20px; /* indikere hvor meget luft der er fra kant til elementer (logo,tekst og knap) */
  color: var(--secondary);
}
/* langt logo */
.hel__logo {
  width: 250px;
}

.tekst__Forside {
  padding-top: 30px;
  padding-bottom: 30px;
}

/* skrift størrelsen på forside kanppen  */
.knap__1 { 
  font-size: 1.44rem; /* 23.04px */
}

/* grid container med hexagon med tekst i, og den åbne kasse,  */
.grid__container {
  display: grid;
  grid-template-areas:
    "teksthex"
    "box";
}

/* den åbne kasse */
.open__box {
  grid-area: box;
  padding-top: 45px;
  width: 359px;
  justify-self: center;
  margin-bottom: 30px;
}

/* chat gpt hjælp i forhold til w3 validator, der skulle være en overskrift i sectionen for at være lovlig*/

.skjult__overskrift { 
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/*                                         */

/* den blå hexagon bag teksten */
.tekst__hex {
  grid-area: teksthex;
  text-align: center;
  background-image: url(Billeder/Blå\ hexagon.svg);
  background-color: var(--background1);
  background-repeat: no-repeat;
  background-position: 50%;
  height: 350px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--background1);
  margin-top: 60px;
}

/*                           */
/*          footer           */
/*                           */

.footer__grid {
  background-color: #114761;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 2fr 1fr;
  gap: 8px 30px;
  grid-auto-flow: row;
  grid-template-areas:
    "facebook insta"
    "copyright copyright";
  justify-items: center;
  align-items: center;
}
.footer__icon--facebook {
  grid-area: facebook;
  width: 40px;
  padding-top: 70px;
  justify-self: right;
}
.footer__icon--insta {
  grid-area: insta;
  width: 40px;
  padding-top: 70px;
  justify-self: left;
}

.copy__right {
  grid-area: copyright;
  color: var(--background1);
}


/*               */
/*  Om mig start */
/*     mobil     */


 .ommig__grid {
   display: grid;
   grid-template-columns: 1fr;
   grid-template-areas:
     "portrat"
     "ommig";
   gap: 20px;
   padding: 20px;
   place-items: center;
   /* centrerer boksene horisontalt */
   text-align: left;
   /* venstrejusterer tekst */
   
 }

 /* navnet på billedet til griden  */
 .__portrat {
   grid-area: portrat;
   width: 100%;
   max-width: 600px;
 }
/* navnet på tekstfeltet i griden  */
 .om__mig {
   grid-area: ommig;
   width: 100%;
   
 }
 
/* overskrift i ommig  */
.__hvem {
  padding: 30px;
  text-align: center;
  color: var(--primary);
}

/* underoverskrift i ommig */
.kalde__mig {
  justify-self: center;
  text-align: center;
  color: var(--accent);
}

/* portræt billede */
.__portrat {
  justify-self: center;
  padding-top: 30px;
  width: 300px;
}

/* teksten om mig  */
.om__mig {
  width: 340px;
  padding: 20px;
  padding-bottom: 30px;
  justify-self: center;
}

/* den særlige gule tekst på kreativ men også overskrift på knappen i webdesign i "projekter"  */
.gul__tekst {
  color: var(--secondary);
}

/* den hvide tekst over knappen i projekter ved InDesign */
.hvid__tekst {
  color: var(--background1)
}

/*              */
/*  om mig slut */
/*              */

/*                                    */
/*           Projekter start          */
/*             selvportræt            */

/*                             */
/*     slide show mobil        */
/*                             */

/* knapfunktion på slideshowet */
button {
  font-size: 18px;
  cursor: pointer;
  border: none;
  background-color: transparent;
  width: 100%;
}

/* slide show knap, på selvportræt, skovspire og paperart*/
.loopknap {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
}

.popup {
  display: none;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background: rgba(0, 0, 0, 0.8);
}

.close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 40px;
  color: white;
  font-weight: bold;
  cursor: pointer;
  z-index: 1000;
}

.slideshow-container {
  position: relative;
  max-width: 700px;
  margin: 100px auto;
}

.slide {
  display: none;
  width: 100%;
}

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  font-size: 40px;
  color: white;
  padding: 16px;
  margin-top: -22px;
  transition: 0.3s;
  user-select: none;
}

.prev {
  left: 0;
}
.next {
  right: 0;
}

.prev:hover,
.next:hover,
.close:hover {
  color: #ccc;
}
/*                               */
/*     slide show mobil slut     */
/*                               */

/* hele selve griden med projekt og tekst samt hvor mange koloner der er. */
.projektogtekst__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  grid-template-areas: /* række føljen af indhold i den ene kolonne */
  "projektbillede"
    "projektBlock"
    "projektEkstra";
  padding: 20px;
  place-items: center;
  /* centrerer boksene i midten */
}


.projekt__Block,
.projekt__Ekstra,
.projekt__billede {
  text-align: left;
  /* venstrejuster tekst inde i boksene */
  max-width: 700px;
  /* begræns bredden på tekstboksen */
  margin: 0 auto;
    /* centrerer tekstboksen i viewporten */
}
/* hele griden*/
.projektogtekst__grid>* {
  max-width: 600px;
}

/* griden for projekt teksten */
.projekt__Block {
  grid-area: projektBlock;
  align-items: center;
}
/* navnet på den grid med en knap i */
.projekt__Ekstra {
  grid-area: projektEkstra;
  align-items: center;
}
/* projekt billedernes fælles tag*/
.projekt__billede{
  grid-area: projektbillede;
  justify-self: center;
  padding: 30px;
}


/* rettelse af billedernes størrelse i griden */
.projektogtekst__grid img {
  width: 100%;
  height: auto;
}

/* overskriften på projekt siden  */
.__projekter {
  padding: 30px;
  text-align: center;
  color: var(--primary);
}
/* underoverskrift  */
.projekt__tekst {
  justify-self: center;
  text-align: center;
  color: var(--accent);
  padding-left: 30px;
  padding-right: 30px;
}
/* underoverskriften på brødteksten */
.projekt__titel {
  width: 80%;
  justify-self: center;
  padding-left: 20px;
  color: var(--secondary);
}
/* de overskrifter der skrevet inden i de grønne sektioner */
.lysere__tekst {
  color: var(--background1);
}
/* selve projekt teksten */
.projekt__indhold {
  width: 80%;
  padding: 20px;
  padding-bottom: 30px;
  justify-self: center;
}

/*                                     */
/*              ny sektion             */
/*               Økolariet             */
/* farvebaggrund på sektionen */
.oeko__farve {
  background-color: var(--accent);
}

/*                                     */
/*              ny sektion             */
/*            Underenhund.dk           */

/* teksten med "hvis du vil se mere af mere:" */
.cta__web {
  justify-self: center;
}
/* skriften i knappen med teksten "tryk her" */
.cta__knap {
  display: inline-block;
  padding: 26px 30px;
  background-color: var(--primary);
  color: var(--background1);
  font-weight: bold;
  font-size: 18px;
  text-decoration: none;
  cursor: pointer;
  border: none;
  text-align: center;
  
}
/* gør at knappen skifter farve når man hover */
.cta__knap:hover {
  background-color: var(--secondary);
  border: none;
}
/* gør at knappen bliver centreret */
.__center {
  justify-self: center;
  padding: 20px;
}

/*                                     */
/*              ny sektion             */
/*                cricut               */

/* baggrundsfarve på sektionen */
.cricut__farve {
  background-color: var(--accent);
}

/*                                     */
/*              ny sektion             */
/*                Gyngen               */

/* placering af videoen  */
.animation__film {
  justify-self: center;
  padding-bottom: 30px;
}
/* størrelsen på videoen */
video {
  width: 100%;
}

/*                                     */
/*              ny sektion             */
/*              Indesign               */

/* baggrundsfarven på sektionen */
.foto__farve {
  background-color: var(--accent);
}

/*                   */
/*   kontakt start   */
/*                   */

/* formular hentet fra youtube gennem github = https://github.com/codingmarket07/Responsive-Contact-us-form/blob/master/README.md */

.wrapper {
  position: relative;
  width: 100%;
  max-width: 100%;
  background: var(--background1);
  padding: 30px;
  border-radius: 0%;
}

.wrapper .title h1 {
  color: var(--primary);
  text-align: center;
  margin-bottom: 25px;
}

.kontaktundertitel {
  color: var(--accent);
  text-align: center;
  margin-bottom: 25px;
}

.contact-form {
  width: 70%;
  justify-self: center;
  display: flex;
  flex-direction: column;
}

.input-fields {
  display: flex;
  flex-direction: column;
  margin-right: 4%;
}

.input-fields,
.msg {
  width: 100%;
}

.input-fields .input,
.msg textarea {
  margin: 10px 0;
  background: transparent;
  border: 0px;
  border-bottom: 2px solid var(--secondary);
  padding: 10px;
  color: black;
  width: 100%;
}

.msg textarea {
  height: 80px;
}

::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: var(--primary);
  font-family: poppins;
  font-weight: 600;
  font-size: 19.2px;
}
::-moz-placeholder {
  /* Firefox 19+ */
  color: var(--primary);
}
:-ms-input-placeholder {
  /* IE 10+ */
  color: var(--primary);
}

.btn {
  background: var(--primary);
  text-align: center;
  padding: 15px;
  color: var(--background1);
  cursor: pointer;
  text-transform: uppercase;
  font-family: poppins;
  font-size: 15px;
  font-weight: bold;
}

.kontakt__information {
  justify-self: center;
  text-align: center;
  padding: 30px;
}

/*                   */
/*    kontakt slut   */
/*                   */

/* her fra handler det om hvad der sker på computeer versionen */
@media (min-width: 600px) {
  /*              */
  /*   forsiden   */
  /*   computer   */
  .top__bar {
    display: none;
  }

  .__logo {
    width: 150px; /* størrelse på logoet */
  }

  .hel__logo {
    display: none;
  }

  .langt__logo {
    display: none;
  }
/* computer versionen har en menu lavet med flex */
  .__menu {
    display: flex;
    background-color: var(--background1);
    justify-content: space-between; /* Skubber indholdet til hver sin ende */
    align-items: center;
    padding: 30px;
    font-family: poppins, sans-serif;
    margin: 0;
  }
/* ændre designet på på de klik bare menu titler */
  a {
    color: var(--accent); /* farve på de linkede menu knapper */
    text-decoration: none; /* fjerner stregen under menu-navnene */
  }
/* ændre designet i flexen visuelt */
  .nav__links {
    display: flex;
    gap: 44px; /* ifølge figma er der 44px mellem hver knap*/
    list-style: none; /* at punktopstilling ikke har punkter*/
  }

  /*------------------------*/
  /*---------forside--------*/
  /*------------------------*/

  /* overskrift på grid containeren på forsiden */
  .grid__container {
    grid-template-areas: "teksthex box";
  }
/* teksten med mit navn og uddannelse */
  .tekst__Forside {
    grid-area: tekstForside;
    padding: 0;
    margin: 50px;
  }
/* linje skift i mit navn */
  .__knak {
    display: none;
  }
/* knappen "se projekter" på forsiden  */
  .forside__knap {
    grid-area: forsideknap;
    place-self: end;
    margin: 50px;
  }

  /* gør at knappen skifter farve når man hover */
  .forside__knap:hover{
    background-color: var(--secondary);
  }
/* sektionen/class med billedet, helt logo, tekst og knap */
  .__forside {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    height: 700px;
    grid-template-areas: "tekstForside ." ". forsideknap";
  }
/* billedet af mig */
  .__portrat {
    grid-area: portrat;
    padding: 30px;
    width: 70%;
  }
/* teksten med beskrivelsen af mig */
  .om__mig {
    grid-area: ommig;
    width: 100%
    
  }
/* griden i om mig */
  .ommig__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0px;
    grid-auto-flow: row;
    grid-template-areas: "portrat ommig";

    padding: 30px;
  }
  /*------------------*/
  /*-----projekter----*/
  /*-----computer-----*/
/* dette skjuler projektbilledet fra mobil versionen */
  .projekt__billede {
    display: none;
  }
  /* computer projektbilledet til desktop version */
  .comprojekt__billede {
    grid-area: comprojektbillede;
    width: 100%;
    justify-self: stretch;
    align-self: stretch;
    padding: 30px;
  }

  

  /*                    */
  /*    slide show      */
  /*                    */

  button {
    cursor: pointer;
    border: none;
    background-color: transparent;
    width: 100%;
   
  }

  .loopknap {
    width: 100%;
    
  }

  .popup {
    display: none;
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background: rgba(0, 0, 0, 0.8);
  }

  .close {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 40px;
    color: white;
    font-weight: bold;
    cursor: pointer;
    z-index: 1000;
  }

  .slideshow-container {
    position: relative;
    max-width: 700px;
    margin: 100px auto;
  }

  .slide {
    display: none;
    width: 100%;
  }

  .prev,
  .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    font-size: 40px;
    color: white;
    padding: 16px;
    margin-top: -22px;
    transition: 0.3s;
    user-select: none;
  }

  .prev {
    left: 0;
  }
  .next {
    right: 0;
  }

  .prev:hover,
  .next:hover,
  .close:hover {
    color: #ccc;
  }
  /*                       */
  /*   slide slutter       */
  /*                       */
/* under overskrift til brødteksten i projekter  */
  .projekt__titel {
    width: 100%;
    padding: 0px;
  }
/* brødteksten i projekterne */
  .projekt__indhold {
    width: 100%;
    padding: 0;
    padding-top: 20px;
  }
/* navn på rubrikken i griden med indhold til projektet */
  .projekt__Block {
    grid-area: projektBlock;
    margin: 0px;
    padding: 30px;
    
  }
/* navn på rubrikken med en knap i  */
  .projekt__Ekstra {
    grid-area: projektEkstra;
    align-items: center;
  }
/* knappen med teksten "tryk her" */
  .cta__knap {
    grid-area: ctaknap;
  }
/* griden for det hele i hver projekt sektion */
  .projektogtekst__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr auto;
    gap: 10px;
    grid-auto-flow: row;
    grid-template-areas:
      "projektBlock comprojektbillede"
      "projektEkstra comprojektbillede";
    padding: 30px;
   
  }
  /*------------------------*/
  /*--- kontakt formular----*/
  /*------------------------*/

  .wrapper {
    justify-self: center;
  }

  .contactform {
    max-width: 600px;
    
  }

  .kontaktundertitel {
    max-width: none;
  }

  html {
    font-size: 100%;
  }
}

/* elementer fra computer versionen  der skal skjules i når der skaleres ned til mobil versionen, heriblandt flex menuen */
@media (max-width: 600px) {
  /* flex menuen fra desktip versionen */
  .__menu {
    display: none;
  }
/* projekt billedet fra dekstop versionen bliver skjult fra mobil versionen */
  .comprojekt__billede {
    display: none;
  }

  .button {
    margin: 0;
  }

  .web__billede {
    display: none;
  }


}