@font-face { font-family: 'Dosis'; src: url(/static/Dosis.ttf); }
@font-face { font-family: 'Piazzolla'; src: url(/static/Piazzolla.ttf); }
@font-face { font-family: 'Piazzolla'; font-style: italic; src: url(/static/Piazzolla-Italic.ttf); }
body {
  font-family: Piazzolla, Helvetica Neue, sans-serif;
  font-size: 1.1em;
  line-height: 1.4;
  max-width: 830px;
  margin: 0 auto;
  padding: 1em 2em;
  background: #FFF; color: #222;
}
h1,h2,h3,h4,h5,h6,nav,.font {
  font-family: Dosis, Helvetica Neue, sans-serif;
}
del { color: #999; }
.linkbox a { background: #F5F5F5; }

@media (prefers-color-scheme: dark) {
  body { background: #222; color: #E9E9E9; }
  b, strong { color: #FFF; }
  del { color: #666; }
  .linkbox a { background: #2A2A2A; }
}

/* general */
.font { font-size: 1.1em; font-weight: normal; }
h2,h3,h4,h5,h6 { margin-top: 1.5em; font-weight: normal; }
header>h1 { line-height: 1.2; font-size: 2.3em; }
header>nav>* { margin: 0 1em 1ex 0; display: inline-block; }
header>nav>.halfrm { margin-right: .3em; }
footer { font-size: 0.9em; margin: 80px auto 0; }
address { font-style: normal; }
main ::marker { font-size: 1.25em; color: #F39; }

ul { list-style: none; line-height: 1.5; padding: 0 2em; }
ul li:before {
  content: '❂';
  display: inline-block;
  width: 1em;
  margin-left: -1em;
  color: #F39;
}

a { color: #F39; text-decoration: none; }
a:hover { color: #CC287A; }
svg { fill: #F39; width: 1em; height: 1em; }
a:hover svg { fill: #CC287A; }
.underline { text-decoration: underline; }
.pagination { margin-top: 50px; }
.center,header,footer,.pagination { text-align: center; }
.no-style {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  outline: inherit;
}
input[type=text] {
  padding: .5em .8em;
  border: 2px solid #F39;
  border-radius: 3px;
}
input[type=checkbox] { width: 1.2em; height: 1.2em; }
.required::after {
  content: '*';
  color: #F39;
  font-size: 1.8em;
  line-height: 0;
  vertical-align: middle;
}
button:not(.no-style) {
  font-family: Piazzolla, Helvetica Neue, sans-serif;
  cursor: pointer;
  font-size: .9em;
  padding: .5em .8em;
  font-weight: bold;
  border: none;
  border-radius: 3px;
  background: #666;
  color: #FFF;
}
button:not(.no-style):hover { background: #CC287A; }

/* top menu */
nav .submenu { position: relative; }
nav .submenu > button { color: #F39; }
nav .submenu:before { content: '▿'; color: #F39; }
nav .submenu .linkbox { display: none; }
nav .submenu:hover .linkbox {
  z-index: 9;
  display: block;
  position: absolute;
  top: 2.5ex; left: -7px;
  padding-top: 1.5ex;
}
.linkbox { width: max-content; }
.linkbox a { display: block; padding: .75ex .8em; }
.linkbox a:first-child {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  padding-top: 1.5ex;
}
.linkbox a:last-child {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  padding-bottom: 1.5ex;
}

/* pages */
article+article { margin-top: 3em; }
article .meta {
  padding-left: 1em;
  font-size: .8em;
  font-style: italic;
  margin-top: -1.3em;
  margin-bottom: 1.7em;
}

.two-column { columns: 2; }
.two-column > p:first-child { margin-top: 0; }
figure { text-align: center; margin-top: 2em; margin-bottom: 2em; }
figcaption { font-style: italic; }
figure img { max-width: 100%; min-height: 100px; }

.yt-vid { position: relative; min-height: 120px; }
.yt-vid .btn-play { position: absolute; width: 0; height: 0; top: 50%; left: 50%; }
.yt-vid span { font-size: 0.8em; position: absolute; right: .7em; bottom: .5em; }
.yt-vid svg { position: relative; width: 86px; height: 60px; top: -30px; left: -43px; }
.yt-vid img { width: 100%; }

.img-grid-block div {
  display: inline-block;
  width: 171.5px;
  height: 100px;
  background: #FFF;
  vertical-align: top;
  padding: 10px;
  margin: 8px;
  border-radius: 5px;
}
.img-grid-block img { object-fit: scale-down; width: 100%; height: 100%; }
.img-grid-block div:hover { transform: scale(1.1); }

/* DIY image grid */
.diy-grid { margin: 0 -9px 3em; }
.diy-grid div { display: inline-block; width: 200px; margin: 6px 6px 12px; vertical-align: top; }
.diy-grid time { display: none; }
.diy-grid img { border-radius: 5px; height: 200px; width: 100%; background: #EEE; }
.diy-grid a:hover img { transform: scale(1.05); }
.diy-grid p { margin: 0 6px; font-size: 0.85em; hyphens: auto; }

.window-grid-block {
  display: flex;
  flex-flow: row wrap;
}
.winbox {
  border: 1pt solid #F39;
  border-radius: 5px;
  flex: 1 0.5 13em;
  margin: 3px;
}
.winbox .title {
  background: #F39; color: #FFF;
  font-weight: bold;
  text-align: center;
  border-radius: 2px 2px 0 0;
  padding: 3px 5px 5px;
}
.winbox .content { margin: 7px; }
.winbox .content :first-child { margin-top: 0; }
.winbox .content :last-child { margin-bottom: 0; }
.winbox ul { padding: 0 .8em; }
.winbox ul li:before { content: '•'; width: .7em; margin-left: -.7em }

@media screen and (max-width:  500px) {
  body { padding: .5em .5em 2em; }
  figure { margin: 15px 5px; }
}