@font-face {
  font-family: "SelectaReg";
  src: url('SelectaFont/SelectaTrial-Regular.woff2') format('woff2'), url('SelectaFont/SelectaTrial-Regular.woff') format('woff');
}

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

a:hover {
  color: grey;
}

.logo a:hover {
  color: black;
}

.selected {
  color: grey;
}

body {
  font-size: 17px;
  line-height: 21px;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  overflow-y: scroll; /* Show vertical scrollbar */
  font-weight: normal;
  font-family: SelectaReg, Helvetica, Arial, sans-serif;
  font-variant-ligatures: common-ligatures contextual;
  font-feature-settings: "kern", "liga", "clig", "calt", common-ligatures contextual, "kern";
  font-kerning: normal;
  letter-spacing: 0.1px;
}

body {
  margin: 0;
  padding: 40px;
  padding-top: 120px;
  background-color: #fff; /* Set background color */
}

.container {
  max-width: 100%; /* Ensure container is not wider than viewport */
  display: flex; /* Use flexbox for flexible layout */
  flex-direction: column; /* Single column layout for desktop */
  align-items: center; /* Center content horizontally */
  padding-top: 60px;
}

.image, .image_text {
  width: 100%; /* Each image takes full width of container */
  margin-bottom: 20px; /* Space between rows */
  overflow: hidden; /* Ensure images don't overflow their containers */
  background-color: #fff; /* White background for each image */
  padding-bottom: 60px; /* Space between images and container bottom */
  box-sizing: border-box; /* Include padding in width calculation */
}

.image img, .image_text img {
  width: 100%; /* Image width takes full space of parent */
  height: auto; /* Maintain aspect ratio */
  display: block; /* Remove any default inline alignment */
}

/* Center the logo horizontally and position it 10px from the top */
.logo {
  position: absolute;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  text-decoration: none;
  z-index: 1;
  text-align: center;
}

.nav {
  font-size: 17px;
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
}

ul {
  padding: 0;
  margin: 0;
}

.nav ul li {
  margin: 0 3px;
  display: inline-block;
}

/* Media query for laptop screens */
@media (max-width: 1600px) {
  body {
    padding: 20px 20px; /* Reduce left and right padding for laptops */
  }

  .image, .image_text {
    width: 100%; /* Ensure images take full width */
  }

  .container {
    padding-top: 160px;
  }
}

/* Media query for mobile screens */
@media (max-width: 768px) {
  body {
    padding: 5px 0; /* No left and right padding for mobile */
  }

  .container {
    padding: 0 10px; /* Add padding to container for spacing */
    padding-top: 210px;
  }

  .image, .image_text {
    width: 100%; /* Full width minus margins for mobile */
    margin: 10px 0; /* Adjust margins to create space between images */
    padding-bottom: 20px; 
  }

  .image_text {
    text-align: center;
  }

  .nav {
    top: 126px;
  }

  .logo {
    font-size: 17px;
  }
}