*,*::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(45,29%,97%);
        --c-bg-light: hsl(45,29%,97%);
        --c-high: hsla(0,100%,0%,0.2);
        --c-high-light: hsla(0,100%,0%,0.9);
        --c-text: hsl(0,0%,20%);
        --c-text-mid: hsl(0,0%,40%);
        --c-text-light: hsl(0,0%,80%);
        --f-family: "Iowan Old Style",Palatino,Palatino Linotype,"Palatino LT STD",Garamond,Baskerville,Baskerville Old Face,Hoefler Text,Times New Roman,serif;
        --f-size: 16px;
        --f-lineheight: 24px;
        --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: 30px;
            --f-lineheight: 40px}}
        ::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}
.footer{
    bottom: 0;
    width: 100%;
    height: 2rem;
    background-color: inherit;
    color: inherit;
    display:flex;
    flex-direction: row;
    justify-content:center;
    align-items:center;}
.footer-button{
    width:2rem;
    height:2rem;
    display:flex;
    flex-direction: row;
    justify-content:center;
    align-items:center;}
a.title-text{
    font-weight:600;
    letter-spacing: 0.2rem;
    transition:opacity 200ms ease-out}
a.title-text:hover{
    opacity:0.5}
@media (max-width: 499px){
    .nav-button{
        margin:0 .15rem}}
.nav-button svg{
    display:block;
    width:24px;
    height:24px;
    fill:var(--c-text)}
a.nav-button{
    transition:opacity 200ms ease-out}
a.nav-button:hover{
    opacity:0.5}
a.footer-button{
    transition:opacity 200ms ease-out}
a.footer-button:hover{
    opacity:0.5}
span.nav-button{
    opacity:0.25;
    cursor:not-allowed}
.text{
    grid-row:3;
    padding:4rem 1rem 4rem;
    width:100%;
    display:flex;}
.error .text{
    grid-row:1;
    padding:1rem}
.text-content{
    margin:auto;
    max-width:16rem;
    font-size:var(--f-size);
    line-height:1rem}
.text-content p+p{
    text-indent:1rem}
.text-content strong{
    font-weight:600}
.text-content a{
    transition:opacity 200ms ease-out;
    text-decoration: underline;
    text-underline-offset: 4px;}
.text-content a:hover{
    opacity:0.5;}
.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}