.container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Two columns, each taking up equal space */
    grid-gap: 5px; /* Optional: Adds a gap between the boxes */
    width: 60%; /* Optional: Sets a width for the container */
    margin: 0 auto; /* Optional: Centers the container horizontally */
  }
.container3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Two columns, each taking up equal space */
    grid-gap: 5px; /* Optional: Adds a gap between the boxes */
    width: 60%; /* Optional: Sets a width for the container */
    margin: 0 auto; /* Optional: Centers the container horizontally */
  }
  /* Use a media query to add a breakpoint at 800px: */
@media screen and (max-width: 800px) {
  .container, .container3 {
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* Single column */
    grid-gap: 5px; /* Optional: Adds a gap between the boxes */
    width: 90%; /* Optional: Sets a width for the container */
    margin: 0 auto; /* Optional: Centers the container horizontally */
  }
}
  
  .single_col {
    width: 60%; /* Optional: Sets a width for the container */
    margin: 0 auto; /* Optional: Centers the container horizontally */
  }

  .video_container {
    display: flex;
    justify-content: center;
  }

 iframe {
    width: 60%; /* Makes the iframe fill the box */
    aspect-ratio: 16/9; /* Maintains a 16:9 aspect ratio */
    margin: 0 auto; /* Centers the iframe horizontally */
  } 
  
 @media screen and (max-width: 800px) {
  iframe {
    width: 90%; /* Makes the iframe fill the box */
    aspect-ratio: 16/9; /* Maintains a 16:9 aspect ratio */
    margin: 0 auto; /* Centers the iframe horizontally */
  } 
  }


  .box {
    padding: 10px; /* Example padding inside the boxes */
    text-align: left;/* Example text alignment */ 
    overflow: hidden; /* Ensures content doesn't overflow the box */
  }

  .box2 {
    padding: 10px; /* Example padding inside the boxes */
    text-align: right;/* Example text alignment */ 
    overflow: hidden; /* Ensures content doesn't overflow the box */
  }

  .box_video {
    padding: 10px; /* Example padding inside the boxes */
    text-align: center;/* Example text alignment */ 
    overflow: hidden; /* Ensures content doesn't overflow the box */
    width: 100%; /* Makes the box fill the container */
  }

  .box-socials {
    width: 60%; /* Optional: Sets a width for the container */
    text-align: center; /* Centers the content horizontally */
    font-size: 22px; /* Example font size */
    position: absolute; /* Positions the box absolutely */
    top: 50%; /* Positions the box in the middle of the page */
    transform: translateY(-50%); /* Centers the box vertically */
  }

  @media screen and (max-width: 800px) {
    .box-socials {
      width: 90%; /* Optional: Sets a width for the container */
      text-align: center; /* Centers the content horizontally */
      color: white; /* Example text color */
      font-size: 22px; /* Example font size */
    /*  position: absolute; /* Positions the box absolutely */
    /*  top: 50%; /* Positions the box in the middle of the page */
    /*  transform: translateY(-50%); /* Centers the box vertically */
    }
  }
  .responsive-image {
    width: 100%; /* Makes the image fill the box */
    height: auto; /* Maintains aspect ratio */
    object-fit: scale-down; /* Ensures the image covers the box without distortion */
    border-radius:25px; /* Optional: Adds rounded corners to the image */
  }

  .logo-image { /* Dette fungerer ikke som jeg har tenkt, mulig fjerne */
    width: 100%; /* Maintains aspect ratio */
    height: auto;
    object-fit: scale-down; /* Ensures the image covers the box without distortion */
  }

  .header {
    font-family: 'Montserrat', sans-serif; /* Font family for the title */
    padding: 10px; /* Padding inside the top box */
    text-align: right; /* Aligns text to the right */
    font-weight: 700; /* Makes the text light */
    font-size: 22px; /* Larger font size for the title */
  }

  @media screen and (max-width: 800px) {
    .header {
      font-family: 'Montserrat', sans-serif; /* Font family for the title */
      padding: 10px; /* Padding inside the top box */
      text-align: center; /* Aligns text to the right */
      font-weight: 700; /* Makes the text light */
      font-size: 16px; /* Larger font size for the title */
    }
    
  }

  .menu {
    font-family: 'Montserrat', sans-serif; /* Font family for the title */
    padding: 10px; /* Padding inside the top box */
    text-align: left; /* Aligns text to the right */
    font-weight: 200; /* Makes the text light */
    font-size: 22px; /* Larger font size for the title */
  }

  @media screen and (max-width: 800px) {
    .menu {
      font-family: 'Montserrat', sans-serif; /* Font family for the title */
      padding: 10px; /* Padding inside the top box */
      text-align: center; /* Aligns text to the right */
      font-weight: 200; /* Makes the text light */
      font-size: 16px; /* Larger font size for the title */
    }
    
  }

  .footer {
    color: lightgray; /* text color */
    padding: 10px; /* Padding inside the footer */
    text-align: center; /* Centers the text in the footer */
    font-size: 10px; 
    float: bottom; /* Ensures the footer stays at the bottom of the page */
    position: absolute; /* Positions the footer at the bottom */
    bottom: 0; /* Aligns the footer to the bottom of the page */
    width: 98%; /* Ensures the footer takes the full width of the page */

  }
  @media screen and (max-width: 1366px) {
  .footer {
    color: lightgray; /* White text color */
    padding: 10px; /* Padding inside the footer */
    text-align: center; /* Centers the text in the footer */
    font-size: 10px; 
    position: relative; /* Positions the footer at the bottom */
    bottom: 0; /* Aligns the footer to the bottom of the page */
    width: 98%; /* Ensures the footer takes the full width of the page */
    }
  }

  .footer2 {
    color: lightgray; /* White text color */
    padding: 10px; /* Padding inside the footer */
    text-align: center; /* Centers the text in the footer */
    font-size: 10px; 
    float: bottom; /* Ensures the footer stays at the bottom of the page */
    bottom: 0; /* Aligns the footer to the bottom of the page */
    width: 98%; /* Ensures the footer takes the full width of the page */
  }

  .footer3 {
    color: lightgray; /* White text color */
    padding: 10px; /* Padding inside the footer */
    text-align: center; /* Centers the text in the footer */
    font-size: 10px; 
    float: bottom; /* Ensures the footer stays at the bottom of the page */
    position: absolute; /* Positions the footer at the bottom */
    bottom: 0; /* Aligns the footer to the bottom of the page */
    width: 98%; /* Ensures the footer takes the full width of the page */

  }

    .test {
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }

a     { 
    color: white;
    text-decoration: none;
}

body {
    font-family: 'Raleway', sans-serif; /* Font family for the body */
    background-color: black;
    color: white;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    max-width: 800px;
    margin: auto;
}

.gallery-item {
    width: 100%;
    cursor: pointer;
    transition: transform 0.2s;
    height: 256px; 
    max-height: 256px;
    object-fit: cover; /* Ensures the image covers the box without distortion */  
    border-radius:25px; /* Optional: Adds rounded corners to the image */
}

.gallery-item:hover {
    transform: scale(1.05);
}

.slideshow {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
}

.slideshow-image {
    max-width: 90%;
    max-height: 80%;
}

.alt-text {
    text-align: center; 
    color: white;
    padding: 5px;
}

.close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: white;
    font-size: 40px;
    cursor: pointer;
}

.prev, .next {
    position: absolute;
    top: 50%;
    color: white;
    font-size: 30px;
    cursor: pointer;
    padding: 16px;
    user-select: none;
}

.prev {
    left: 10px;
}

.next {
    right: 10px;
}

@media screen and (max-width: 800px) {
    .show_mobile {
        display: block; /* Shows the element on mobile devices */
    }
    .show_desktop {
        display: none; /* Hides the element on mobile devices */
    }
    .gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    max-width: 800px;
    margin: auto;
    }
}

@media screen and (min-width: 801px) {
  .show_mobile {
      display: none; /* Hides the element on mobile devices */
  }
  .show_desktop {
      display: block; /* Shows the element on mobile devices */
  }
}