*,*::before,*::after{
    box-sizing:border-box;
    padding:0;
    margin:0;
    background:none;
    text-decoration:none;
    outline:none;
    font-family:inherit;
    font-size:inherit;
    line-height:inherit;
    font-weight:inherit;
    color:inherit;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    font-feature-settings:"onum", "kern", "liga", "clig", "calt"}:root{
    --c-bg: hsl(0,0%,100%);
    --c-bg-light: hsl(0,0%,97%);
    --c-high: hsla(150,20%,40%,0.4);
    --c-high-light: hsla(150,20%,40%,0.9);
    --c-text: hsl(0,0%,25%);
    --c-text-mid: hsl(0,0%,50%);
    --c-text-light: hsl(0,0%,97%);
    --f-family: "Monaco",monospace;
    --f-size: 12px;
    --f-lineheight: 20px;
        --f-weight: 400;
        --f-style: normal;
        --f-scale-s: 0.889;
        --f-scale-m: 1.2;
        --f-scale-l: 1.4;
        --f-scale-xl: 1.6;
        --f-scale-xxl: 2.2;
        --l-narrower: 9rem;
        --l-narrow: 18rem;
        --l-regular: 24rem;
        --l-wide: 36rem;
        font-size:var(--f-lineheight);
        font-family:var(--f-family);
        font-weight:var(--f-weight);
        font-style:var(--f-style);
        text-align:var(--f-alignment);
        background:var(--c-bg);
        color:var(--c-text)}
@media (min-width: 500px){:root{
    --f-size: 20px;
    --f-lineheight: 30px}}
@media (min-width: 2000px){:root{
    --f-size: 25px;
    --f-lineheight: 35px}}::selection{background:var(
        --c-high);
        color:var(
            --c-text)}
body,html{
    scroll-behavior:smooth;
    width:100%}
html,body{
        width:100%;
        height:100%}
body{
    position:relative;
    display:grid;
    grid-template-rows:calc(100% - 4rem) 4rem auto}
.error{
    display:grid;
    grid-template-rows:100%}
.nav{
    grid-row:2;
            display:flex;
            justify-content:center;
            align-self:center}
.nav-button{
            width:2rem;
            height:2rem;
            display:flex;
    justify-content:center;
    align-items:center}
@media (max-width: 499px){
    .nav-button{
        margin:0 .15rem}}
.nav-button svg{
    display:block;
    width:25px;
    height:25px;
    fill:var(--c-text)}
a.nav-button{
    transition:opacity 200ms ease-out}
a.nav-button:hover{
    opacity:0.5}
span.nav-button{
    opacity:0.25;
    cursor:not-allowed}
.text{
    grid-row:3;
    padding:2rem 1rem 4rem;
    width:100%;
    display:flex}
.error .text{
    grid-row:1;
    padding:1rem}
.text-content{
    margin:auto;
    max-width:18rem;
    font-size:var(
        --f-size);
    line-height:1rem}
.text-content p+p{
    text-indent:1rem}
.text-content strong{
    font-weight:600}
.text-content a{
    background:linear-gradient(to right, var(--c-high), var(--c-high-light));
    background-size:300% 20%;
    background-repeat:no-repeat;
    background-position:0% 100%;
    transition-property:background-position;
    transition-duration:300ms}
.text-content a:hover{
    background-position:100% 100%}
.image-container{
    display:grid;
    grid-row:span 1;
    padding:2rem 2rem 0;
    align-content:center}
@media (min-width: 600px)
{.image-container{
    padding:4rem 2rem 0}}
@media (min-width: 900px)
{.image-container{
    padding:4rem 4rem 0}}
.image{
    display:block;
    max-height:100%;
    max-width:100%;
    margin:auto;
    box-shadow:0 5px 15px rgba(0,0,0,0.07),0 15px 25px rgba(100,100,100,0.3)}
body.grid{
    display:grid;
    grid-template-rows:auto 4rem auto}
main.moments{
    grid-row:1;
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    padding:2rem 1rem 0}
@media (min-width: 600px)
{main.moments{
    padding:4rem 2rem 0}}
@media (min-width: 900px)
{main.moments{
    padding:4rem 4rem 0}}
.moment-link{
    align-self:center;
    display:block;
    width:6rem;
    margin:1.5rem}
@media (min-width: 900px){
    .moment-link{
        margin:2rem}}
.moment-link.landscape{
    width:8rem}
.moment-img{
    display:block;
    width:100%;
    height:auto}