:root { 
    --container-padding:40px;
    --container-width: 585px;
    --header-height:60px;

    --white: #fff;
    --black: #000;
    --font-regular:18px;
}

/* Structure */
* { box-sizing: border-box; padding: 0; margin: 0; }
body { background-color: var(--white); color: var(--black); font-size:var(--font-regular);   font-family: "PT Mono", monospace;  font-weight: 400; font-style: normal; line-height: 1.12; }
a { color: var(--black); text-decoration: none; }
h2 { font-size: inherit; font-weight: normal; text-transform: uppercase; }
address { font-style: normal; }
button { color: var(--black); appearance: none; border-radius: 0; background: transparent; border:0; font-family: inherit; font-size: inherit; cursor: pointer; }
img { width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }

/* Header */
.header { position: fixed; padding: 0 var(--container-padding); top: 0; left: 0; width: 100%; height: var(--header-height); line-height: var(--header-height); display: flex; align-items: center; justify-content: space-between; z-index: 1; }
.header .is-active { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; cursor: default; }

/* Information */
.information { scrollbar-width: thin; scrollbar-color: var(--black) transparent; position: fixed; top:var(--header-height); left: 0; bottom: 0; right: 0; display: none; padding: var(--container-padding); overflow-y: auto; }
.information div { max-width: var(--container-width); width: 100%; margin: auto; }
.information p, .information address, .information h2 { margin-bottom: 1lh; }
.information .underline { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.information::-webkit-scrollbar { width: 4px; }
.information::-webkit-scrollbar-track { background: transparent; }
.information::-webkit-scrollbar-thumb { background: var(--black); border-radius: 0; }

/* Gallery */
.gallery { position: fixed; top:var(--header-height); left: 0; bottom: 0; right: 0; display: none; padding: var(--container-padding); }


/* Media Queries */
@media (max-width: 600px) {
    :root { 
        --container-padding:24px;
        --font-regular:15px;
    }
}
