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


body {
   margin: 0;
   font-family: "Sunflower", sans-serif;
   font-weight: 300;
   font-style: normal;
   background: linear-gradient(#6dade2, #c1d5e5);
   width: auto;
   min-width: 25rem;
 }
 
 
 .banner-container {
    background-color: #3577BA;
    display: flex;
    width: auto;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    max-height: 6rem;
 }
 
 a {
   display: flex;
   justify-content: center;
}
 
 .banner-container .logo-img {
    width: 8%; 
    height: auto;
    max-height: 6rem;
    max-width: 6rem;
 } 
 
 .banner-container .banner-img {
    width: 50%; 
    height: auto;
 }

 /* søgeform*/
 .search-form {
   display: flex;
   align-items: center;
 }
 
 .search-input {
   padding: 5px;
   font-size: 14px;
   border: none;
   border-radius: 3px;
 }
 
 .search-button {
   background: none;
   border: none;
   color: white;
   font-size: 16px;
   cursor: pointer;
   padding-left: 5px;
 }
 
 .search-button:hover {
   color: #ddd;
 }
 
 
/* navbar */
 header{
   position: relative;
   top: 0;
   left: 0;
   right: 0;
   background: #3391c9;
   box-shadow: 0 5px 10px rgba(0,0,0,0.1);
   padding: 10px 7%;
   display: flex;
   align-items: center;
   justify-content: center;
   height: 2rem;
   
}

header .navbar ul{
   list-style: none;
}

header .navbar ul li{
   position: relative;
   float: left;
}

header .navbar ul li a {
   text-decoration: none;
   font-size: 20px;
   padding: 18px;
   color: white;;
   display: block;

}

header .navbar ul li a:hover{
   background: #0179bf;
   color: #fff;
}

header .navbar ul li ul{
   position: absolute;
   left: 0;
   width: 300px;
   background: #3391c9;
   display: none;
}

header .navbar ul li ul li{
   width: 100%;
   border-top: 1px solid rgba(0,0,0,0.1);
}

header .navbar ul li:focus-within > ul,
header .navbar ul li:hover > ul{
   display: block;
}

#menu-bar{
   display: none;
}

header label{
   font-size: 20px;
   color: #ffffff;
   cursor: pointer;
   display: none;
}

 

 /* Footer styling */
footer {
      background-color: #72A9D9;
      color: #ffffff;
      text-align: center;
      padding: 15px;
      position: relative;
      bottom: 0;
      left: 0;
      width: 100%;
  }
  

.footer-container {
   display: flex;
   justify-content: space-around;
   align-items: center;
   color: #ffffff;
   text-align: center;
   font-size: 16px;
}

.footer-item a {
   color: #ffffff;
   text-decoration: none;
}

.footer-icon {
   margin-right: 5px;
}

.footerlogo {
   width: 2rem
}

.footer-item {
   display: flex;
   flex-direction: row;
   align-items: center;
}

.kontakt {
   color: #ffffff;
}

.sponsorfooter {
   display: flex;
}




/*  mobile */ 
@media(max-width: 600px) {
   .search-form {
      display: none; /* Skjul søgefeltet på små skærme */
    }

   .footer-container {
      flex-direction: column;
      gap: 10px;
  }

  
header{
   padding: 20px;
}

header label{
   display: block;
}

header .navbar{
   position: absolute;
   top: 100%;
   left: 0;
   right: 0;
   background: #3391c9;
   border-top: 1px rgba(0,0,0,0.1);
   display: none;
}

header .navbar ul li{
   width: 100%;
}

header .navbar ul li ul{
   position: relative;
   width: 100%;
}

header .navbar ul li ul li{
   background: #3391c9;
}

header .navbar ul li ul li ul{
   width: 100%;
   left: 0;
}

#menu-bar:checked ~ .navbar{
   display: block;
}
.footerarticle {
   display: flex;
   flex-direction: column;
   width: 100%;
}

}





/* tablet */ 
@media (min-width: 601px) and (max-width: 991px) {

   header{
      padding: 20px;
   }
   
   header label{
      display: block;
   }
   
   header .navbar{
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: #3391c9;
      border-top: 1px rgba(0,0,0,0.1);
      display: none;
   }
   
   header .navbar ul li{
      width: 100%;
   }
   
   header .navbar ul li ul{
      position: relative;
      width: 100%;
   }
   
   header .navbar ul li ul li{
      background: #3391c9;
   }
   
   header .navbar ul li ul li ul{
      width: 100%;
      left: 0;
   }
   
   #menu-bar:checked ~ .navbar{
      display: block;
   }

   .sponsorfooter {
      display: flex;
      width: 25%;
   }
}





/* desktop */ 
@media (min-width: 992px) {
   .footerarticle{
      display: flex;
      max-width: 100%;
   }
   .sponsorfooter {
      display: flex;
      width: 25%;
   }
}