@font-face {
  font-family: "Quicksand";
  src: url("/fonts/Quicksand-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body, button, input, textarea, select, a {
  font-family: "Quicksand", sans-serif;
  font-size: 16px;
}

html, body {
  height: 100%;
  background: #000000;
  color: #00ff00;
}

body {
  overflow: hidden;
}

p {
  line-height: 1;
  margin: 0;
}

a,
a:link,
a:visited,
a:hover,
a:active,
a:focus {
  color: #00ff00;
  text-decoration: none;
}

.poem {
  white-space: pre-wrap;
  line-height: 2;
  margin: 0;
}

.hidden {
  display: none !important;
}

/* REVERSED LETTER */
.reverse-e {
  display: inline-block;
  transform: scaleX(-1);
  vertical-align: baseline;
}

/* TOP TITLE BAR */
#topbar {
  width: 100%;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000000;
}

#mysite-trigger {
  background: transparent;
  border: none;
  color: #00ff00;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
}

/* APP */
#app {
  width: 100%;
  height: calc(100vh - 64px);
  background: #000000;
  display: grid;
}

/* STATE 1: middle only */
#app.app-start {
  grid-template-columns: 1fr;
}

/* STATE 2: middle + right */
#app.app-right-open {
  grid-template-columns: 1fr 280px;
}

/* STATE 3: left + middle + right */
#app.app-full {
  grid-template-columns: 280px 1fr 280px;
}

.panel {
  background: #000000;
  color: #00ff00;
  padding: 16px;
  overflow-y: auto;
  scrollbar-width: auto;
  scrollbar-color: #00ff00 #001100;
}

.left,
.middle,
.right {
  background: #000000;
}

/* DEFAULT: both side panels hidden */
#left-panel,
#right-panel {
  display: none;
}

/* STATE 2: show right only */
#app.app-right-open #right-panel {
  display: block;
}

/* STATE 3: show both */
#app.app-full #left-panel,
#app.app-full #right-panel {
  display: block;
}

#left-list {
  list-style: none;
}

#left-list li {
  margin-bottom: 4px;
}

button,
.left a,
.right a {
  display: block;
  width: 100%;
  background: transparent;
  color: #00ff00;
  border: none;
  outline: none;
  padding-top: 10px;
  padding-bottom: 10px;
  text-decoration: none;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  box-shadow: none;
  transition: none;
}

.right button,
.right a {
  text-align: right;
  padding-right: 4px;
  padding-left: 8px;
}

.left a {
  text-align: left;
  padding-left: 4px;
  padding-right: 8px;
}

button:hover,
button:active,
button:focus,
button.active,
.left a:hover,
.left a:active,
.left a:focus,
.left a.active,
.right a:hover,
.right a:active,
.right a:focus,
.right a.active {
  background: transparent;
  color: #00ff00;
  outline: none;
  box-shadow: none;
}

button::-moz-focus-inner {
  border: 0;
}

/* MIDDLE PANEL */
.middle {
  padding: 0;
  overflow: hidden;
}

.middle-stage {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 32px;
  overflow: hidden;
  background: #000000;
}

.middle-box {
  width: 50%;
  height: 85%;
  min-width: 320px;
  min-height: 240px;
  background: #000000;
  overflow: hidden;
  border: none;
  outline: none;
  box-shadow: none;
}

.middle-box-empty {
  background: transparent;
}

#content-frame {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 14px;
  box-sizing: border-box;
  background: #000000;
  color: #00ff00;
  scrollbar-width: auto;
  scrollbar-color: #00ff00 #001100;
}

#content-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  outline: none;
  box-shadow: none;
  background: #000000;
}

.middle-box-empty #content-frame {
  display: none;
}

/* RIGHT PANEL */
.right::-webkit-scrollbar {
  width: 12px;
}

.right::-webkit-scrollbar-track {
  background: #001100;
}

.right::-webkit-scrollbar-thumb,
.right::-webkit-scrollbar-thumb:hover,
.right::-webkit-scrollbar-thumb:active {
  background: #00ff00;
  border: 2px solid #001100;
}

.right::-webkit-scrollbar-button:single-button {
  display: block;
  height: 12px;
  background-color: #001100;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 8px 8px;
}

.right::-webkit-scrollbar-button:single-button:vertical:decrement {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><polygon points='5,2 8,6 2,6' fill='%2300ff00'/></svg>");
}

.right::-webkit-scrollbar-button:single-button:vertical:increment {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><polygon points='2,4 8,4 5,8' fill='%2300ff00'/></svg>");
}

/* LEFT PANEL */
.left {
  direction: rtl;
}

.left > * {
  direction: ltr;
}

.left::-webkit-scrollbar {
  width: 12px;
}

.left::-webkit-scrollbar-track {
  background: #001100;
}

.left::-webkit-scrollbar-thumb,
.left::-webkit-scrollbar-thumb:hover,
.left::-webkit-scrollbar-thumb:active {
  background: #00ff00;
  border: 2px solid #001100;
}

.left::-webkit-scrollbar-button:single-button {
  display: block;
  height: 12px;
  background-color: #001100;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 8px 8px;
}

.left::-webkit-scrollbar-button:single-button:vertical:decrement {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><polygon points='5,2 8,6 2,6' fill='%2300ff00'/></svg>");
}

.left::-webkit-scrollbar-button:single-button:vertical:increment {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><polygon points='2,4 8,4 5,8' fill='%2300ff00'/></svg>");
}

/* MIDDLE CONTENT FRAME */
#content-frame::-webkit-scrollbar {
  width: 12px;
}

#content-frame::-webkit-scrollbar-track {
  background: #001100;
}

#content-frame::-webkit-scrollbar-thumb,
#content-frame::-webkit-scrollbar-thumb:hover,
#content-frame::-webkit-scrollbar-thumb:active {
  background: #00ff00;
  border: 2px solid #001100;
}

#content-frame::-webkit-scrollbar-button:single-button {
  display: block;
  height: 12px;
  background-color: #001100;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 8px 8px;
}

#content-frame::-webkit-scrollbar-button:single-button:vertical:decrement {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><polygon points='5,2 8,6 2,6' fill='%2300ff00'/></svg>");
}

#content-frame::-webkit-scrollbar-button:single-button:vertical:increment {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><polygon points='2,4 8,4 5,8' fill='%2300ff00'/></svg>");
}