button, input[type="submit"] {
        font-family: "Montserrat", sans-serif;
        background-color:white;
        border:1px solid #b6b6b6;
        padding:8px 12px;
        border-radius:5px;
    }

    #wrapper {
        width:65vw;
        margin:0 auto;
        padding:50px 0;
        position:relative;
    }

    section {
        margin-bottom:30px;
    }


/* Top */

    #top {
        position:sticky;
        top:0;
        z-index:1;
        display:flex;
        justify-content: space-between;
        height:60px;
        box-sizing:content-box;
        padding-top:12px;
        background-color:white;
        box-shadow:0px 0px 15px 20px white;
    }

    #top img {
        max-height: 100%;
    }

    #top #links {
        display:flex;
        gap:16px;
        padding:14px 0px;
    }

    #top #links a {
        display:block;
    }


/* Gallery */

    #gallery_section {
        display:grid;
        overflow:hidden;
        grid-template-rows:1fr 160px;
        max-height: initial;
        transition:2s;
    }

    #gallery_section > * {
        max-height: initial;
    }

    #gallery {
        max-width: initial;
        width:calc(100% + 16px);
    }

    #gallery .photo {
        float: left;
        width:calc(100%/3 - 16px);
        margin-bottom: 16px;
        border-radius:5px;
        overflow:hidden;
        cursor: pointer;
    }

    #gallery .photo img {
        height:100%;
        width:100%;
        display:block;
        object-fit: cover;
    }

    #gallery_load {
        z-index:0;
        background: linear-gradient(0deg, rgb(255 255 255) 35%, rgb(255 255 255 / 0%) 100%);
        display: flex;
        align-items:end;
    }

    #gallery_load_button {
        cursor: pointer;
        display:block;
        margin:12px auto;
    }

    #gallery_section.finished #gallery_load {
        pointer-events:none;
        transition:opacity 2s;
        opacity:0;
    }

    .photo {
        transition:0.2s;
        min-height:100px;
        max-height:60vh;
    }

    #gallery .photo img {
        min-height:100px;
        max-height:60vh;
    }    
    
    #gallery:hover .photo:not(:hover) {
        opacity: 0.9;
    }


/* Modal */

    #modal {
        position:fixed;
        inset:0;
        z-index: 2;
        pointer-events: none;
        display:grid;
    }

    #modal_background {
        position:relative;
        grid-area:1/1/4/4;
        pointer-events: none;
        z-index: 1;
    }

    #modal.closed {
        pointer-events: none;
    }

    #modal.closed #modal_background {
        opacity:0;
        background-color: none;
        pointer-events: none;
    }

    #modal.open #modal_background {
        pointer-events: initial;
        opacity:1;
        background-color: rgba(0,0,0,0.7);
    }

    #modal.open {
        pointer-events: initial;
    }

    #modal {
        grid-auto-flow:column;
        grid-template-columns:1fr min-content 1fr;
        grid-template-rows: 1fr auto 1fr;
    }

    #modal_content,
    #modal_close {
        position:relative;
        grid-row:2;
        z-index:2;
    }

    #modal_content {
        grid-column:2;
    }

    #modal_content img {
        max-height:95vh;
        border-radius:5px;
        max-width:calc(100vw - 48px*2);
        box-shadow:0px 0px 20px rgba(0,0,0,0.5);
    }

    #modal_close {
        grid-column:3;
        width:32px;
        margin-left:8px;
        filter:drop-shadow(0px 0px 20px rgba(0,0,0,0.7));
        cursor: pointer;
    }

    #modal.open #modal_close {
        opacity: 1;
    }

    #modal_close,
    #modal.closed #modal_close {
        opacity:0;
    }


/* Contact */

    #info_section {
        display:grid;
    }

    form input[type="text"],
    form input[type="email"],
    form textarea {
        width:100%;
        font-size:15px;
        font-family: "PT Mono", monospace;
        border: none;
        padding:8px;
        margin-bottom:12px;
        border-bottom: 1px solid #43434d;
        border-radius:5px;
        border-bottom-right-radius:0px;
        background-color:rgba(0,0,0,0.07);
        transition:0.3s;
    }

    form input[type="text"]:focus,
    form input[type="email"]:focus,
    form textarea:focus {
        outline:none;
        background-color:rgba(0,0,0,0.03);
    }

    #footer {
        text-align: center;
        font-size: 13px;
    }


/* DESKTOP ONLY */
@media only screen and (min-width: 768px) {
    #info_section {
        grid-auto-flow: column;
        grid-template-columns: 1fr 1fr;
    }
}


/* MOBILE ONLY */
@media only screen and (max-width: 768px) {
    #wrapper {
        width:100%;
        padding:16px;
    }
    
    #gallery .photo {
        width:calc(100%/2 - 16px);
        margin-bottom: 16px;
    }

    #info_section {
        grid-auto-flow: row;
    }
}