html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
}

.text-nav {
  color: #176e7b;
  font-family: "lato", sans-serif;
  font-size: large;
}

.text-sectionTitle {
  color: #176e7b;
  font-family: "lato", sans-serif;
  font-size: large;
  font-style: bold;
}

.lato {
  font-family: "lato", sans-serif;
}

.text-nav:hover {
  border-bottom: 1px solid #176e7b;
}

.fade-in {
  opacity: 0;
  animation: fadeIn 1s ease-in forwards;
  animation-delay: 0.5s;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

.image:hover {
  transform: scale(1.05);
  transition: transform 0.1s ease-in-out;
  cursor: pointer;
}

.fade-all {
  -webkit-mask-image: radial-gradient(
    circle,
    rgba(0, 0, 0, 1) 90%,
    rgba(0, 0, 0, 0) 100%
  );
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: cover;

  mask-image: radial-gradient(
    circle,
    rgba(0, 0, 0, 1) 90%,
    rgba(0, 0, 0, 0) 100%
  );
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: cover;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-slideDown {
  animation: slideDown 0.3s ease-out;
}

.bg-hero {
  background: rgba(0, 0, 0, 0.4);
  padding: 1rem 2rem;
  border-radius: 0.5rem;
}

.row-span-30 {
  grid-row-end: span 30;
}
.row-span-40 {
  grid-row-end: span 40;
}

.row-span-10 {
  grid-row-end: span 10;
}
.row-span-20 {
  grid-row-end: span 20;
}
.row-span-15 {
  grid-row-end: span 15;
}
.row-span-13 {
  grid-row-end: span 13;
}
.row-span-19 {
  grid-row-end: span 19;
}

.row-span-14 {
  grid-row-end: span 14;
}

.row-span-18 {
  grid-row-end: span 18;
}

@media (min-width: 600px) {
  .md\:row-span-15 {
    grid-row: span 15 / span 15;
  }
}