/* Erklære variabler */
:root {
  --clr-rose: 356 16% 52%;
  --clr-light: 35 100% 92%;
  --clr-dark: 355 16% 17%;
  --clr-hover: 191 96% 63%;


  --ff-regular: 'Nunito', sans-serif;
  --ff-heading: 'Tangerine', cursive;
  --ff-handwriting: 'Caveat', cursive;

  --fs-fix: 20px;
  --fs-regular: 1rem;
  --fs-large: 2rem;
  --fs-xxlarge: 6rem;
  --fs-supersized: clamp(6rem, 25vw + 1rem, 40rem);

  --c-txt-100: hsl(0, 0%, 100%);

  --c-bg-0: hsl(0, 0%, 0%);
  --c-hue-0: 0;
  --c-saturation-0: 0%;
  --c-lightness-0: 0%;
  --c-alpha-75: .75;

  --c-bg-hsla: hsl(var(--c-hue-0) var(--c-saturation-0) var(--c-lightness-0) / var(--c-alpha-75));

  --c-test-1: hsla(315, 86%, 53%, 0.75);
  --c-test-2: hsla(157, 86%, 53%, 0.75);
  --c-test-3: hsla(46, 86%, 53%, 0.75);
}

/* Nulstiller elementer */
* {
  margin: 0;
  padding: 0;
  font-family: var(--ff-regular);
  font-size: var(--fs-fix);
  box-sizing: border-box;
}

img {
  max-width: 100%;
}

/* Sætter farve og design for browser som understøtter det */
body::-webkit-scrollbar {
  width: .8rem; /* Bredde af scrollbar */
}

::-webkit-scrollbar-track {
  background: hsl(var(--c-bg-0)); /* Baggrundsfarve */
}

::-webkit-scrollbar-thumb {
  background: darkorange; /* Frontfarve */
  border-radius: .8rem;
  border: 0.3rem solid var(--c-bg-0);  /* "Margin" omkring scrollbar */
}

::-webkit-scrollbar-thumb:hover {
  background-color: orange; /* Frontfarve aktiv */
}

@supports (scrollbar-color: black white) {
  * {
    scrollbar-color: darkorange black; /* Frontfarve baggrundsfarve */
    scrollbar-width: thin; /* Bredde */
  }
}

  body {
    background-image: url("/images/anonym.jpg");
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
    color: #333;
  }
  
  .temp {
    min-height: 100vh;
    width: 100%;
    padding: 2em;
  }

  header {
    width: 100%;
    position: fixed;
    padding: 1em;
    display: flex;
    background-color: var(--c-bg-hsla);
  }

  .logo {
    padding-right: 1em;
  }

  .nav {
    flex-grow: 1;
  }

  .nav-list {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    display: flex;
    gap: 1em;
  }

  .nav-list li:first-of-type {
    margin-left: auto;
  }

  .nav-list li:nth-last-of-type(1){
    margin-left: auto;
  }

  main {
    padding-top: 100vh;
  }

  .test {
     min-height: 100vh; 
    background-color: var(--c-test-1);
}

@media only screen and (max-width: 40rem) {
  header {
    background-color: transparent;
  }

  .logo,
  .nav ul {
    display: none;
  }
}