@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand&family=Readex+Pro:wght@200;400;700&display=swap');

:root {
   --bg-clr: #ffffff;
   --acc-clr: #f7d442;
   --acc-2-clr: #e54f5a;
   --acc-3-clr: #4682b4;
   --text-clr: #333333;
   --nav-text: #ffffff;
   --shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: Arial, Helvetica, sans-serif;
}

header {
   background-color: var(--acc-3-clr);
   box-shadow: var(--shadow);
   position: sticky;
   top: 0;
   z-index: 100;
}

main {
   padding: 20px;
   background-color: var(--acc-clr);
   min-height: 100vh;
}

nav {
   display: flex;
   justify-content: space-between;
   align-items: center;
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 20px;
}

nav h1 {
   margin: 0;
   font-family: 'Readex Pro';
   color: var(--nav-text);
   font-size: 2rem;
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

nav ul {
   display: flex;
   list-style-type: none;
   margin: 0;
   padding: 0;
}

nav li {
   margin: 0;
}

nav li a {
   display: block;
   padding: 15px 20px;
   color: var(--nav-text);
   text-decoration: none;
   font-family: 'Readex Pro', sans-serif;
   font-weight: 500;
   transition: background-color 0.3s ease;
   border-right: 1px solid rgba(255, 255, 255, 0.2);
}

nav li:last-child a {
   border-right: none;
}

nav li a:hover,
nav li a:focus {
   background-color: var(--acc-clr);
   color: var(--text-clr);
}

/* Hamburger Button Styles */
.nav-toggle {
   display: none;
   flex-direction: column;
   justify-content: space-around;
   width: 30px;
   height: 25px;
   background: transparent;
   border: none;
   cursor: pointer;
   padding: 0;
   z-index: 101;
}

.nav-toggle span {
   width: 100%;
   height: 3px;
   background-color: var(--nav-text);
   transition: all 0.3s ease;
   transform-origin: center;
}

.nav-toggle.active span:nth-child(1) {
   transform: rotate(45deg) translate(6px, 6px);
}

.nav-toggle.active span:nth-child(2) {
   opacity: 0;
}

.nav-toggle.active span:nth-child(3) {
   transform: rotate(-45deg) translate(7px, -5px);
}

.disabled {
   opacity: 0.5;
   pointer-events: none;
}

.nerd-c-text {
   color: var(--acc-clr);
   font-family: Readex Pro;
}

.content-card {
   background-color: var(--bg-clr);
   padding: 5% 5%;
   border-radius: 10px;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
   width: 100%;  /* Fuld bredde for at fylde skærmen */
   margin: 0;  /* Ingen margin – lader main's padding håndtere luften */
   min-height: 80vh;
}

.content-card h1 {
   margin-bottom: 25px;
   color: var(--text-clr);
   font-size: clamp(2.5rem, 5vw, 4rem);  /* Responsiv font-størrelse – tilpasser sig skærmen */
}

.content-card p {
   margin-bottom: 20px;
   line-height: 1.8;  /* Mere luft mellem linjerne */
   color: var(--text-clr);
   font-size: 1.2rem;  /* Lidt større tekst for fyldning */
}

/* Mobile */
@media (max-width: 768px) {
   .nav-toggle {
      display: flex;
   }

   nav ul {
      position: fixed;
      top: 0;
      right: -100%;
      height: 100vh;
      width: 250px;
      background-color: var(--acc-3-clr);
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      transition: right 0.3s ease;
      padding-top: 80px; /* Space for header height */
      box-shadow: -5px 0 10px rgba(0, 0, 0, 0.2);
   }

   nav ul.active {
      right: 0;
   }

   nav li {
      width: 100%;
      text-align: center;
   }

   nav li a {
      border-right: none;
      border-bottom: 1px solid rgba(255, 255, 255, 0.2);
      padding: 20px;
      width: 100%;
   }

   nav li:last-child a {
      border-bottom: none;
   }

   nav h1 {
      font-size: 1.5rem;
   }

   /* Mobile-justeringer for main og kort – fuld fyldning her også */
   main {
      padding: 10px;  /* Mindre padding på mobil for maks fyldning */
   }
   
   .content-card {
      padding: 8% 5%;  /* Lidt mere vertikal padding på mobil */
      min-height: 70vh;  /* Tilpasset højde på mobil */
   }
}