* {
    margin: 0;
    padding: 0;
    user-select: none;
}
*, *::before, *::after { box-sizing: border-box; }
html, body {
    height: 100vh;
    overflow: hidden;
    font-family: var(--font);
    font-size: 25px;
    font-weight: var(--font-weight-normal);
    color: var(--color-white);
}
button {
    font: inherit;
}
body {
    background: var(--background);
    background-color: #000; /* Safari status bars */
    position: relative; /* So the absolute children anchor to this */
}
:root { /* https://clrs.cc */
    --background: linear-gradient(to bottom, #303, #003, #300);
    --color-navy: #001F3F;
    --color-blue: #0074D9;
    --color-aqua: #7FDBFF;
    --color-teal: #39CCCC;
    --color-olive: #3D9970;
    --color-green: #2ECC40;
    --color-lime: #01FF70;
    --color-yellow: #FFD800;
    --color-orange: #FF851B;
    --color-red: #FF4136;
    --color-fuchsia: #F012BE;
    --color-purple: #B10DC9;
    --color-maroon: #85144B;
    --color-white: #fff;
    --color-silver: #DDDDDD;
    --color-gray: #AAAAAA;
    --color-black: #000;
    /* --font: "Metal Mania", "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif; */
    --font: "Noticia Text", "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;
    --font-weight-normal: 400,
}

#photo {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-size: cover;
    background-position: center center;
}
.grain {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: image-set(url('grain.png') 3x) repeat;
    xbackground: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");
    opacity: 0.1;
}
.dim {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: #000;
    opacity: 0.5;
}
.outer {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    padding-top: max(0.5rem, env(safe-area-inset-top));
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
    padding-left: max(0.5rem, env(safe-area-inset-left));
    padding-right: max(0.5rem, env(safe-area-inset-right));
}
#topics {
    flex: 1;
    display: none;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 1rem;
}
button {
    padding: 1rem;
    border-radius: 0.3rem;
    border: 1px solid #ffffff33;
    font-size: 1.2rem;
    background: linear-gradient(to bottom, #00000022, #00000088);
    color: var(--color-white);
}
button#back {
    padding: 0;
    font: serif;
    align-self: center;
    aspect-ratio: 1;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
button#back svg {
    width: 60%;
    height: 60%;
}
button:active {
    opacity: 0.5;
}
#verse {
    flex: 1;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
}
.verse-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    gap: 1rem;
    overflow-y: auto;
}
#text {
    text-align: justify;
    max-width: 30rem;
    line-height: 150%;
}
#location {
    font-style: italic;
    color: var(--color-silver);
}