html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #ffffff;
}

.image-container {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-container a {
    height: 80%;                /* Allows the anchor to take up 80% of viewport height */
    display: flex;              /* Enables flexbox for the anchor */
    justify-content: center;    /* Centers image horizontally within anchor */
    align-items: center;        /* Centers image vertically within anchor */
    text-decoration: none;      /* Removes underline on link */
}

.image-container a img {
    height: 100%;               /* Image takes full height of anchor (which itself is 80% of viewport) */
    width: auto;                /* Maintains aspect ratio */
    display: block;             /* Removes whitespace below image */
}

.hero {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 50vh; /* Full screen */
    background-color: black; /* Matches your aesthetic */
}