:root {
    --section-spacing: 300px;
}

body {
    max-width: 96%;
    margin: auto;
    margin-bottom: 10vh;
}

img {
    display: none;
}

#navbar img {
    display: initial;
}

.featured img {
    display: block;
}

.header {
    font-family: myGothicDemi;
    color: var(--purple);
    font-size: 14rem;
    text-align: center;
    margin: 5vh;
    margin-top: var(--section-spacing);
}

.a-button {
    display: block;
    margin: auto;
    width: fit-content;
    margin-top: 5vh;
}

.photo-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-flow: dense;
    gap: 10px;
}

@media (max-width: 768px) {
    .photo-container {
        grid-template-columns: auto;
    }
}

.a-button {
    display: block;
    margin: auto;
    width: fit-content;
    margin-bottom: var(--section-spacing);
    margin-top: 5vh;
}