.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;
    background-attachment: fixed;
    animation: moveBackground 40s linear infinite;
}

.hero-content {
    margin: auto;
    padding: 0px 20px 0px;
    padding-top: 20vh;
    max-width: 900px;
    text-align: center;
}

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

.projects {
    padding-top: 20px;
    min-height: 100vh;
}

.projects h1 {
    color: #3e84ca;
    text-align: center;
}

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

    .hero-content {
        padding-top: 10vh;
    }
}