@import url(print.css) print;

html{
    font-size: 16px;
  }
  
  body{ /*for the background*/
    background-image: url('../media/background.jpg'); /* adjust the path */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
  }
  
  body

  /* Alapértelmezett elrejtés: pozicionáljuk a képernyőn kívülre */
.skip-to-content {
    position: absolute; /* Abszolút pozicionálás */
    left: -9999px; /* Mozgatás messze balra a képernyőről */
    z-index: 999; /* Biztosítja, hogy más elemek fölé kerüljön, ha láthatóvá válik */
    padding: 8px;
    background-color: #f0f0f0; /* Háttérszín, ha látható */
    color: #333; /* Szöveg szín, ha látható */
    border: 1px solid #ccc;
    text-decoration: none;
  }
  
  /* Láthatóvá tétel fókuszban */
  .skip-to-content:focus {
    position: static; /* Vissza a normál pozicionáláshoz */
    left: auto; /* Eltávolítja a bal oldali eltolást */
    /* Opcionális: további stílusok, hogy jól látható legyen */
    top: auto;
    margin: 10px;
    display: block; /* Biztosítja, hogy blokk elemként jelenjen meg, ha szükséges */
  }
  
    h1{
      font-size: clamp(1.5rem, 1rem + 3vw, 3rem);
    }
    .main-container { /* for the beige wrapper*/
      background-color: #f5f5dc; /* Beige color */
      padding: 20px; /* Add space around the content */
      margin: 0 auto; /* Center the content */
      width: 80%; /* Make the container take 80% of the width */
      min-height: 100vh; /* Ensure the container takes up at least the full height */
      box-sizing: border-box; /* Include padding in the width calculation */
    }
    .navbar-light .navbar-nav .nav-link.active {
        color: rgb(207, 9, 207); 
      }
    .intro-text{
      font-family: Arial, Helvetica, sans-serif;
      font-weight: bold;
      margin-top: 0px;
      white-space: pre-line;
      line-height: 1.6;
      font-size: clamp(0.8rem, 0.75rem + 0.7vw, 1.5rem);
    }

    .img-fill {
        width: 100%;         /* Make the image fill the width of its column */
        height: 250px;       /* Set a fixed height for all images - Adjust this value as needed */
        object-fit: cover;   /* Scale the image while maintaining aspect ratio, cropping excess */
      }

      .image-container  {
          margin-bottom: 15px; 
            width: 400px; /* Adjust the desired width */
           height: auto; /* Maintain aspect ratio */
           border: 2px solid black; /* 2px wide, solid black border */
    }


    .footer-container{
        background-color: lightgrey; 
        width: 80%; /* Make the container take 80% of the width */
        margin: 0 auto; /* Center the content */
      }

    .footer-container .address p{
            font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            font-weight: bold;
            margin-top: 0px;
            white-space: pre-line;
            line-height: 1.0;
            font-size: clamp(0.875rem, 0.75rem + 0.5vw, 1.125rem);
    }