/* Define variables in the :root */
:root {
    --backgr: #000000;
    --purple: #8B4DBA;
    --contrast: #000000;
    --dark-purple: #7451FF;
    --text: #FFFFFF;
}

#backgr-video {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%; 
    min-height: 100%;
}

h1 {
    font-family: "hwt-arabesque", sans-serif;
    font-weight: 400;
    font-size: 50px;
    font-style: normal;
    color: var(--text);
}

h2 {
    font-family: "hwt-arabesque", sans-serif;
    font-weight: 400;
    font-size: 30px;
    font-style: normal;
    color: var(--text);
}

h3, h4, h5, h6 {
    font-family: "roca", sans-serif;
    font-weight: 700;
    font-style: normal;
    color: var(--text);
}

p {
    font-family: "roc-grotesk", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: var(--text);
}

/* Use your variables on elements */
.video-background {
    position: absolute;
    object-fit: cover;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Sørger for, at video er i baggrunden, så indholdet kan vises ovenpå */
}

/* Grundlæggende styling */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: var(--backgr); /* Er til for hvis bg-video ikke viser, så kommer der farve */
}

/* Styling til main */
main {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw; /* Fyld hele skærmbredden */
    height: 100vh; /* Fyld hele skærmhøjden */
}

/* Flag */
#change-language {
    opacity: 1;
    animation: fadeIn 0.5s linear;
    animation-iteration-count: 1;
   }
   
   /* Flag animation */
   @keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }  
   }
   
   /*Ikone til flag og højtaler*/
   .icons {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    gap: 15px;
   }   

/* Ikoner til flag og højtaler */
.icons {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    gap: 15px;
}

/* Container for cirklen */
.container {
    position: relative;
    width: 700px; /* Bredden på containeren */
    height: 700px; /* Højden på containeren */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.5s ease; /* Transition for at flytte cirklen */
}

/* .container.move-left:
   Når klassen "move-left" tilføjes til .container, flyttes hele containeren 300px til venstre
   og skaleres til 80% af sin oprindelige størrelse, hvilket skaber plads til detaljevisningen af det valgte stjernetegn */
.container.move-left {
    transform: translateX(-300px) scale(0.8); /* Flyt til venstre og reducer størrelse */
}

.circle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.zodiac-large {
    display: flex;
    flex-direction: column; 
    align-items: center; 
    text-align: center;
}

.zodiac {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: center;
    transform: translate(-50%, -50%) rotate(calc(var(--angle) * 1deg)) translate(0, -360px) rotate(calc(-1 * var(--angle) * 1deg)); /* Flytter og roterer hvert stjernetegn i en cirkel:
    translate(-50%, -50%): Centrerer elementet omkring sit eget midtpunkt.
    - rotate(calc(var(--angle) * 1deg)): Roterer elementet i cirklen baseret på variablen --angle.
    - translate(0, -380px): Flytter elementet opad i forhold til cirklens centrum for at placere det i en cirkulær form.
    - rotate(calc(-1 * var(--angle) * 1deg)): Roterer elementet tilbage, så det ikke selv ser drejet ud. */
    text-align: center; 
    margin-left: -5px;
    transition: transform 0.5s; /* Giver en blød overgang for transformationsændringer (f.eks. hover) */
}

.zodiac:hover {
    transform: translate(-50%, -50%) rotate(calc(var(--angle) * 1deg)) translate(0, -380px) rotate(calc(-1 * var(--angle) * 1deg)) scale(1.5); /* Forstørrer elementet ved hover, så det vises større og fremhævet.*/
    transition: transform 0.5s; /* Ændringen sker glidende over 0,5 sekunder. */
}

.zodiac a {
    display: flex;
    flex-direction: column; /* Stacker ikon og tekst lodret */
    align-items: center;    /* Centrerer ikon og tekst vandret */
    text-decoration: none;
    color: var(--text);
    font-family: "roca", sans-serif;
    font-weight: 400;
    font-size: 20px;
    font-style: normal;
}

.zodiac img {
    width: 80px;
    height: 80px;
    margin-bottom: 5px;
}

.zodiac figcaption {
    margin-top: 10px; /* Juster denne værdi for at øge eller mindske afstanden */
    color: #FFFFFF;
    font-family: "roca", sans-serif;
    font-size: large;
}

/* Detaljevisning af det valgte stjernetegn */
.zodiac-details {
    display: none;
    position: absolute;
    right: -115%; /* Placer til højre på skærmen */
    top: 50%;
    transform: translateY(-50%);
    max-width: 70%; /* Reduceret bredde */
    text-align: center;
    color: var(--text);
    z-index: 10; /* Sørger for, at den er foran cirklen */
}

.zodiac-details.active {
    display: block;
}

/* Størrelse på det valgte stjernetegns billede */
.zodiac-large img {
    width: 300px;
    height: 300px;
    margin-bottom: 30px;
}

.zodiac-large h2 {
    font-size: 100px;
    margin: 0px 0;
}

.zodiac-large p {
    font-size: 30px;
    line-height: 1.5;
}

.zodiac-large button {
    font-family: "hwt-arabesque", sans-serif; /* Samme font som h2 */
    font-size: 30px; /* Gør teksten større */
    padding: 10px 50px; /* Gør knappen bredere */
    border-radius: 25px; /* Giver en rund kant */
    background-color: #FFFFFF; /* Hvid baggrund */
    color: #000000; /* Sort tekstfarve */
    cursor: pointer; /* Ændrer musemarkøren til en pointer */
    transition: background-color 0.3s ease; /* Transition for en glat hover-effekt */
}

.zodiac-large button:hover {
    background-color: #8B4DBA; /* Ændrer kun baggrundsfarven til lilla ved hover */
    color: #000000; /* Bevarer sort tekstfarve ved hover */
}