/* rose keizer: one stylesheet for every page */
:root { color-scheme: light; }
body { margin: 8px; background: #fff; color: #000; font-family: Arial, sans-serif; }
a { color: #000; text-decoration: none; }
img, iframe { max-width: 100%; }
img { height: auto; }
iframe { border: 0; height: auto; }

/* front page */
.front { background: rgb(245, 255, 235); }
.front a:hover { color: yellow; }
.front img { opacity: 0.8; }
.front img:hover { opacity: 1; }
.front main { background: #fff; padding: 16px 0 40px 270px; }

.banner { height: 180px; max-width: 2160px; margin: 0 auto; position: relative; overflow: hidden; background: #fff; }
.banner h1 { margin: 90px 0 0 265px; color: darkgreen; font-size: 48px; line-height: 1.15; }
.banner div { position: absolute; top: 0; left: 0; width: 5959px; height: 100%; background: url(../images/frontpage/banner.jpeg); }
.mover-1 { animation: slide 100s linear infinite; opacity: 0.2; }
.mover-2 { animation: slide 1s linear infinite; opacity: 0; transition: opacity 0.5s ease-out; }
.banner:hover .mover-2 { opacity: 0.8; }
@keyframes slide { to { transform: translateX(-3305px); } }

h2 { margin: 0 0 56px; color: orange; font-size: 32px; }
.work { display: block; margin-bottom: 56px; font-size: 10px; font-weight: bold; }
.work span { display: block; margin-top: 2px; }
.contact { font-size: 18px; font-weight: bold; }

/* work pages */
.home { position: fixed; top: 12px; left: 12px; z-index: 1; color: orange; font-weight: bold; }
.home:visited { color: orange; }
.gallery { text-align: center; padding-top: 72px; }
.text + .gallery { padding: 48px 0; }
.text { max-width: 640px; margin: 0 auto 40px; }
.text h1 { margin: 18px 0 2px; font-size: 18px; }
.text p { margin: 0; font-size: 13px; line-height: 1.35; }
.text a { text-decoration: underline; }

/* image viewer */
dialog { border: 0; padding: 0; background: #fff; width: 100%; height: 100%; max-width: none; max-height: none; box-sizing: border-box; }
dialog[open] { display: flex; flex-direction: column; }
.view { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 8px; }
.view img { max-height: 100%; width: auto; object-fit: contain; }
.bar { display: flex; gap: 3ch; padding: 8px; font-size: 13px; flex-wrap: wrap; }
.bar .cap { flex: 1; min-width: 12ch; }
button { font: inherit; background: none; border: 0; padding: 0; color: inherit; cursor: pointer; }

@media (max-width: 720px) {
  .banner { height: 120px; }
  .banner h1 { margin: 60px 0 0 8px; font-size: 32px; }
  .front main { padding-left: 8px; }
  h2 { font-size: 24px; }
  .work { font-size: 12px; }
  .text p { font-size: 15px; }
  .gallery { padding-top: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .mover-1, .mover-2 { animation: none; }
}