/*Jeg ville gerne have haft mine tre afsnit delt op. Hvert afsnit var fobundet til et af de tre blade. Teksten vil kun blive synlig, når man trykkde på det respektive blad. Det kunne jeg desværre ikke få den til. Som alternativ prøvede jeg at få bladene til at virke som afsnits-knap. Tryk på et blad og du ville blive ført ned til det respektive afsnit.

Den helt oprindelige ide var at lave en karusel-roster. Et blad vil være i midten og meget større end de to andre ude i siden. Bladet villed indeholde teksten. Man ville så kunne klikke på bladende ved siden af og den man trykker på vil så komme ind i midten i stedet. Men det skulle man vist bruge javascript til

Nede i bunden ligger resterne af forsøg på at lave en loading-animation. Hver gang man kommer ind på en ny side ville den animation blive afspillet først. Men det skal man vist også bruge javascript til at fungere*/ 

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

body {
    background-color: #00051a;
}
h1{
    color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15rem;
}

ul {
    list-style: none;
    padding: 0;
}

ul.menu {
    position: absolute;
    top: 1.25rem; /* 20px -> 1.25rem */
    right: 1.25rem; /* 20px -> 1.25rem */
}

ul.menu > li {
    position: relative;
    display: inline-block;
}

ul.menu li a {
    display: block;
    color: #FFF;
    text-decoration: none;
    font-size: 2rem; /* Holder denne i rem for konsistent skala */
    padding: 0.625rem; /* 10px -> 0.625rem */
}

ul.menu li img {
    width: 10.25rem; /* 100px -> 6.25rem */
}

.hovedmenuer {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background-color: #333;
    padding: 0;
    width: 15.625rem; /* 250px -> 15.625rem */
    z-index: 999;
}

.hovedmenuer li {
    display: block;
}

.hovedmenuer li a {
    padding: 0.625rem; /* 10px -> 0.625rem */
    color: #FFF;
    font-size: 1.5rem; /* Holdt konsistent */
    background-color: #132949;
    outline: 0.125rem solid rgb(255, 255, 255); /* 0.2rem */
}

.submenuer {
    display: none;
    position: absolute;
    top: 72%;
    right: 100%;
    background-color: #444;
    width: 66.67%; /* 2/3 af hovedmenuens bredde */
}

.submenuer li a {
    padding: 0.625rem; /* 10px -> 0.625rem */
    color: #FFF;
    font-size: 1.2rem; /* Mindre font for undermenuer */
    background-color: #132949;
    outline: 0.125rem solid rgb(255, 255, 255); /* 0.2rem */
}

ul.menu li:hover > .hovedmenuer {
    display: block;
}

.hovedmenuer li:hover > .submenuer {
    display: block;
}

ul.menu li a:hover,
.hovedmenuer li a:hover,
.submenuer li a:hover {
    outline: 0.125rem solid orange; /* 0.2rem */
}

/* Sørger for, at ingen menuer går uden for viewporten */
ul.menu {
    max-width: 100vw;
}

.hovedmenuer,
.submenuer {
    max-width: calc(100vw - 1.25rem); /* Undgå at menuer går uden for visningsområdet */
}

main {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 100vh;
}

.herbarium {
    position: relative;
    width: 300px;
    height: 400px;
    margin-left: 20px;
}
.herbarium .top-leaf{
    
    position:absolute;
    top: 50%;
    
}

.herbarium .middle-leaf{
    position:absolute;
    top: 25%;
    
}

.herbarium .bottom-leaf{
    position:absolute;
    top: 0%;
    
}

.blade {
    position: absolute;
    width: 300px;
    height: 400px;
    object-fit: cover;
    transition: transform 0.5s ease, left 0.5s ease, z-index 0.5s ease;
    left: 0;
    z-index: 1;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.blade:nth-child(1) {
    top: 0%; 
    z-index: 1;
    
}
.blade:nth-child(2) {
    top: 25%; 
    z-index: 1;
    
}

.blade:nth-child(3) {
    top: 50%; 
    z-index: 3;
    
}

/* Behold z-index for andre billeder */
#blad1:target ~ .blade:nth-child(2), #blad2:target ~ .blade:nth-child(2) {
    z-index: 2;
}

#blad1:target ~ .blade:nth-child(3), #blad2:target ~ .blade:nth-child(3), #blad3:target ~ .blade:nth-child(3) {
    z-index: 3;
}

/* Når et billede er klikket på (taget med id) */
:target {
    transform: translateX(300px);
    z-index: 10;
}



/* Vis teksten for hvert blad, når det er valgt */
.tekst-blad1 :target {
    display: block;
}

#blad2:target ~ #tekst-blad2 {
    display: block;
}

#blad3:target ~ #tekst-blad3 {
    display: block;
}




.tekster{
    position: absolute;
    width: 42vw;
    outline: #FFF;
    padding: 1.5rem;
    
    left: 50rem;
    color: white;
    font-size: 2rem;
    background-color: #132949;
    border-radius: 2em;
}
.tekster ul{
    list-style: none;
    padding-left: 5%;
}

.tekster ul li{
    position: relative; /* Gør det muligt at placere torus'en før hvert li-element */
    margin-bottom: 2rem; /* Afstand mellem punkterne */
}

.tekster ul li::before{
    content: ""; /* Ingen tekst - kun en visuel effekt */
    position: absolute;
    left: -3rem; /* Placering af torus til venstre for teksten */
    top: 1rem;
    width: 1rem;
    height: 1rem;
    border-radius: 50%; /* Gør formen rund */
    
    /* Torus-design ved at kombinere border og baggrund */
    border: 0.3rem solid orange; /* Ydre kantfarve */
    background-color: rgba(255, 255, 255, 0); /* Indre farve - kan være gennemsigtig */
}
/* Tekstelementer */
h2 {
    font-size: 3.5rem;
 }
 p{
padding-top:1rem ;
 }


.titel2, .titel3{
    padding-top: 5rem;
}

 h3{
    padding-top: 1.5rem;
    font-size: 2.5rem;
    padding-bottom: 0.5rem;
 }




 


/* Gør videoen fullscreen 
#video-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color:#00082b;
    z-index: 9999; /* Sørg for, at videoen er øverst 
    animation: fadeOut 2s ease forwards; /* Fade out after 5 seconds 
    animation-delay: 2s; /* Delay the fade-out for 10 seconds 
}

#intro-video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Sørger for at videoen fylder hele skærmen 
}



/* Initially hide the content using opacity and visibility 
#content {
    opacity: 0;
    visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position:relative;
    background-color:#00082b;
    background-image:url(../img/branch.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    
    z-index: 1;
    transition: opacity 2s ease, visibility 0s linear 12s; /* Transition delay matches total time 
}

/* Fade out animation for video overlay 
@keyframes fadeOut {
    to {
        opacity: 0;
        visibility: hidden;
    }
}

/* Make the content visible after the video overlay fades out 
#video-overlay + #content {
    opacity: 1;
    visibility: visible;
    transition-delay: 12s; /* Delay showing the content for 12 seconds 
}