/* Universal Box-Sizing and Reset */
* {
  box-sizing: border-box; /* Ensures padding and border are included in the element's total width and height */
  margin: 0;             /* Resets default browser margins */
  padding: 0;            /* Resets default browser paddings */
}

/* --- Font Face Declaration --- */
@font-face {
  font-family: 'JetBrainsMono-Regular';
  src: url('JetBrainsMono-Regular.woff2') format('woff2'); /* Specifies the font file and format */
  font-weight: normal;
  font-style: normal;
}

/* --- HTML & Body Base Styles --- */
html {
  height: 100%;             /* Ensures html element takes full viewport height */
  scroll-behavior: smooth;  /* Enables smooth scrolling for anchor links */
}

body {
  height: 100%;             /* Ensures body element takes full html height */
  font-family: 'JetBrainsMono-Regular', sans-serif; /* Sets primary font, with sans-serif as fallback */
  background-size: cover;   /* Ensures background image covers the entire element */
  color: #000;              /* Sets default text color to black */
}

/* --- Layout Wrappers --- */
.page-wrapper {
  min-height: 100vh;        /* Ensures wrapper takes at least full viewport height */
  display: flex;            /* Enables flexbox for content distribution */
  flex-direction: column;   /* Arranges content vertically */
}

.main-content {
  flex-grow: 1; /* Allows main content to take up available space, pushing footer down */
}

/* --- Header Styles --- */
.header {
  display: grid;                            /* Uses CSS Grid for header layout */
  grid-template-columns: 1fr auto 1fr;      /* Three columns: left (auto-sized), center (content-sized), right (auto-sized) */
  align-items: center;                      /* Vertically centers items within their grid cells */
  padding: 10px 20px;                       /* Adds internal spacing */
  position: sticky;                         /* Makes the header stick to the top when scrolling */
  top: 0;                                   /* Sticks to the top edge */
  z-index: 1000;                            /* Ensures header stays on top of other content */
  background-color: white;                  /* Sets header background */
}

.logo {
  height: 30px;         /* Sets logo height */
  justify-self: center; /* Centers the logo horizontally within its grid cell */
}

.nav-left,
.nav-right {
  display: flex; /* Enables flexbox for navigation items */
}

.nav-left {
  justify-content: flex-start; /* Aligns items to the start (left) */
}

.nav-right {
  justify-content: flex-end;   /* Aligns items to the end (right) */
}

.nav-left ul,
.nav-right ul {
  list-style: none; /* Removes bullet points from lists */
  display: flex;    /* Arranges list items horizontally */
  gap: 20px;        /* Adds space between list items */
  margin: 0;        /* Resets default list margins */
  padding: 0;       /* Resets default list paddings */
}

.header a {
  text-decoration: none; /* Removes underline from links */
  color: rgb(0, 71, 171);        /* Sets link color (a shade of blue) */
  font-weight: bold;     /* Makes link text bold */
}

.header a:hover,
.header a:focus {
  text-decoration: underline; /* Adds underline on hover/focus */
}

/* --- General Content Elements --- */
.gap {
  flex: 1;                 /* Allows this element to grow within a flex container */
  max-width: 800px;        /* Limits maximum width */
  margin: 0 auto;          /* Centers the element horizontally */
  padding: 15px;           /* Adds internal spacing */
  padding-bottom: 300px;   /* Large bottom padding, possibly for visual spacing */
  margin-bottom: 20px;     /* Adds space below the element */
  text-align: center;      /* Centers text */
  font-size: 1.5em;        /* Increases font size */
  font-weight: bold;       /* Makes text bold */
}

.gap p { /* Specific style for paragraphs within .gap if needed */
  /* You had this in media queries, but it might be better here if it's a general style. */
}

.jezyk { /* Likely a language selector or similar element */
  width: 100%;          /* Takes full available width */
  height: auto;         /* Maintains aspect ratio */
  max-width: 400px;     /* Limits maximum width */
  display: block;       /* Ensures it behaves as a block element */
  margin: auto;         /* Centers horizontally */
  margin-top: 250px;    /* Large top margin for spacing */
}

.line {
  border-bottom: 1px solid #ccc; /* Creates a light gray horizontal line */
  margin: 15px;                   /* Adds margin around the line */
  margin-bottom: 20px;            /* Adds extra margin below */
}

/* --- Gallery & Text Section Layouts --- */
.gallery-and-text,
.gallery-and-text1,
.gallery-and-textA {
  display: flex;                /* Uses flexbox for layout */
  flex-wrap: wrap;              /* Allows items to wrap to the next line */
  justify-content: center;      /* Centers items horizontally */
  align-items: flex-start;      /* Aligns items to the top vertically */
  gap: 40px;                    /* Adds space between flex items */
  margin: 0 auto;               /* Centers the section horizontally */
  padding: 20px;                /* Adds internal spacing */
}

/* Note: `gallery-and-text1` and `gallery-and-textA` are nearly identical
   to `gallery-and-text` except for `max-width`. Consider consolidating
   if the only difference is `max-width` or if they can share a base style. */
.gallery-and-text {
  max-width: 1300px;
}

.gallery-and-text1,
 {
  max-width: 1500px;
}
.gallery-and-textA{
	max-width: 1300px;
}

/* --- Symmetric Grid Containers (container-sym and container-symA) --- */
.container-sym,
.container-symA {
  display: grid;          /* Enables CSS Grid */
  gap: 15px;              /* Space between grid items */
  min-height: 400px;      /* Minimum height for the container */
  flex: 2;                /* If inside a flex container, it will grow */
  min-width: 450px;       /* Minimum width for the container */
  max-width: 700px;       /* Maximum width for the container */
  margin: 0;              /* Removes external margins */
}

.container-sym {
  grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
  grid-template-rows: repeat(2, 1fr);    /* 2 equal rows */
  grid-template-areas:
    "box1 box1 box2"
    "box1 box1 box3"; /* Defines named areas for item placement */
}

.container-symA {
  display: flex; /* Zmieniamy na flexbox */
  justify-content: center; /* Wyśrodkowuje zawartość w poziomie */
  align-items: center; /* Wyśrodkowuje zawartość w pionie */
  gap: 15px; /* Zachowujemy odstęp między elementami */

  /* Pozostałe właściwości kontenera możesz zostawić bez zmian lub dostosować */
  min-height: 400px;
  min-width: 450px;
  max-width: 900px; /* Zwiększ to, jeśli chcesz, żeby cały kontener był szerszy */
  margin: 0 auto; /* Wyśrodkowuje cały kontener na stronie */
  /* Usuń wszystkie właściwości 'grid-template-columns', 'grid-template-rows', 'grid-template-areas' */
}


/* Upewniamy się, że tekst w gallery-text się dopasowuje */
.gallery-text {
  /* Możesz dodać max-width, jeśli chcesz ograniczyć jego szerokość */
  max-width: 400px; /* Przykład */
  text-align: left;
}

/* --- Grid Item Placement --- */
.box1 {
  grid-area: box1; /* Places element in the 'box1' area */
}

.box2 {
  grid-area: box2; /* Places element in the 'box2' area */
}

.box3 {
  grid-area: box3; /* Places element in the 'box3' area */
}

.box4 {
  grid-area: box4; /* Places element in the 'box4' area */
}

/* --- Image Styles for Grid Boxes --- */
.box1 img,
.box2 img,
.box3 img,
.box4 img {
  width: 100%;          /* Images take full width of their parent box */
  height: 100%;         /* Images take full height of their parent box */
  object-fit: cover;    /* Ensures images cover the area without distortion, cropping if necessary */
  display: block;       /* Removes extra space below images */
}

/* --- Gallery Text and Container --- */
.gallery-text {
  flex: 1;              /* Allows text block to grow */
  min-width: 300px;     /* Minimum width for text block */
  max-width: 450px;     /* Maximum width for text block */
  line-height: 1.6;     /* Improves readability of text */
  padding: 10px;        /* Adds internal spacing */
  font-size: 110%;      /* Slightly increases font size */
  text-align: left;     /* Aligns text to the left */
}

.gallery-text h1 {
  text-align: left; /* Ensures headings are left-aligned */
}

.gallery-container {
  display: flex;                /* Uses flexbox for gallery layout */
  flex-wrap: wrap;              /* Allows gallery items to wrap */
  justify-content: center;      /* Centers items horizontally */
  gap: 15px;                    /* Space between gallery items */
  max-width: 1300px;            /* Limits maximum width of the gallery */
  margin: 0 auto;               /* Centers the gallery horizontally */
  padding: 10px;                /* Adds internal spacing */
}

.gallery {
  margin: 5px;          /* Small outer margin around each gallery item */
  border: 1px solid #ccc; /* Light gray border */
  width: 285px;         /* Fixed width for each gallery item */
}

.gallery:hover {
  border: 1px solid #777; /* Darker border on hover */
}

.gallery img {
  width: 100%;      /* Images take full width of their gallery item */
  height: auto;     /* Maintains aspect ratio */
  display: block;   /* Removes extra space below images */
}

.desc {
  padding: 15px;       /* Adds internal spacing */
  text-align: center;  /* Centers text */
}

/* --- Specific Image Styling for .container-about --- */
.container-about .box1 img {
  max-width: 100%; /* Ensures the image doesn't overflow its parent container */
  height: auto;    /* Maintains the aspect ratio */
  display: block;  /* Removes any extra space below the image */
  width: 500px;    /* Sets a maximum desired width for larger screens (consider using max-width only for responsiveness) */
  /* It's generally better to use `max-width: 100%;` and let the parent container
     control the size, rather than setting a fixed `width` here if you want it to be responsive. */
}

/* --- YouTube Embed Styles --- */
.youtube {
  display: flex;            /* Uses flexbox for centering */
  justify-content: center;  /* Centers horizontally */
  align-items: center;      /* Centers vertically */
  margin-bottom: 15px;      /* Adds space below the embed */
}

.iframe {
  width: 100%;      /* Takes full available width */
  height: 315px;    /* Fixed height for the iframe */
  max-width: 560px; /* Limits maximum width for responsive embeds */
  border: none;     /* Removes iframe border */
}

/* --- Footer Styles --- */
.footer {
  color: white;             /* Text color for better contrast */
  background-color: black;  /* Dark background for the footer */
  padding: 30px 20px;       /* Increased top/bottom padding */
  font-size: 1rem;          /* Base font size */
  display: flex;            /* Uses flexbox for internal layout */
  justify-content: space-between; /* Spaces items evenly */
  align-items: center;      /* Vertically centers items */
  flex-wrap: wrap;          /* Allows items to wrap on smaller screens */
  border-top: 1px solid #eee; /* Subtle top border */
}

.footer h3 {
  margin: 0;                /* Removes default heading margins */
  font-size: 1.2rem;        /* Slightly larger heading font size */
}

.footer nav {
  flex-grow: 1;             /* Allows navigation to take available space */
  display: flex;
  justify-content: flex-end; /* Aligns navigation links to the right */
}

.footer ul {
  list-style: none; /* Removes bullet points */
  display: flex;    /* Arranges list items horizontally */
  gap: 25px;        /* Space between list items */
  margin: 0;        /* Resets default margins */
  padding: 0;       /* Resets default paddings */
}

.footer a {
  text-decoration: none;        /* Removes underline */
  color: white;                 /* Link color for visibility on dark background */
  font-weight: bold;            /* Bold link text */
  transition: color 0.3s ease;  /* Smooth color transition on hover/focus */
}

.footer a:hover,
.footer a:focus {
  text-decoration: underline;   /* Underline on hover/focus */
  color: lightgray;             /* Lighter color on hover/focus */
}

/* --- Responsive Media Queries --- */

/* For screens up to 900px wide */
@media (max-width: 900px) {
  .gallery {
    width: 45%; /* Gallery items take up 45% width, allowing two per row */
  }
}

/* For screens up to 850px wide */
@media (max-width: 850px) {
  .gallery-and-text {
    flex-direction: column; /* Stacks gallery and text vertically */
    align-items: center;    /* Centers stacked items horizontally */
  }

  .container-sym,
  .gallery-text {
    max-width: 90%; /* Limits width to 90% for better responsiveness */
    margin: 0 auto; /* Centers horizontally */
    min-width: unset; /* Removes minimum width constraint */
  }
}

/* For screens up to 768px wide */
@media (max-width: 768px) {
  .container-sym {
    grid-template-columns: 1fr; /* Single column layout for container-sym */
    grid-template-rows: auto auto auto; /* Auto-sized rows */
    grid-template-areas:
      "box1"
      "box2"
      "box3"; /* Stacks boxes vertically */
    max-width: 90%; /* Limits width */
    margin: 0 auto; /* Centers horizontally */
  }

  .box1 img,
  .box2 img,
  .box3 img {
    height: auto; /* Ensures image height adjusts automatically */
  }

  .box { /* Assuming this refers to a class not fully defined elsewhere, or a typo for .box1, .box2, etc. */
    flex-direction: column; /* If .box is a flex container, it stacks items */
    text-align: center;     /* Centers text within it */
  }

  .tekst { /* Assuming this refers to a class not fully defined elsewhere */
    flex: unset; /* Removes flex properties */
  }
}

/* For screens up to 600px wide */
@media (max-width: 600px) {
  .gallery {
    width: 90%; /* Gallery items take up 90% width, typically one per row */
  }
}

/* For screens up to 480px wide */
@media (max-width: 480px) {
  .gap p {
    font-size: 1.2em; /* Reduces font size for paragraphs in .gap */
  }
}