* { box-sizing: border-box;  } :root { --purple: #5d1b90; --yellow: #f9ed6f; --page-width: calc(max(min(1400px, 100vw - 30px), 370px)); } body { font-family: sans-serif; margin: 15px 8px; line-height: 1.5em; } p { text-align: justify; } a, a:hover { color: var(--purple) } #logo img { height: 100%; vertical-align: middle; filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(156deg) brightness(104%) contrast(101%); } #logo img:hover { filter: invert(89%) sepia(81%) saturate(6785%) hue-rotate(354deg) brightness(106%) contrast(108%); } body.index-page #banner { --banner-height: calc(max(500 * var(--img-scale) + var(--nav-height), min(1400 * var(--img-scale) + var(--nav-height), 100vh - 30px))); --banner-text-vert-anchor-ratio: 0.55; } #banner{ --img-width-px: 4092; --img-height-px: 2724; --img-cropped-width-px: 3136; --img-cropped-height-px: 2153; --img-cropped-left-px: 630; --img-cropped-top-px: 237; --nav-height: calc(min(110px, min( max(88.8px, var(--page-width) / 10.25), max(88.8px, 15vh)))); --nav-bot-padding: 20px; --img-horiz-cropped-ratio: 0.65; --img-horiz-anchor-ratio: 0.552; --banner-left-extra-space: calc(var(--page-width) * 0.095); --banner-right-extra-space: calc(var(--page-width) * 0.095);  --banner-left-extra-space: calc(var(--page-width) * 0.095); --banner-right-extra-space: calc(var(--page-width) * 0.055); --img-vert-anchor-ratio: 0.43; --banner-vert-anchor: calc((var(--banner-height) - var(--nav-height)) * 0.13 + var(--nav-height)); --img-scale: calc((var(--page-width) - var(--banner-left-extra-space) - var(--banner-right-extra-space)) / (var(--img-width-px) * var(--img-horiz-cropped-ratio))); --banner-height: calc(max(300 * var(--img-scale) + var(--nav-height), min(740 * var(--img-scale) + var(--nav-height), 50vh))); background-color: black; display: block; width: var(--page-width); height: var(--banner-height); margin-right: auto; margin-left: auto; color: white; } .banner-text { position: absolute; width: var(--page-width); top: calc(var(--banner-vert-anchor) - var(--img-height-px) * var(--img-scale) * (var(--img-vert-anchor-ratio) - var(--banner-text-vert-anchor-ratio))); color: white; font-size: calc(max(min(25px, var(--page-width)/16), var(--page-width)/40)); text-align: center; font-style: italic; font-weight: bold; text-shadow: 0px 0px 2px black, 0px 0px 3px black, 2px 2px 4px black; padding: 0px; padding-left: var(--banner-left-extra-space); padding-right: var(--banner-right-extra-space); line-height: 120%; } .banner-subtext { margin-top: calc(5% - 0.4em); font-size: 0.85em; } #menu-button { display: none; } #banner::before { position: absolute; height: var(--banner-height); width: var(--page-width); background: url("graphics/menu-bg.e155ebd3.png") 100% calc(var(--nav-height) - 110px) / 100% 110px no-repeat, url("graphics/banner.d8e91929.jpg") calc(var(--banner-left-extra-space) + (var(--img-cropped-left-px) - var(--img-width-px) * (var(--img-horiz-anchor-ratio) - var(--img-horiz-cropped-ratio) / 2)) * var(--img-scale)) calc(var(--banner-vert-anchor) + (var(--img-cropped-top-px) - var(--img-height-px) * var(--img-vert-anchor-ratio)) * var(--img-scale)) / calc(var(--img-cropped-width-px) * var(--img-scale)) calc(var(--img-cropped-height-px) * var(--img-scale)) no-repeat; display: block; content: ""; } #banner.hidden::before { opacity: 0; } #banner.fade-in::before { transition: opacity 1s; opacity: 1; } nav { height: var(--nav-height); padding: 5px 20px; padding-bottom: var(--nav-bot-padding); text-align: right; display: flex; justify-content: flex-end; align-items: center; } nav a { color: white; font-size: 20px; text-decoration: none; transition: color 0.2s ease; font-family: sans-serif; margin: 0; display: inline-block; padding: 20px 12px; z-index: 1; } #logo { height: calc(var(--nav-height) - var(--nav-bot-padding)); position: absolute; padding: 5px 0px 0px 15px; padding-left: calc(var(--nav-height) / 8); overflow: hidden; } #logo.hidden { clip-path: polygon(0% 0%, 0% 100%, 30% 100%, 30% 0%); } #logo.fade-in { transition: clip-path 0.25s; clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%); } nav a:hover, #menu-button:hover { color: yellow; } #main-with-aside { width: var(--page-width); display: flex; margin-left: auto; margin-right: auto; } main { background: white ; flex-grow: 1; padding: 40px; } aside { background: white; text-align: center; flex-shrink: 0; width: 350px; padding: 10px; border : 0 0 0 1px solid gray; } h1 { color: var(--purple); font-size: 35px; margin-top: 0em; margin-bottom: 0.5em; } h2 { color: var(--purple); font-size: 25px; margin-top: 1.2em; margin-bottom: 0em; } p.images { display: flex; flex-wrap: wrap; } p.images:after { display: block; content: ""; flex-grow: 5; width: 50%; height: 0px; } a.thumb { flex-grow: 1; flex-shrink: 1; padding: 5px; flex-basis: min(calc(var(--thumb-width) / 2), 40%); } img.thumb, .youtube.thumb { width: 100%; height: 100%; object-fit: cover; } img.fullwidth, .youtube.fullwidth { width: calc(100% - 40px); margin: 20px; } .youtube { aspect-ratio: 16/9; } .youtube-icon { height: 1em; position: relative; top: 3px; } @media (max-width: 940px) {  body.index-page #menu-button::after { content: ""; background-image: url("graphics/arrow-up.379496ed.svg"); background-size: 100% 100%; background-repeat: no-repeat; background-position: 0px 0px; position: absolute; top: calc(0.65 * var(--nav-height)); right: 0px; width: 55px; height: 100px; display: block; rotate: 12deg; } body.index-page #menu-button.hidden::after { clip-path: polygon(0% 100%, 0% 100%, 100% 100%, 100% 100%); } body.index-page #menu-button.fade-in::after { transition: clip-path 0.25s; clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%); } nav { background-image:none; display: none; position: absolute; top: 70px; right: 15px; padding: 10px 0px; height: auto; z-index: 2; } #banner.menu-shown #menu-button { background-color: #111; } #banner.menu-shown nav { background-color: #111; display: block; } nav a { display: block; padding: 10px 30px; } #menu-button::before { content: "\2261"; font-family: sans-serif; font-size: 50px; z-index: 1; } #menu-button { position: relative; display: inline-flex; height: calc(var(--nav-height) - var(--nav-bot-padding)); width: calc(var(--nav-height) - var(--nav-bot-padding)); justify-content: center; align-items: center; color: #fff; text-decoration: none; float: right; z-index: 1; } #main-with-aside { flex-direction: column; } main { flex-basis: auto; } aside { flex-basis: auto; width: auto; margin: 0px; } } #image-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: none; z-index: 3; } #image { position:relative; max-width: 90%; max-height: 90%; transform: translate(-50%, -50%); top: 50%; left: 50%; text-align: center; } #image-caption { position: absolute; bottom: 10px; left: 50%; color: #fff; transform: translate(-50%, -100%); bottom: 0px; } #close-button { position: absolute; font-size: 48px; background-color: transparent; right: 3%; top: 3%; border: none; color: #fff; cursor: pointer; } #prev-button, #next-button { position: absolute; top: 50%; transform: translateY(-50%); font-size: 48px; background-color: transparent; border: none; color: #fff; cursor: pointer; } #prev-button { left: 2%; width: 30%; height: 80%; text-align: left; } #next-button { right: 2%; width: 30%; height: 80%; text-align: right; } .concerts-table { } .concerts-table * { text-align: left; } .concerts-table .row { border: solid 3px; display: grid; grid-template-columns: 20% 20% auto; grid-template-areas: "date place main"; padding: 5px; background-color: var(--yellow); } .concerts-table .cell { padding: 5px 10px; text-align: center; overflow: clip; align-self: start; } .concerts-table .cell p { margin: 5px; } .concerts-table .cell-date { grid-area: date; } .concerts-table .cell-place { grid-area: place; } .concerts-table .cell-main { grid-area: main; padding: 0px 10px; text-align: left; } .concerts-table, .concerts-table .row { border-color: #fff; } @media (max-width: 750px), (min-width: 850px) and (max-width: 1100px) { .concerts-table .row { grid-template-columns: 45% auto; grid-template-rows: auto 1fr; grid-template-areas: "date main" "place main"; } .concerts-table .cell-date { padding-bottom: 0px; } .concerts-table .cell-place { padding-top: 0px; } } #guestbook-form { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; padding: 5px; width: calc(min(max(80%, 400px), 100%)); margin-bottom: 15px; } #guestbook-form label { margin-bottom: 4px; } #guestbook-form input#guestbook-name { width: 100%; max-width: 300px; border: 1.5px solid black; margin-bottom: 15px; } #guestbook-form textarea { height: 100px; width: 100%; border: 1.5px solid black; margin-bottom: 15px; } #guestbook-captcha { height: 150px; width: 100%; max-width: 300px; border: 1.5px solid black; align-items: stretch; display: grid; grid-template-areas: "task task" "opt1 opt2" "opt3 opt4"; grid-template-rows: min-content 1fr 1fr; padding: 5px; margin-bottom: 15px; } #guestbook-captcha div, #guestbook-captcha a, #guestbook-captcha.text { text-align: center; vertical-align: center; padding: 5px; display: flex; justify-content: center; align-content: center; align-items: center; } #guestbook-captcha.text { color: gray; } #guestbook-captcha .task { grid-area: task; background-color: var(--purple); color: white; margin: -5px; margin-bottom: 5px; font-weight: bold; font-style: italic; } #guestbook-captcha a.opt { background-color: var(--yellow); text-decoration: none; color: black; margin: 5px; } #guestbook-captcha a.opt:hover { background-color: var(--purple); color: white; } #guestbook-form input[type="submit"] { margin-top: 5px; margin-left: auto; margin-bottom: 2em; } .guestbook-entry { background-color: var(--yellow); padding: 5px; margin: 6px 3px; } .guestbook-entry p { margin: 5px; } .guestbook-entry h3 { margin-top: 0px; }