@import url("fonts.css"); @import url("../blueimp/css/blueimp-gallery.min.css"); html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } html { background-color: white; color: #555; height: 100%; } body { font-family: Open Sans,Arial; font-size: 12pt; line-height: 1.4; text-align: justify; margin: 0; padding: 0; min-height: 100%; display: flex; flex-direction: column; } #headbg { background-image: url("../img/headbg.jpg"); /* Full height */ height: 100vh; /* Center and scale the image nicely */ background-position: center; background-repeat: no-repeat; background-size: cover; } #head { position: absolute; top: 20%; width: 100%; height: 100px; text-align: center; font: 400 65px/1.8 sans-serif; color: white; letter-spacing: 10px; z-index: 100; } #head a { color: white; text-decoration: none; } #head.headerbar { position: fixed; top: 0px; background-color: #b9a58d; height: 75px; font-size: 45px; transition: none .224s ease-in-out; transition-property: background-color, font-size, height; } #content { margin: 30px 10px; } @media (min-width: 650px) { #content { margin: 30px 20px; } } footer { font-size: 0.7em; display: flex; justify-content: flex-end; align-items: center; flex-direction: column; margin: 10px 20px; margin-top: auto; } @media (min-width: 650px) { footer { flex-direction: row; } } footer > div { margin: 5px 15px; } @media (min-width: 650px) { footer > div { margin: 0 15px; } } .galleryblock .blockhead { display: flex; flex-direction: column; margin: 15px 0; gap: 5px; margin-top: 35px; } .galleryblock .blockhead h2 { margin: 0; } .galleryblock .blockhead .gallerydate { align-self: flex-end; } @media (min-width: 650px) { .galleryblock .blockhead { flex-direction: row; justify-content: space-between; align-items: center; } .galleryblock .blockhead .gallerydate { align-self: auto; } } .galleryblock .gallery { display: flex; align-items: stretch; flex-direction: column; gap: 15px; } @media (min-width: 400px) { .galleryblock .gallery { display: grid; grid-template-columns: repeat(2, 1fr); } } @media (min-width: 700px) { .galleryblock .gallery { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1000px) { .galleryblock .gallery { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } } @media (min-width: 1000px) { .galleryblock .gallery a { max-width: 350px; } } .galleryblock .gallery img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; aspect-ratio: 1/1; } a, a:visited { color: #07a; }