* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Variabler som kan bruges gennem CSS*/
:root {
  /* Farver */
  --primary-color--: #c7d4e3;
  --secondary-color--: #da2328;
  --text-color--: black;
  --btn-color--: #52805a;

  /* Typografier */
  --header-font--: "Bebas Neue";
  --text-font--: "Inter", sans-serif;

  /* Tekst størrelser */
  --font-size-small: 13px;
  --font-size-base: 16px;
  --font-size-medium: 18px;
  --font-size-large: 20px;
  --font-size-xl: 24px;
  --font-size-xxl: 28px;
}

/* =====================================================================================================
 Body
==================================================================================================== */
/* generelle styles */
body {
  font-family:
    "Bebas Neue",
    sans-serif;
  background-color: #c8d4e3;
  color: #333;
  text-align: center;
  margin: 0;
  /* padding: 2rem; */
}

/* =====================================================================================================
 Tekster
==================================================================================================== */
/* typografi */

h1,
h2 {
  font-family: "Bebas Neue", sans-serif;
}

p {
  font-family: "Inter", sans-serif;
}

/* ----- titler ----- */

#ovartaci1 {
  color: white;
  top: 6rem;
  font-size: 7rem;
  font-weight: lighter;
}

#ovartaci2 {
  color: red;
  top: 10rem;
  font-size: 15em;
  letter-spacing: 1rem;
}

#introText {
  max-width: 60%;
  text-align: center;
  font-size: 1.25rem;
  margin: 0 auto;
}

#ovartaci1,
#ovartaci2 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: "Bebas Neue", sans-serif;
  z-index: 1;
}

/* ----- tekst ----- */
p {
  position: relative;
  bottom: 3rem;
}

/* =====================================================================================================
 Slider
==================================================================================================== */
/* ----- Slider container ----- */
.slider-container {
  height: 20rem;
  width: 100%; /* Bredde – kan justeres */
  margin-bottom: 10rem;
  overflow: hidden; /* Skjuler det, der stikker ud */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* Track – her ligger alle billeder på række */
.slider-track {
  display: flex;
  transition: transform 0.6s ease-in-out; /* Glidende animation */
}

/* Hvert billede fylder hele containerens bredde */
.slide-img {
  min-width: 100%; /* Billedet fylder hele containerens bredde */ /* Forhindrer at billedet krymper */
  display: block;
  object-fit: cover; /* Sørger for at billedet dækker pænt */
}

/* =====================================================================================================
 Knapper
==================================================================================================== */

.buttonContainer {
  position: relative;
  bottom: 2rem;
}

#generateCodeButton {
  background-color: #52805a;
  color: white;
  border: none;
  padding: 0.8rem 1.5rem;
  margin: 0.5rem;
  font-family: "Inter", sans-serif;
  font-size: 1rem;
  font-weight: bold;
  border-radius: 40px;
  transition: background 0.2s;
}

#howItWorksButton {
  background-color: #ffffff00;
  color: black;
  border: solid 3px #da2328;
  padding: 0.8rem 1.5rem;
  margin: 0.5rem;
  font-family: "Inter", sans-serif;
  font-size: 1rem;
  font-weight: bold;
  border-radius: 40px;
  transition: background 0.2s;
}

/* =====================================================================================================
 Overlay til login
==================================================================================================== */

.codeOverlay {
  display: none; /* Skjult som standard */
  position: fixed; /* Bliver på plads, selvom man scroller */
  z-index: 1000; /* Lægger oven på alt andet */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7); /* Halvgennemsigtig baggrund */
  justify-content: center;
  align-items: center;
}

/* overlay content (den hvide boks) */
.codeOverlayContent {
  background-color: var(--primary-color--);
  padding: 2rem;
  border-radius: 2rem;
  width: 90%;
  max-width: 50rem;
  text-align: center;
  font-family: "inter", sans-serif;
  position: relative;
  box-shadow: 0 1rem 1.5rem rgba(0, 0, 0, 0.3);
}

/* Luk-kryds */
.closeBtn {
  position: absolute;
  top: -0.5rem;
  right: 1.5rem;
  font-size: 4rem;
  font-weight: bold;
  cursor: pointer;
  color: var(--secondary-color--);
}

/* Input-felt */
#codeInput {
  width: 90%;
  padding: 1rem;
  margin: 1rem 0;
  font-size: 1.2rem;
  text-align: center;
  border: 2px solid #ccc;
  border-radius: 2rem;
  font-family: inherit;
}

/* Knapper i overlay */
.codeButtons button {
  background-color: #52805a;
  color: white;
  border: none;
  padding: 8px 20px;
  margin: 5px;
  border-radius: 40px;
  font-family: "Inter", sans-serif;
  font-size: 0.9rem;
}
#codeHowItWorksBtn {
  background-color: transparent;
  color: #000000;
  border: 2px solid #da2328;
}