:root {
  --navy: #1B2A41;
  --forest: #2E5339;
}

.fade-container {
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}

.fade-container.fade-out {
  opacity: 0;
}

.zoomed-image {
  transform: scale(1.1); /* Slightly zoom in the image */
}

.fade-left {
  mask-image: linear-gradient(to right, transparent, black); /* Fade effect on the left */
  -webkit-mask-image: linear-gradient(to right, transparent, black); /* Webkit support */
}

.absolute {
  position: absolute;
  top: 0;
  right: 0;
}

.relative {
  position: relative;
}

.active {
  color: #2E5339;
  font-weight: bold;
  cursor: default;
}

.active:hover {
  color: #2E5339;
  text-decoration: none;
}

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}