/*kodekommentar lavet med chatGPT: https://chatgpt.com/share/682aedc8-fbe0-800e-acb5-9f22b1b8f3f5*/

/* Importerer skrifttypen 'Impact' til brug som display-font */
@import url('https://fonts.cdnfonts.com/css/impact');

/* Importerer skrifttypen 'Noto Sans' til brug som brødtekst-font */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

/* Definerer CSS-variabler for farver og skrifttyper */
:root {
    --lysGul: #f0d597; /* Lys gul farve */
    --orange: #ee6f20; /* Orange farve */
    --lyserod: #f7d1be; /* Lyserød farve */
    --primærRod: #b02519; /* Primær rød farve */
    --eglosningRod: #82363b; /* Rød farve specifikt til ægløsningssiden */
    --forsideRod: #b24c47; /* Rød farve specifikt til forsiden */

    --displayFont: 'Impact', sans-serif; /* Skrifttype til overskrifter */
    --font: 'Noto Sans', sans-serif; /* Skrifttype til brødtekst */
}

/* Nulstilling af box-sizing og margin/padding for alle elementer */
* {
    box-sizing: border-box; /* Inkluderer padding og border i elementers totale bredde/højde */
    margin: 0; /* Fjern standardmargin */
    padding: 0; /* Fjern standardpadding */
}

/* Styling for main-elementet */
main {
    height: 100vh; /* Fuld højde af viewporten */
    width: 100vw; /* Fuld bredde af viewporten */
    padding-top: 6%; /* Tilføjer afstand fra toppen */
    background: linear-gradient(90deg, var(--eglosningRod) 50%, var(--forsideRod) 50%);
    /* Gradientbaggrund opdeler skærmen i to lige store farvezoner */
}

/* Styling for h2-overskrifter */
h2 {
    color: var(--lysGul); /* Lys gul tekstfarve */
    text-align: center; /* Centrerer teksten midt på skærmen */
}

/* Styling for cyklus - svg af en cyklus */
.cyklus {
    position: relative; /* Relativ positionering for at kunne placere indre elementer */
    width: 90%; /* Sætter bredden til 90% af slærmen */
    justify-self: center; /* Centrerer elementet */
    margin: auto;
    display: flex; /* Bruger flexbox til layoutstyring */
    z-index: 1; /* Sørger for, at dette element vises bag elementer med højere z-index */
}

/* Styling for forsideknapper */
#forsideknapper {
    margin-top: 100px; /* Tilføjer afstand over knapperne, for at justere positionen efter cyklussen */
    position: absolute; /* Absolut positionering indenfor det nærmeste positionerede forælder */
    display: grid; /* Bruger CSS grid til layout */
    rotate: 45deg; /* Drejer hele grid-elementet 45 grader */
    grid: 1fr 1fr / 1fr 1fr; /* Definerer et grid med 2 rækker og 2 kolonner */
    opacity: 0.02; /* Gør elementet næsten gennemsigtigt */
    width: 750px; /* Fast bredde på elementet */
    height: 750px; /* Fast højde på elementet */
    left: 13.2%; /* Justerer elementets vandrette position */
    z-index: 2; /* Sørger for, at dette element vises foran andre lavere lag */
}