@font-face {
    font-family: "Inter";
    src: url("/fonts/Inter-VariableFont_slnt,wght.ttf");
}

h1, h2 {
    text-align: center;
}

:root {
    --shadow-color: 0deg 0% 58%;
}

hr#nav-hr {
    max-width: 50%;
    border-bottom: none;
    margin: 1.5rem auto;
}

body {
    background: #eee;
    margin: 1.5rem;
    font: 1.1rem/160% "Inter", sans-serif;
}

header, main, footer {
    max-width: 60rem;
    margin: 1rem auto;
}

header {
    text-align: center;
    max-width: 60rem;
    margin: 3rem auto;
}

footer {
    margin: 2rem auto;
    text-align: center;
}

nav {
    margin: auto;
    max-width: 60rem;
}

a {
    text-decoration: none;
}

a:hover:not(header a:hover) {
    text-decoration: underline;
}

h1 {
    font-size: 300%;
    margin: 1.5rem;
    font-weight: normal;
    text-decoration: none;
}

h1 a, h1 a:hover {
    color: black;
}

div#gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

div#gallery figure {
    max-width: 35%;
    margin: auto;
    padding: 1rem;
    transition: transform 0.2s;
    transform: scale(1);
    cursor: pointer;
}

div#gallery figure:hover {
    transition: transform 0.2s;
    transform: scale(1.05);
    cursor: pointer;
}

dialog {
    border: none;
    outline: none;
    padding: 0;
    border-radius: 1rem;
}

@keyframes fade-in {
    0% {opacity: 0}
    100% {opacity: 1}
}

@keyframes fade-out {
    0% {opacity: 1}
    100% {opacity: 0}
}

dialog[open] {
    background: #eee;
    animation: fade-in 0.2s;
    overflow: hidden;
}

dialog[open] figcaption {
    font-weight: bold;
    font-size: 120%;
    padding: 1.2rem 0;
}

dialog[closing] {
    animation: fade-out 0.2s;
}

dialog[open]::backdrop {
    background: rgba(50, 50, 50, 0.8); 
    backdrop-filter: blur(5px);
    animation: fade-in 0.2s;
}

dialog[closing]::backdrop {
    animation: fade-out 0.2s;
}

dialog figure {
    max-width: 100%;
    margin: 0;
    padding: 2rem;
}
    
figure {
    text-align: center;
}

img {
    vertical-align: middle;
}

img:not(img.no-shadow) {
    max-width: 100%;
    max-height: 80vh;
    height: auto;
    box-shadow: 0.1px 0.2px 0.3px hsl(var(--shadow-color) / 0.27),
                0.3px 0.8px 1px -0.3px hsl(var(--shadow-color) / 0.27),
                0.5px 1.4px 1.7px -0.6px hsl(var(--shadow-color) / 0.27),
                0.8px 2.1px 2.5px -0.8px hsl(var(--shadow-color) / 0.27),
                1.2px 3px 3.6px -1.1px hsl(var(--shadow-color) / 0.27),
                1.7px 4.3px 5.2px -1.4px hsl(var(--shadow-color) / 0.27),
                2.5px 6.1px 7.4px -1.7px hsl(var(--shadow-color) / 0.27),
                3.5px 8.6px 10.4px -1.9px hsl(var(--shadow-color) / 0.27),
                4.7px 11.8px 14.3px -2.2px hsl(var(--shadow-color) / 0.27),
                6.4px 15.9px 19.3px -2.5px hsl(var(--shadow-color) / 0.27);
}

img.nav-img {
    width: 1.75rem;
    padding: 0.5rem;
}

figcaption {
    margin-top: 1.5rem;
    font-size: 90%;
}

dialog figcaption {
    font-style: normal;
}

span:not(nav span) {
    display: none;
}

dialog figure span {
    display: initial;
    padding: 1rem 0;
    font-size: 80%;
}

dialog[open] figure span {
    margin: 2rem auto;
}

@media screen and (max-width: 40rem) {
    h1 {
        font-size: 240%;
    }

    div#gallery figure {
        max-width: 100%;
    }

    dialog {
        max-width: 95%;
        border-radius: 0.5rem;
    }

    dialog figure {
        padding: 0.65rem 0.65rem 1.2rem;;
    }
}