:root {
  --font: Arial, sans-serif;
  --text-color: #343b5c;
  --link-color: #9a6060;
  --link-color-hover: #c70f0f;
}

*, *::before, *::after {
    box-sizing: border-box;
}

body{
    margin: 0;
    font-family: var(--font);
    color: var(--text-color);
    background-image: url(/images/background.jpg) ;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    min-height: 100vh;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--link-color);
}

a:hover,
 a:focus {
    color: var(--link-color-hover);
}

ul, ol {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}

p {
    margin-bottom: 10px;
}

.container {
    max-width: 1000px;
    margin: 50px auto;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 250px minmax(0, 1fr);
    word-break: break-all;
}

header {
    background-image: url(/images/header.gif);
    background-repeat: no-repeat;
    background-size: cover;
    background-position-y: center;
    padding: 10px;
}
header h1 {
  font-size: 60px;
  background-color: white;
  display: inline-block;
  padding: 0.25em 0.5em;
  margin: 0;
}

nav, main, footer {
    background-color: #e3e3cef2;
    padding: 10px;
}

nav a {
    display: block;
    padding: 0.4rem 0;
}

details summary {
    cursor: pointer;
    padding: 0.3rem 0;
}

header{
    grid-row: 1/2;
    grid-column: 1/3;
}

nav{
    grid-row: 2/3 ;
    grid-column: 1/2;
    height: max-content;
}

nav .spacer {
    height: 1rem;
    line-height: 1rem;
    margin: 0.5rem 0;
}

main{
    grid-row: 2/3;
    grid-column:2/3;
    height: max-content;
}

footer{
    grid-row: 3/4;
    grid-column: 1/3;
}

@media (max-width: 780px) {
    .container {
        grid-template-columns: 1fr;
        margin: 20px 10px;
    }

    header,
    nav,
    main,
    footer {
        grid-column: 1 / -1;
    }

    nav {
        grid-row: auto;
    }

    main {
        grid-row: auto;
    }

    footer {
        grid-row: auto;
    }

    .container {
        grid-gap: 14px;
    }

    header {
        padding: 14px;
    }

    nav,
    main,
    footer {
        padding: 14px;
    }

    .gallery {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }

    .gallery img {
        height: auto;
    }

    body {
        background-attachment: scroll;
    }
}

/* Gallery styles */
.gallery{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}
.gallery figure{
    margin: 0;
}
.gallery img{
    width: 100%;
    height: 140px;
    object-fit: cover;
    cursor: pointer;
    border-radius: 0;
    display: block;
}

/* Lightbox */
.lightbox{
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.85);
    visibility: hidden;
    opacity: 0;
    transition: opacity .18s ease;
    z-index: 9999;
}
.lightbox.show{
    visibility: visible;
    opacity: 1;
}
.lightbox img{max-width: 92%; max-height: 92%; border-radius: 0}
.lightbox .lb-close{
    position: absolute;
    top: 18px;
    right: 18px;
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
}