:root { --text:rgb(44, 44, 44); --wireframe:#202020; --background:#FF6347; } *{ box-sizing: border-box; } body, html{ margin: 0; padding: 0; background-color: var(--background); font-family: Arial, Helvetica, sans-serif; font-size: 21px; line-height: 1.6; } .container { display: flex; width: 100vw; height: 100vh; margin: 0; overflow: hidden; } .container > * { flex-basis: 50%; } .atlas { display: flex; flex-direction: column; justify-content: space-between; border-right: solid 1px var(--wireframe); } .info { display: flex; justify-content: space-around; align-items: center; height: 100px; width: 100%; border-top: solid 1px var(--wireframe); } .libretto{ overflow-y: scroll; } .libretto > * { border-bottom: solid 1px var(--wireframe); } .atlas svg { width: 100%; } .moment{ text-transform: uppercase; } .cover{ display: flex; flex-direction: column; align-items: center; text-align: center; min-height: 100vh; padding: 32px; } .cover .release { font-style: italic; } .cover .title { font-size: 56px; margin: 64px 0; } .cover .description { max-width: 60ch; } dl { margin-top: 128px; } dt { margin-top: 24px; font-style: italic; } dd { max-width: 60ch; margin: 0; } .index { display: none; } #reference { display: none; } .contribution { padding: 16px; border-bottom: 1px solid currentColor; } .contribution .title { margin: 0; font-size: 36px; } .contribution .meta { font-size: 0.7em; font-weight: bold; text-transform: uppercase; } .contribution .description { font-style: italic; padding-bottom: 32px; } .contribution .content h3, .contribution .content h2 { font-size: 1rem; } .content img { width: 100%; object-fit: contain; height: auto; } @namespace svg url(http://www.w3.org/2000/svg); /* Necessary to select only SVG elements, and not also HTML's. See warning below */ svg|a:link, svg|a:visited { cursor: pointer; } svg|g { pointer-events: all; }