/* Body */
body {
  background-image: url(../images/Baggrund\ 3.png);
  max-width: 100%;
  height: auto;
  background-position: center right;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color: #7c646a;
  background-size: 100%;
}

html, body {
  margin: 0;
  height: 100%;
  overflow: auto;
}

/* Logo styling */
.logo {
  text-align: center; /* Centrerer logoet */
  padding: 0;   /* Ingen plads omkring logoet */
}

.logo img {
  max-width: 600px;  /* Juster størrelsen på logoet */
  height: auto;      /* Bevarer proportionerne */
  margin-top: 80px;         /* Margin omkring billedet */
}

/* Add a background color to the top navigation */
.topnav {
  display: flex;  
  justify-content: center; 
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.9);
  margin: 20px 0; /* Reduceret plads før og efter navigationen */
}

/* Style the links inside the navigation bar */
.topnav a {
  flex: 1;  /* Giver links lige meget plads */
  color: #000000;
  text-align: center;
  padding: 20px; /* Ensartet padding */
  text-decoration: none;
  font-size: 20px;
  font-family: fantasy;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #7d4747;
  color: black;
  transition: 0.4s ease;
  transform: scale(1.1);
}

/* Flexbox styling */
.flex-textbox {
  text-align: center;                    /* Centrerer alt indhold i flex-boksen */
  margin: 0 auto;                        /* Centrerer flex-textbox horisontalt */
  max-width: 1200px;                     /* Maksimal bredde for boksen */
  padding: 30px 20px;                    /* Indvendig afstand */
  background-color: rgba(255, 255, 255, 0.8); /* Baggrundsfarve for synlighed */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.9); /* Let skygge for dybde */
}

/* H2 og H3 styling */
.textbox-title {
  font-size: 28px;                       /* Størrelse på h2 */
  margin-bottom: 40px;                   /* Plads mellem h2 og h3 */
  font-family: fantasy;  
  color: #333;                           /* Tekstfarve */
}

.textbox-subtitle {
  font-size: 24px;                       /* Størrelse på h3 */
  margin-bottom: 40px;                   /* Plads mellem h3 og billederne */
  color: #666;                         /* Tekstfarve */
}

/* Button container for billeder */
.button-container {
  display: flex;                         /* Flexbox layout for billeder */
  justify-content: center;               /* Centrerer billederne horisontalt */
  gap: 30px;                             /* Plads mellem billederne */
}

.button-item {
  text-align: center;                    /* Centrerer teksten og billedet */
}

.button-image {
  max-width: 250px;                      /* Billedets maksimale bredde */
  height: auto;                          /* Bevarer billedets proportioner */
  border: 2px solid transparent;         /* Usynlig ramme */
  transition: border 0.3s;               /* Glidende overgang ved hover */
  cursor: pointer;                       /* Klikbart billede */
}

.button-image:hover {
  border: 3px solid #7d4747;             /* Ændrer rammen ved hover */
}

.button-title {
  font-size: 18px;                        /* Størrelse på h4 */
  font-family: fantasy;                    
  margin-top: 10px;                      /* Plads mellem billedet og h4 */
  color: #333;                           /* Tekstfarve */
}

@media (max-width: 768px) {
  .flex-textbox {
      padding: 15px 10px; /* Mindre indvendig afstand på små skærme */
  }

  .topnav a {
      font-size: 16px; /* Mindre skriftstørrelse på mobile enheder */
  }

  .button-image {
      max-width: 200px; /* Juster billedstørrelse på små skærme */
  }
}