.hero {
    margin: 0px 20px 20px;
    height: calc(100vh - 76px);
    background-image: linear-gradient(
        rgba(0, 0, 0, 0.2),
        rgba(0, 0, 0, 0.2)
      ), url("../img/eden realms.png");
    background-size: cover;
    background-repeat: repeat;
    background-position: 0 0;
    animation: moveBackground 40s linear infinite;
}

.hero-content {
    padding: 25vh 10px 0px;
    text-align: center;
}

.hero-content h1 {
    color: #ffda2f;
}

/* Adjust the page dimensions on mobile devices */
@media (max-aspect-ratio: 3/4) {
    .hero {
        margin: 0px 0px 0px;
        height: calc(100vh - 56px);
    }
}