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

body {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
   font-family: Inter, sans-serif;
   font-size: 16px;
   line-height: 1.6;
}


header {
   background-color: #333;
   color: white;
   text-align: center;
   font: Inter, sans-serif;
   margin: 0;
}


nav {
   font: Inter, 15px sans-serif;
   background-color: #555;
}

nav ul {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   justify-content: center;
}

nav li {
   margin: 0;
}

nav a {
   display: inline-flex;
   padding: 15px 20px;
   color: white;
   transition: 0.3s;
   align-items: center;
   text-decoration: underline;
   gap: 5px;
}

nav a img {
   width: 20px;
   height: 20px;
}

nav a:hover {
   background-color: #777;
   text-decoration: none;
   color: white;
}

nav a:focus {
   outline: 3px solid rgba(255, 255, 255, 0.159);
   outline-offset: 2px;
   color: white;
}

nav a:active {
   background-color: #222;
}

nav a:visited {
   color: #ddd;
}

main {
   flex: 1;
   padding: 20px;
   max-width: 80%;
   min-width: 80%;
   margin: auto;
   background: white;
}

p {
   text-indent: 30px;
   margin-bottom: 15px;
}

section {
   margin-bottom: 40px;
}

h1 {
   font-family: Inter, sans-serif;
   font-size: 45px;
   margin: 0;
   padding: 10px;
}

h2, h3 {
   font-family: Inter, sans-serif;
   width: 100%;
}

h2 {
   border-bottom: 2px solid #ddd;
   padding-bottom: 5px;
   font-size: 24px;
}

h3 {
   font-size: 20px;
}

table {
   width: 100%;
   border-collapse: collapse;
   margin-top: 15px;
}

table,
th,
td {
   border: 1px solid #ccc;
}

th,
td {
   padding: 10px;
   text-align: center;
}

.gallery {
   display: grid;
   grid-template-columns: repeat(4, 1fr); 
   gap: 20px;
   justify-items: center;
}

section img,
.gallery img {
   width: 100%;
   height: 150px;
   object-fit: cover; 
   border-radius: 5px;
}

section figure,
.gallery figure {
   width: 100%;
   max-width: 150px;
}

footer {
   background-color: #333;
   color: white;
   text-align: center;
   font: 15px sans-serif;
   padding: 15px;
}


@media print {
   body {
      background: white;
      color: black;
      font-family: serif;
   }

   h1, h2, h3 {
      font-family: sans-serif;
   }

   nav, footer {
      display: none;
   }
}

@media (max-width: 600px) {
   nav ul {
      flex-direction: column;
      align-items: center;
   }

   nav a {
      width: 100%;
      text-align: center;
   }

   main {
      padding: 10px;
   }

  .gallery {
      grid-template-columns: 1fr;
   }

   .gallery img {
      width: 100%;
      max-width: 300px;
   }
}

@media (min-width: 601px) and (max-width: 1024px) {
   main {
      max-width: 700px;
   }

   .gallery {
      grid-template-columns: repeat(2, 1fr);
   }

   .gallery img {
      width: 100%;
   }
}

@media (min-width: 1025px) {
   main {
      max-width: 1000px;
   }

   .gallery {
      grid-template-columns: repeat(4, 1fr);
   }

   .gallery img {
      width: 100%;
   }
}