body { margin: 0; background: var(--bg); color: var(--fg); font-family: "Noto Sans", "Lucida Grande", "Segoe UI", "DejaVu Sans", "Lucida Sans Unicode", Helvetica, Arial, sans-serif; line-height: normal; } *, *::after, *::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } *:focus { outline: none; } a { color: var(--blue) } iframe { max-width: 100%; } .player { max-width: 100%; } video, .poster { border-bottom: 1px solid yellow; } .content { display: flex; flex-direction: column; min-height: 100vh; max-width: 1000px; margin: auto; padding-top: 16px; } .item-title { color: var(--title); text-decoration: underline; padding-bottom: 0; font-size: 16px; text-wrap: balance; } .title { padding-bottom: 0; margin-bottom: 4px; font-size: 18px; font-weight: bold; border-bottom: 1px solid pink; text-wrap: balance; } .byline { padding: 0; padding-bottom: 16px; } .player { text-align: center; padding-top: 0px; padding-bottom: 0px; } @media(max-width:768px) { .item-title, .title, .byline { padding-left: 4px; padding-right: 4px; } .player { position: sticky; top: 0px; } } .player video { z-index: 0; } .value { padding: 4px; padding-top: 16px; padding-left: 0; padding-right: 0; flex: 1; } @media(max-width:768px) { .value { padding-left: 4px; padding-right: 4px; } } .more { padding-top: 16px; padding-bottom: 16px; text-align: center; font-size: 14px; } .more a { color: rgb(144, 144, 144); } .layer.active { padding-top: 8px; } .layer.active:first-child { padding-top: 0px; } .layer h3 { font-weight: bold; padding: 4px; padding-left: 0; margin: 0; //display: none; } .layer.active h3 { display: block; } .annotation { padding: 4px; border-bottom: 1px solid blueviolet; display: none; } .annotation.active { display: block; } .annotation.active.place, .annotation.active.string { display: inline-block; border: 1px solid blueviolet; margin-bottom: 4px; } @media(max-width:768px) { .annotation a img { width: 100%; } } .layer h3 { cursor: pointer; } .layer .icon svg { width: 12px; height: 12px; } .layer.collapsed .annotation.active { display: none; } .rotate { transform: rotate(90deg) translateY(-100%); transform-origin:bottom left; } .document.text { line-height: 1.5; letter-spacing: 0.1px; word-wrap: break-word; hyphens: auto; } .document.text p { padding-bottom: 1em; } .document.text img { max-width: 100vw; margin-left: -4px; margin-right: -4px; } figure { text-align: center; } figure img { max-width: 100vw; margin-left: -4px; margin-right: -4px; } @media(max-width:768px) { .document.text { padding-left: 4px; padding-right: 4px; } } ol li { margin-left: 1em; } .blocked svg { width: 64px; height: 64px; }