/* 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; /* Display-font */
    --font: 'Noto Sans', sans-serif; /* Brødtekst-font */
}

/* Indstiller baggrundsfarven for hele siden */
body {
    background-color: var(--lysGul);
}

/* Definerer overskriftsfarve (h2 og h3) tilpasset ægløsningssiden */
h2, h3 {
    color: var(--eglosningRod);
}

/* Style for knappen med id 'tryk' */
#tryk {
    color: var(--eglosningRod); /* Tekstfarve for knappen */
    width: 35%; /* Knappens bredde som en procentdel af siden */
    margin: auto; /* Centrerer elementet horisontalt */
    z-index: 100; /* Lægger knappen øverst i stacking-rækkefølgen */
    position: absolute; /* Placering i forhold til dens nærmeste positionerede forælder */
    top: 650px; /* Justerer knappen vertikalt */
    left: 5%; /* Justerer knappen horisontalt */
    font-size: 40px; /* Tekststørrelse */
    text-align: center; /* Centrerer teksten i knappen */
}

/* Style for elementet med id 'livmoder' */
#livmoder { 
    height: 750px; /* Højde af elementet */
    width: 95%; /* Bredde som procentdel af forældreelementet */
    margin: auto; /* Centrerer elementet horisontalt */
}

/* Ændrer farven på Leaflet-popup-elementerne
   Kilde: https://stackoverflow.com/questions/20532635/how-can-i-change-the-background-color-of-a-leaflet-popup */
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
    background-color: var(--eglosningRod); /* Baggrundsfarve */
    color: var(--lysGul); /* Tekstfarve */
}

/* Ændrer Leaflet-containerens baggrundsfarve til gennemsigtig
   Kilde: https://gis.stackexchange.com/questions/106811/make-leaflet-map-background-transparent */
.leaflet-container {
    background-color: rgba(255, 0, 0, 0.0); /* Gennemsigtig baggrund */
}

/* Style for elementet med id 'grafPeak', der indeholder tekst og graf */
#grafPeak {
    /*display: flex; 
    justify-content: space-between;*/ /* Kommentaret kode til fremtidig brug */
    width: 95%; /* Bredde som procentdel af forældreelementet */
    margin: auto; /* Centrerer elementet horisontalt */
    color: var(--eglosningRod); /* Tekstfarve */
}

/* Indpakning af tekst omkring et billede
   Kilde: https://www.geeksforgeeks.org/how-to-wrap-the-text-around-an-image-using-html-and-css/ */
.graf {
    float: right; /* Placerer elementet til højre */
    margin: 15px; /* Giver afstand omkring elementet */
    width: 60%; /* Billedets bredde som procentdel af forældreelementet */
}