body {
    background-color: black;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    margin: 0;
    padding: 0;
    font-size: 22px;
    color: white;
}

header, footer {
    margin: 33px 0;
}

header {
    margin-bottom: 0;
}

header img, footer img {
    display: block;
    margin: auto;
    width: 95%;
    max-width: 1280px;
}

h1 {
    font-size: 4rem;
    margin: 0 auto;
    margin-top: 33px;
}

ul {
    width: 95%;
    max-width: 1280px;
    padding: 0;
    padding-bottom: 33px;
    margin: auto;
    column-width: 360px;
}

li {
    list-style: none;
    padding-top: 33px;
}

li > figure {
    display: block;
    width: 350px;
    position: relative;
    margin-inline: 0;
    margin-block: 0;
    margin: auto;
}

figure > img {
    width: 333px;
    border-radius: 25px;
}

ar-button[ar="quick-look"], ar-button[ar="scene-viewer"] {
    position: absolute;
    top: 1rem;
    left: 1.5rem;
    font-size: 1rem;
    opacity: 0.9;
    font-weight: bolder;
    border-radius: 25px;
}

ar-button, ar-button .prompt, ar-button::before, ar-button:not([ar="unsupported"]).global {
    display: none;
}

ar-button[ar="quick-look"], ar-button[ar="scene-viewer"], ar-button[ar="unsupported"].global {
    display: flex;
}

ar-button[ar="unsupported"].global {
    width: 540px;
    box-sizing: border-box;
    margin: 33px auto;
    opacity: 0.5;
    font-size: 3rem;
    border-radius: 36px;
}

ar-button[ar="quick-look"] .prompt, ar-button[ar="scene-viewer"] .prompt, ar-button[ar="unsupported"].global .prompt {
    display: inline;
}

ar-button[ar="quick-look"]::before, ar-button[ar="scene-viewer"]::before {
    display: block;
}

ar-button.global ~ p {
    margin: 0;
    padding: 0;
}

ar-button[ar="unsupported"].global ~ p {
    display: none;
}