body, #main { font-family: "EB Garamond", serif; height: 100%; width: 100%; padding: 0; margin: 0; position:absolute; top: 0px; overflow: hidden; background-color: #CCC; overscroll-behavior: none; }
body { z-index: 10; }
#main { z-index: 20; }
header { height: 40px; background-color: #000; z-index: 10; position: absolute; top: 0; left: 0; width: 100%; transition: top 1s; box-sizing: border-box; user-select: none; }
h1 { color: #FFF; text-align: center; padding: 10px 0 0; margin: 0; vertical-align: middle; line-height: 20px; font-weight: normal; -webkit-font-smoothing: subpixel-antialiased; cursor: default; }
h1 a:link, h1 a:visited { color:#FFF; text-decoration: none; }
h2 { padding: 0; margin: 0; font-size: 1.5em; }
#controls-tab { position: absolute; width: 40px; height: 10px; background-color: #444; bottom: 40px; right: 70px; overflow: hidden; border-radius: 5px 5px 0 0; transition: bottom 1s, height 1s, opacity 1s; opacity: 0.6; z-index: 900; }
#controls-tab:hover { height: 25px; opacity: 1; }
#controls-switch { padding: 0; display: block; height: 25px; width: 40px; cursor: pointer; }
#controls-switch img { width: 30px; height: auto; padding: 5px; }
.without-controls header { top: -40px; }
.without-controls menu { bottom: -40px; }
.without-controls #controls-tab { bottom: 0; }
menu { height: 40px; background-color: #000; position: absolute; display: block; bottom: 0; margin: 0; left: 0; width: 100%; transition: bottom 1s; box-sizing: border-box; list-style-type: none; padding: 0; margin: 0; z-index: 1000; }
menu li { padding: 0; margin: 0; }
svg { background-color: #FFF; z-index: 100; opacity: 1; transition: opacity 0.5s;  overscroll-behavior: none; }
body.show-single-poem svg, body.show-guide svg, body.show-about svg, body.show-submit svg, body.show-response svg { opacity: 0.5; }
.text { font: 14px "EB Garamond"; cursor: pointer; }
.text:focus, .text:hover, .text:active { fill: #ed1c24; }
.text-inactive { pointer-events: none; }
.node { cursor: pointer; }
button img { height: 25px; width: auto; border: none; }
button::-moz-focus-inner { /* remove extra padding from Firefox */ padding: 0; border: 0; }
#about, #guide, #single-poem, #fullscreen, #listen-to-poem { cursor: pointer; position: absolute; }
#close-poem, #close-about, #close-guide, #close-submit, #close-response { cursor: pointer; position: absolute; }
#about, #guide, #single-poem { height: 25px; box-sizing: border-box; font-family: "EB Garamond", serif; text-align: center; font-size: 1.4em; line-height: 0.8em; vertical-align: top; }
#about { left: 15px; top: 5px; }
#guide { left: 80px; top: 5px; }
#single-poem { left: 142px; top: 5px; }
#fullscreen { right: 15px; top: 5px; }
#close-poem, #close-about, #close-guide, #close-submit, #close-response { right: 0px; top: 0px; }
#close-poem img, #close-about img, #close-guide img, #close-submit img, #close-response img { height: 10px; width: auto; }
button { padding: 1px; margin: 0; border: none; background-color: transparent; color: #FFF; display: block; height: 25px; min-width: 25px; text-align: center; box-sizing: content-box; }
button:focus { outline: none; }
button:hover,
button:active { outline: none; opacity:0.5; }
a:link, a:visited { color:#000; }
#poem { box-sizing: border-box; background-color: #FFF; border: 1px solid #000; position: absolute; top: 50%; transform: translateY(-50%); width:90%; max-width: 500px; padding: 10px 30px 10px 10px; left: 0; right: 0; margin-left: auto; margin-right: auto; opacity: 0; transition: opacity 0.5s; z-index: 200; display: none;  max-height: calc(100% - 100px); overflow-y: auto; scrollbar-color: #333 #DDD; scrollbar-width: thin; }
#poem::-webkit-scrollbar { width: 5px; background-color: #DDD; }
#poem::-webkit-scrollbar-thumb { background: #333; }
#instructions { box-sizing: border-box; background-color: #FFF; border: 1px solid #000; position: absolute; top: 50%; transform: translateY(-50%); width:90%; max-width: 500px; padding: 10px 30px 10px 10px; left: 0; right: 0; margin-left: auto; margin-right: auto; opacity: 0; transition: opacity 0.5s; z-index: 200; display: none;  max-height: calc(100% - 100px); overflow-y: auto; scrollbar-color: #333 #DDD; scrollbar-width: thin; }
#instructions::-webkit-scrollbar { width: 5px; background-color: #DDD; }
#instructions::-webkit-scrollbar-thumb { background: #333; }
#about-panacea { box-sizing: border-box; background-color: #FFF; border: 1px solid #000; position: absolute; top: 50%; transform: translateY(-50%); width:90%; max-width: 500px; padding: 10px 30px 10px 10px; left: 0; right: 0; margin-left: auto; margin-right: auto; opacity: 0; transition: opacity 0.5s; z-index: 200; display: none; max-height: calc(100% - 100px); overflow-y: auto; scrollbar-color: #333 #DDD; scrollbar-width: thin; }
#about-panacea::-webkit-scrollbar { width: 5px; background-color: #DDD; }
#about-panacea::-webkit-scrollbar-thumb { background: #333; }
#about-panacea .quote-stanza { font-style: italic; }
#submit-line { box-sizing: border-box; background-color: #FFF; border: 1px solid #000; position: absolute; top: 50%; transform: translateY(-50%); width:90%; max-width: 500px; padding: 10px 30px 10px 10px; left: 0; right: 0; margin-left: auto; margin-right: auto; opacity: 0; transition: opacity 0.5s; z-index: 200; display: none; max-height: calc(100% - 100px); overflow-y: auto; scrollbar-color: #333 #DDD; scrollbar-width: thin; }
#submit-line::-webkit-scrollbar { width: 5px; background-color: #DDD; }
#submit-line::-webkit-scrollbar-thumb { background: #333; }
#submit-response { box-sizing: border-box; background-color: #FFF; border: 1px solid #000; position: absolute; top: 50%; transform: translateY(-50%); width:90%; max-width: 500px; padding: 10px 30px 10px 10px; left: 0; right: 0; margin-left: auto; margin-right: auto; opacity: 0; transition: opacity 0.5s; z-index: 200; display: none; max-height: calc(100% - 100px); overflow-y: auto; scrollbar-color: #333 #DDD; scrollbar-width: thin; }
#submit-response::-webkit-scrollbar { width: 5px; background-color: #DDD; }
#submit-response::-webkit-scrollbar-thumb { background: #333; }
body.show-single-poem #poem { opacity: 1; display: block; }
body.show-guide #instructions { opacity: 1; display: block; }
body.show-about #about-panacea { opacity: 1; display: block; }
body.show-submit #submit-line { opacity: 1; display: block; }
body.show-response #submit-response { opacity: 1; display: block; }
#listen-to-poem { right: 0; top: 30px; }
#listen-to-poem img { height: 20px; width: auto; }
.poem-line, #previous-line { padding-left: 15px; text-indent: -15px; }
.highlight { color: #ed1c24; }
footer.red-room { position: absolute; width: auto; height: 100px; top: 60px; left: 10px; transition: top 2s; }
.without-controls footer.red-room { top: 20px; }
a#red-room img { border: none; height: 100%; }
a#red-room { padding: 1px; margin: 0; border: none; background-color: transparent; height: 100%; color: #FFF; display: block; text-align: left; box-sizing: content-box; }
#submit-line form button { font-family: "EB Garamond", serif; font-size: 16px; padding: 3px 8px; margin: 0; border: none; background-color: #000; color: #FFF; display: block; height: auto; min-width: auto; text-align: center; box-sizing: content-box; cursor: pointer; }
#submit-line form input { border: 1px solid #000; font-family: "EB Garamond", serif; font-size: 16px; width: 100%; }
#submit-line div { margin: 6px 0; }
#submit-line form div:first-child { margin-top: 0; }
#submit-line form div:nth-child(1) span { display: block; }
#submit-line form div:nth-child(1) span#previous-line { font-weight: 600; }
#submit-line form div:nth-child(1) input { width: 100%; }
#submit-line form div:nth-child(3) { display: grid; grid-template-columns: 20% 80%; }
#submit-line p { font-weight: bold; margin: 0; }
#moderation-list { background-color: #FFF; border: 1px solid #000; margin: 50px 10px 0 10px; padding: 20px; height: calc(100% - 100px); overflow-y: auto; scrollbar-color: #333 #DDD; scrollbar-width: thin; }
#moderation-list::-webkit-scrollbar { width: 5px; background-color: #DDD; }
#moderation-list::-webkit-scrollbar-thumb { background: #333; }
#moderation-list table { width: 100%; border: 1px solid #000; border-collapse: collapse; }
#moderation-list table tr:nth-child(even) { background-color: #DDD; }
#moderation-list table td, #moderation-list table th { border: 1px solid #000; padding: 3px; text-align: left; }
#moderation-list table tr td:first-child div:first-child::after { content: " /"; }
#moderation-list table thead tr { background-color: #CCC; color: #000; }
#moderation-list button { font-size: 1em; color: #FFF; background-color: #000; padding: 3px 5px; border-radius: 5px; font-family: "EB Garamond", serif; cursor: pointer; }
#moderation-list .approval-cell form { display: grid; grid-template-columns: 45% 45%; grid-gap: 10%; }
#moderation-list #publish-changes { text-align: right; }
#moderation-list #publish { text-align: right; padding: 0 3px; }
#moderation-list #publish button { margin: 0 0 0 auto; width: 100%; max-width: 200px; }
#moderation-list #changes { padding: 5px 3px; }
#moderation-list #changes span { color: #FFF; background-color: #000; padding: 3px 5px; }
#moderation-list #changes span.unpublished { display: inline-block; background-color: #CCC; color: #000; border: 1px solid #000; }
#login { box-sizing: border-box; background-color: #FFF; border: 1px solid #000; position: absolute; top: 50%; transform: translateY(-50%); width:90%; max-width: 500px; padding: 10px 30px 10px 10px; left: 0; right: 0; margin-left: auto; margin-right: auto; opacity: 0; transition: opacity 0.5s; z-index: 200; display: none; max-height: calc(100% - 100px); overflow-y: auto; scrollbar-color: #333 #DDD; scrollbar-width: thin; }
#login::-webkit-scrollbar { width: 5px; background-color: #DDD; }
#login::-webkit-scrollbar-thumb { background: #333; }
body.show-login #login { opacity: 1; display: block; }
body.show-login #main { opacity: 0; pointer-events: none; }
#login-form div { display: grid; grid-template-columns: 20% 80%; margin-bottom: 5px; }
#login-form button { font-family: "EB Garamond", serif; font-size: 16px; padding: 3px 8px; margin: 0; border: none; background-color: #000; color: #FFF; display: block; height: auto; min-width: auto; text-align: center; box-sizing: content-box; cursor: pointer; }
#error { height: 100%; background-color: #FFF; padding: 40px; text-align: center; font-size: 2em; overflow-y: auto; scrollbar-color: #333 #DDD; scrollbar-width: thin; }
#error::-webkit-scrollbar { width: 5px; background-color: #DDD; }
#error::-webkit-scrollbar-thumb { background: #333; }
#error img { width: 100%; margin-bottom: 60px; }
