/*Fonts: Google font*/
.bebas-neue-regular {
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
.merriweather-light {
    font-family: "Merriweather", serif;
    font-weight: 300;
    font-style: normal;
  }

  /*Farver*/
  :root{
    color: #99CAF3;
    color: #58B5E3;
    color: #027BAB;
    color: #FF8752;
    color: #F76AAB;
    color: #000;
    color: #fff;
  }

 /*ChatGPT: "Hvordan laver man en hovedmenulinje, med submener og supplerende subsubmenuer?" https://chatgpt.com/share/67091fe6-a534-8009-9e7a-46c0bbf73d1d*/ 
/* Style hovedmenuen */
.main-menu {
    font-family: "Bebas Neue";
    list-style-type: none;
    padding: 0;
    margin: 0;
    background-color: #58B5E3;
  }
  
  .main-menu li {
    position: relative;
    display: inline-block;
    z-index: 1000;
  }
  
  .main-menu li a {
    display: block;
    padding: 10px 20px;
    color: white;
    text-decoration: none;
    z-index: 1000;
  }
  
  .main-menu li a:hover {
    background-color: #027bab;
    z-index: 1000;
  }

  /*Søgefelt: "create a search bar" https://www.w3schools.com/howto/howto_css_searchbar.asp*/
  .søgefelt{
    justify-content: right;
    padding: 9px;
    margin-top: -40px;
    margin-left: 1320px;
    font-size: 10px;
    font-family: "Merriweather", serif;
    font-weight: 300;
    font-style: normal;
  }

  
  /* Skjul submenuer som standard */
  .submenu, .subsubmenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    list-style-type: none;
    padding: 0;
    margin: 0;
    background-color: #ff8752;
    z-index: 1000;
  }
  
  /* Style submenupunkter */
  .submenu li, .subsubmenu li {
    display: block;
    z-index: 1000;
  }
  
  .submenu li a, .subsubmenu li a {
    padding: 10px 20px;
    color: white;
    z-index: 1000;
  }
  
  .submenu li a:hover, .subsubmenu li a:hover {
    background-color: #f76aab;
    z-index: 1000;
  }
  
  /* Vis submenu når musen er over */
  .main-menu li:hover > .submenu {
    display: block;
    z-index: 1000;
  }
  
  /* Vis subsubmenu når musen er over */
  .submenu li:hover > .subsubmenu {
    display: block;
    left: 100%;
    top: 0;
    z-index: 1000;
  }

  .logo{
    display: flex;
    justify-content: center;
    padding: 1%;
  }


/*Forsidebilleder*/
/*w3schools: How TO - Align images side by side: https://www.w3schools.com/howto/howto_css_images_side_by_side.asp*/
/* Three image containers (use 25% for four, and 50% for two, etc) */
.column {
    float: left;
    width: 33.33%;
    opacity: 60%;
  }
  
  /* Clear floats after image containers */
  .row::after {
    content: "";
    clear: both;
    display: table;
  }
  

/*ChatGPT: Tekst ovenpå billede: https://chatgpt.com/share/670cdcd1-4568-8009-9445-a98267090286*/
  .text-overlay_tekstboks1{
    position: absolute; /* Gør det muligt at placere elementet over billedet */
    top: 70%; /* Justerer positionen i forhold til toppen af containeren */
    left: 16.66%; /* Justerer positionen i forhold til venstre kant af containeren */
    transform: translate(-50%, -50%); /* Centrerer elementet både vandret og lodret */
    color: #000; /* Tekstfarve - kan ændres */
    text-align: left;
    background-color: #fff; 
    padding: 50px;
    border-radius: 10px; /* Giver runde hjørner */
    border-color: #F76AAB;
    border-style: solid;
  }

.text-overlay_tekstboks2{
    position: absolute; /* Gør det muligt at placere elementet over billedet */
    top: 70%; /* Justerer positionen i forhold til toppen af containeren */
    left: 50%; /* Justerer positionen i forhold til venstre kant af containeren */
    transform: translate(-50%, -50%); /* Centrerer elementet både vandret og lodret */
    color: #000; /* Tekstfarve - kan ændres */
    text-align: left;
    background-color: #fff; 
    padding: 50px;
    border-radius: 10px; /* Giver runde hjørner */
    border-color: #F76AAB;
    border-style: solid;  
}

.text-overlay_tekstboks3{
    position: absolute; /* Gør det muligt at placere elementet over billedet */
    top: 70%; /* Justerer positionen i forhold til toppen af containeren */
    left: 85%; /* Justerer positionen i forhold til venstre kant af containeren */
    transform: translate(-50%, -50%); /* Centrerer elementet både vandret og lodret */
    color: #000; /* Tekstfarve - kan ændres */
    text-align: left;
    background-color: #fff; 
    padding: 50px;
    border-radius: 10px; /* Giver runde hjørner */
    border-color: #F76AAB;
    border-style: solid;  
}

  h1{
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  
  p{
    font-family: "Merriweather", serif;
    font-weight: 400;
    font-style: normal;
    width: 300px;
    height: auto;
  }

/*Baggrundsfarve på footer*/
.footer{
    background-color: #FF8752;
}

/*Ikoner i footer*/
  .ikoner{
    display: flex;
    justify-content: right;
  }