body {
  font-family: 'Josefin Sans', sans-serif;
}

html, body {
  margin: 0;
  padding: 0;
  height: auto;
  min-height: 100vh;
}

.image-wrapper {
  width: 100%;
  height: 100vh; /* or 90vh if you want a shorter crop */
  overflow: hidden;
  position: relative;
}

.cow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: 150vh; /* Zoom it in */
  transform: translate(-50%, -65%); /* Center it with vertical offset */
  object-fit: cover;
  z-index: 1;
}

.homepage {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-image: url('cdvimages/cdvhome/cow.png');
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
}

.word-coin {
  position: absolute;
  top: 5%;
  left: 2%;
  max-width: 150%;
  height: auto;
  z-index: 2;
}

@media screen and (min-width: 1024px) {
  .word-coin {
    width: 90%;
    top: -6%;
  }
}

.word-de {
  position: absolute;
  top: 9%;
  left: -20%;
  max-width: 140%;
  height: auto;
  z-index: 2;
}
@media screen and (min-width: 1024px) {
  .word-de {
    width: 70%;
    top: 5%;
    left: 0%;
  }
}


.word-vache {
  position: absolute;
  bottom: 20%;
  left: -25%;
  max-width: 125%;
  height: auto;
  z-index: 2;
}
@media screen and (min-width: 1024px) {
  .word-vache {
    width: 110%;
    top: -35%;
    left: -10%;
  }
}



.main-nav {
  position: absolute;
  top: 2%;
  width: 100%;
  display: flex;
  justify-content: space-around;
  font-size: 1rem;
  color: #f9e6b3;
  z-index: 3;
}


@media screen and (min-width: 1024px) {
  .main-nav {
    font-size: 1.7rem;
  }
}

.main-nav a {
  position: relative;
  color: #f9e6b3;
  text-decoration: none;
  font-weight: 400;
  letter-spacing: 1px;
}

.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  background-color: #5a694f;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.main-nav a:hover::after {
  transform: scaleX(1);
}