main {
    width: 100%;
    margin-left:0;
    margin-right:0;
}

a:link {
    text-decoration: underline;
}

article>* {
    display: none;
}

article>*:target {
    display: flex;
    opacity: 1;
    justify-content: center;
}

article>header {
    max-width: 1000px;
    margin: auto;
}

article>header>div {
    background-color: rgba(41, 41, 46, 0.4);
    min-height: 620px;
    margin: auto;
    padding-top: 2em;
    box-sizing: border-box;

}

@media (min-width:1024px) {
    article>header>div {
        width: 65%;
    }
}

@media (min-width:1536px) {
    article>header>div {
        width: 50%;
    }
}



article>header p {
    padding-left: 1em;
    padding-right: 1em;
    color: white
}

article>header a {
    font-weight: bold;
    font-size: larger
}



figure {
    width: 100%;
    text-align: center;
    margin: 1rem
}

figure img {
    max-width: 100%;
}

figure figcaption {
    text-align: center;
}

figure figcaption>h2 {
    font-size: inherit;
    padding: inherit;
    margin: inherit;
}

article>#grid {
    flex-wrap: wrap;
    gap: 1rem
}

div.prev,
div.next {
    margin: auto;
    padding: 0 0.5rem 3rem 0.5rem;
}

@media (min-width:1024px) {
    article>#grid {
        width: 80%;
        margin: auto;
    }

    article>#grid img {
        max-width: 120px;
        max-height: 120px;
        margin: 1.5rem;
    }

    div.prev,
    div.next {
        display: block;
        margin: 35vh 10vw auto 10vw;
        font-size: 2rem;
    }
}

@media (min-width: 1536px) {
    article>#grid {
        width: 65%;
        margin: auto;
    }

    article>#grid img {
        max-width: 150px;
        max-height: 150px;
        margin: 1.5rem;
    }

    div.prev,
    div.next {
        margin: 25vh 10vw auto 10vw;
        font-size: 2.5rem;
    }
}