/* #31D584 */
/* #E5B413 */
/* #50A1EA */
/* #C64438 */

body, html {
  margin: 0px;
  padding: 0px;
  background-color: #232a25;
  color: #999;
  font-family: "Courier New", "Courier", "Courier 10 Pitch", monospace;
  font-size: 24px;
  font-weight: bold;
}

body, html, #app, #app > div {
  min-height: 100vh;
  overflow-x: hidden;
}

#dedication {
  text-align: center;
  margin-top: 4em;
  color: #555;
}

#loading {
  text-align: center;
  margin-top: 5em;
  margin-bottom: 5em;
  animation: blinker 1s linear infinite;
}

@keyframes blinker { 50% { opacity: 0; } }

h3 {
  font-size: 32px;
}

h2 {
  font-size 48px;
}

h1 {
  font-size: 96px;
}

* {
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: #31D584;
}

a:hover {
  color: #8FF8C4;
}

.highlight {
  color: #50A1EA
}

button {
  cursor: pointer;
  background-color: #E5B413;
  border: 0px;
  border-radius: 3px;
  width: 128px;
  font-size: 24px;
  font-family: "Courier New", "Courier", "Courier 10 Pitch", monospace;
  font-weight: bold;
  color: #232323;
  height: 48px;
}

button.warning {
  background-color: #C64438;
}

button.success {
  background-color: #31D584;
}

blockquote {
  font-style: italic;
  color: #666;
}

strong {
  color: #eee;
}

button:hover {
  background-color: #eee;
}

.light {
  color: #666;
}

input[type=file] {
  opacity: 0;
  float: right;
  position: absolute;
  max-width: 90%;
  font-size: 0.75em;
  cursor: pointer;
}

input {
  font-size: 24px;
  font-family: "Courier New", "Courier", "Courier 10 Pitch", monospace;
  font-weight: bold;
  padding: 0.25em;
  border-radius: 5px;
  border: 2px solid #E5B413;
  background: none;
  color: #999;
  max-width: 100%;
}

section#header p {
  margin-left: 1em;
}

div#logo img {
  position: absolute;
  top: 24px;
  left: 22px;
}

div#logo span {
  position: absolute;
  top: 22px;
  left: 160px;
}

section#header svg.icon {
  fill: #E5B413;
}

#burger-menu {
  position: absolute;
  top: 64px;
  right: 32px;
  border-radius: 5px;
  border: 2px solid #E5B413;
  background-color: #232a25;
  padding: 1em;
  list-style-type: none;
}

#burger-menu li + li {
  margin-top: 0.5em;
}

#burger-menu a {
  color: #E5B413;
}

#burger-menu a:hover {
  color: #eee;
}

svg#lines {
  stroke: #777;
  position: absolute;
  top: 60px;
}

nav {
  position: absolute;
  top: 1em;
  right: 1em;
}

@media (max-width: 600px) {
  nav {
    top: 3.5em;
    z-index: 100;
  }
}

.title {
  color: #eee;
}

.message-wrapper {
  width: 100%;
  position: fixed;
  top: 2em;
}

.message-wrapper .message {
  background-color: #232a25;
  border-radius: 5px;
  width: 800px;
  max-width: 100%;
  margin: auto;
  padding: 1em;
}

.message-wrapper .message svg {
  float: right;
  cursor: pointer;
}

.warning .message {
  color: #C64438;
  border: 2px solid #C64438;
}

.warning .message svg {
  fill: #C64438;
}

.success .message {
  color: #31D584;
  border: 2px solid #31D584;
}

.success .message svg {
  fill: #31D584;
}

.input-group {
  margin-top: 3em;
}

.input-group button + button {
  margin-left: 1em;
}

/*** website markdown ***/

#logo a span {
  color: #999;
}

section.website li {
  margin-bottom: 0.5em;
}

section.website code {
  font-family: "Courier New", "Courier", "Courier 10 Pitch", monospace;
  font-size: 24px;
  font-weight: bold;
  color: #eee;
}

section.website a code {
  color: #31D584;
}

section.website img {
  max-width: 100%;
  margin: auto;
  display: block;
  border: 2px solid #eee;
  border-radius: 5px;
  margin-top: 3em;
  margin-bottom: 3em;
}

section.website h3 {
  margin-top: 3em;
}

section.website blockquote {
  color: #50A1EA;
  margin: 2em;
}

section.website blockquote + p {
  margin-bottom: 4em;
}

section.website .screencast {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
}

section.website .video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#news-signup {
  display: block;
  margin-top: 7em;
  margin-bottom: 7em;
}

.tinysignup {
  text-align: center;
  margin-top: 3em;
  margin-bottom: 3em;
}

.tinysignup p {
  color: #31D584;
}

.tinysignup input {
  font-family: "Courier New", "Courier", "Courier 10 Pitch", monospace;
  font-size: 24px;
  font-weight: bold;
  border: 2px solid #555;
  height: 48px;
  border-radius: 5px;
  max-width: 90%;
  margin: 0.5em;
  padding: 0.25em;
}

.tinysignup button {
  margin-top: 1em;
}

.tinysignup .message {
  border: 2px solid #31D584;
  padding: 1em 1.5em;
  font-size: 1em;
  border-radius: 5px;
  color: #31D584;
  max-width: 800px;
  margin: auto;
  width: 90%;
}

.tinysignup .spinner {
  width: 40px;
  height: 40px;
  background-color: #31D584;
  border-radius: 5px;
  margin: 40px auto;
  animation: tinysignup-rotateplane 1.2s infinite ease-in-out;
}

@keyframes tinysignup-rotateplane {
  0% { 
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  } 50% { 
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
  } 100% { 
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}

/*** apps ***/

#search svg {
  width: 32px;
}

#search span {
  position: relative;
  top: -1.9em;
}

#search .icon-search {
  fill: #555;
  float: left;
}

#search .icon-times {
  fill: #999;
  float: right;
  cursor: pointer;
}

#search input {
  padding-left: 48px;
  width: 100%;
  margin-bottom: 0.5em;
  border: none;
  background-color: transparent;
  font-family: "Courier New", "Courier", "Courier 10 Pitch", monospace;
  font-size: 24px;
  font-weight: bold;
  color: #999;
}

#search input::placeholder{
  color: #999;
}

/* tags */

#tags {
  border-bottom: 2px solid #444;
  margin-bottom: 1em;
}

#tags ul {
  display: inline-block;
  overflow: auto;
  margin: 0px;
  padding: 0.25em;
}

#tags ul li {
  display: inline-block;
  margin-right: 1.5em;
}

#tags ul li a {
  cursor: pointer;
  color: #999;
  text-decoration: none;
}

#tags ul li a:hover {
  color: #bbb;
}

#tags ul li.active a {
  color: #eee;
}

section.screen {
  margin-left: auto;
  margin-right: auto;
  margin-top: 7em;
}

section#apps {
  width: 100%;
  max-width: 800px;
  padding: 1em;
}

section#about, section#settings, section#send {
  width: 100%;
  max-width: 800px;
  padding: 1em;
  padding-top: 0px;
}

section#send ul li.completed {
  list-style-type: "✔";
  color: #31D584;
  padding-left: 0.5em;
}

section#send blockquote {
  color: #50A1EA;
}

section#send button#copy {
  float: right;
  margin-bottom: 2em;
}

section#send #send-spinner {
  animation: blinker 1s linear infinite;
}

section#send .secret-container {
  margin-bottom: 3em;
}

section#send #qrcode {
  background-color: white;
}

section#send .qr {
  margin-top: 4em;
  text-align: center;
  margin-bottom: 1em;
}

section#send .qr button {
  max-width: 80%;
  width: 30ch;
}

section#send video {
  display: block;
  margin: auto;
  max-width: 75%;
}

section#send input#send-secret {
  font-size: 32px;
  font-family: "Courier New", "Courier", "Courier 10 Pitch", monospace;
  font-weight: bold;
  padding: 0.25em;
  border-radius: 5px;
  border: 2px solid #E5B413;
  background: none;
  color: #31D584;
  width: 100%;
}

section#settings ul {
  list-style-type: none;
  padding-left: 0px;
}

section#settings li {
  margin-bottom: 1em;
}

section#settings ul button {
  width: 20ch;
  max-width: 98%;
  margin: auto;
  display: block;
}

.input-group #signaling-servers button {
  float: right;
  width: 3ch;
  min-width: 3ch;
}

.input-group #signaling-servers li input {
  max-width: calc(100% - 4ch);
  width: 100ch;
}

.input-group #signaling-servers {
  margin-bottom: 4em;
}

/*** individual app ***/

div.app {
  border-bottom: 2px solid #444;
  padding: 1.5em 0px;
}

div.app .app-icon {
  cursor: pointer;
  float: left;
  margin-right: 1em !important;
}

div.app .app-icon img {
  width: 64px;
  height: 64px;
}

div.app button svg {
  fill: #232323;
  margin-top: 6px;
}

div.app button {
  fill: #eee;
}

div.app button + button {
  margin-left: 4px;
}

div.app .link-out svg {
  fill: #bbb;
  margin-bottom: -0.5em;
  width: 24px;
  margin-left: 0.5em;
}

div.app .app-actions-menu {
  border-radius: 5px;
  border: 2px solid #E5B413;
  width: 160px;
  text-align: center;
  background-color: #232A25;
  margin-left: 120px;
  position: absolute;
}

div.app .app-actions-menu > div {
  padding: 0px;
  margin: 0.5em 0px;
}

@media (max-width: 600px) {
  div.app .app-actions-menu {
    position: absolute;
    margin-left: 0px;
    float: left;
    transform: translateY(2em);
  }
}

#apps .columns {
  display: flex;
}

@media (max-width: 600px) {
  #apps .columns {
    flex-direction: column-reverse;
  }

  #apps .column.action-buttons {
    margin-top: 1em;
  }

  #apps .column > div {
    display: inline-block;
    margin-right: 0.25em;
  }
}

#apps .column {
  display: inline-block;
  padding: 1em;
  vertical-align: top;
  min-width: 25%;
}

@media (max-width: 600px) {
  #apps .column {
    padding: 0px;
  }
}

#apps .column > * {
  padding-top: 0px;
  margin-top: 0px;
  margin-bottom: 0.5em;
}

#apps .column > p {
  display: block;
  clear: both;
}

#apps .actions {
  text-align: right;
  margin-bottom: 0.5em;
  float: right;
  margin-top: -1em;
}

#apps a.title {
  color: #eee;
  text-decoration: none;
}

#apps p.title {
  color: #50A1EA;
}

#apps a svg {
  fill: #50A1EA;
}

#apps p {
  color: #666;
}

#apps .tags span {
  background-color: #666;
  padding: 0.125em 0.5em;
  border-radius: 5px;
  color: #232323;
}

#apps .tags span + span {
  margin-left: 0.25em;
}

/*** add button ***/

button#add-app {
  position: fixed;
  bottom: 32px;
  right: 32px;
  font-size: 32px;
  font-family: "Courier New", "Courier", "Courier 10 Pitch", monospace;
  font-weight: bold;
  border-radius: 2em;
  width: 64px;
  height: 64px;
  text-align: center;
  color: #232a25;
  border: 4px solid #232a25;
  margin: 0px;
  padding: 0px;
}

#add-app:hover {
  background-color: #eee;
}

#add-menu {
  position: fixed;
  bottom: 64px;
  right: 48px;
  border-radius: 5px;
  border: 2px solid #E5B413;
  background-color: #232a25;
  padding: 0.25em;
}

#add-menu ul {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
  padding-bottom: 24px;
}

#add-menu ul li {
  margin-left: 0px;
  display: block;
  margin: 0px 0.25em;
  background-color: #e5b413;
  padding: 0.25em 0.75em;
  border-radius: 5px;
  margin: 0.25em;
  cursor: pointer;
}

#add-menu ul li a {
  color: #232a25;
  border-radius: 5px;
}

#add-menu ul li:hover {
  background-color: #eee;
}

#add-menu label {
  color: #232a25;
}

/*** editor ***/

section#editor {
  margin-top: 0px;
  padding-top: 7em;
  height: 100vh;
}

section#editor #file-menu {
  padding: 0px;
  margin-top: -3.5em;
  margin-left: 136px;
  margin-bottom: -0.5em;
  position: relative;
}

@media (max-width: 600px) {
  section#editor #file-menu {
    margin-top: 0px;
    margin-left: 0px;
  }
}

section#editor #file-menu > li {
  margin-left: 1em;
  color: #e5b413;
}

section#editor li.topmenu {
  display: inline-block;
  vertical-align: top;
  cursor: pointer;
}

section#editor li.topmenu input, section#editor li.topmenu label {
  cursor: pointer;
}

section#editor li.topmenu.button {
  border: 2px solid #e5b413;
  padding: 0px 0.5em;
  padding-top: 0px;
  padding-top: 0.25em;
  margin-top: -0.25em;
  border-radius: 3px;
}

section#editor li.topmenu svg {
  width: 1.5ch;
  padding: 0px;
  float: left;
  fill: #e5b413;
  margin-top: -0.125em;
  margin-right: 0.25em;
}

section#editor li.topmenu > ul {
  display: none;
  z-index: 1000;
}

section#editor li.topmenu > ul li {
  margin: 0.25em 0.25em;
  padding: 0em;
}

section#editor li.topmenu.open > ul {
  display: block;
  position: absolute;
  background-color: #232a25;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  border: 2px solid #999;
  padding: 0.5em;
  list-style-type: none;
}

section#editor .topmenu ul li {
  color: #aaa;
  cursor: pointer;
}

section#editor #file-menu li a {
  color: #aaa;
}

section#editor #file-menu a svg {
  fill: #e5b413;
  margin-right: -1em;
}

section#editor .topmenu ul li a:hover {
  color: #e5b413 !important;
}

section#editor .topmenu ul li:hover {
  color: #e5b413;
}

section#editor ul#files {
  padding-bottom: 0px;
  margin-bottom: 0px;
  list-style-type: none;
  border-bottom: 2px solid #999;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-color: #666 #999;
}

section#editor ul#files.out {
  width: 60%;
}

section#editor ul#files::-webkit-scrollbar {
  width: 11px;
}

section#editor ul#files::-webkit-scrollbar-track {
  background: #999;
}

section#editor ul#files::-webkit-scrollbar-thumb {
  background-color: #666;
  border-radius: 0px;
  border: none;
}

section#editor ul#files > li {
  border: 2px solid #999;
  border-bottom: none;
  padding: 0.25em 1em;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  display: inline-block;
  margin-bottom: -2px;
  cursor: pointer;
}

section#editor ul#files > li.active {
  background-color: #232a25;
}

section#editor ul#files > li.active input {
  background: none !important;
  font-family: "Courier New", "Courier", "Courier 10 Pitch", monospace;
  font-size: 24px;
  font-weight: bold;
  color: white;
  border: none;
  padding: 0px;
  overflow: hidden;
  text-overflow: ellipsis;
}

section#editor {
  display: flex;
  flex-flow: column;
}

div#panes, div#panes > div, div#panes > div > .editor, .editor > .CodeMirror {
  flex: 1;
  display: flex;
  flex-flow: column;
  min-height: 0;
}

div.editor > div {
}

section#editor div#panes {
  width: 100%;
}

section#editor div#panes > div {
  width: 100%;
}

section#editor div#panes.out > div {
  width: 60%;
}

section#editor div#panes > iframe {
  height: 100vh;
  position: fixed;
  top: 0px;
  right: 0px;
  width: 40%;
}

section#editor .add-file-menu input {
  max-width: 3em;
  margin-left: -1em;
  cursor: pointer;
}

section#editor .add-file-menu {
  color: #e5b413;
}

section#editor .file-content {
  position: absolute;
  display: flex;
  top: 200px;
  bottom: 20px;
  text-align: center;
  justify-content: center;
  align-items: center;
  width: inherit;
}

section#editor .file-content > img {
  max-width: 100%;
  max-height: 100%;
}

section#editor .file-content > div {
}

/*** Code mirror ***/

.CodeMirror {
  background: none !important;
  font-family: "Courier New", "Courier", "Courier 10 Pitch", monospace;
  font-size: 18px;
}

.CodeMirror-gutters {
  background: rgba(255,255,255,0.1) !important;
}

.CodeMirror-dialog-top {
  background-color: #232a25;
}

input.CodeMirror-search-field {
  font-family: "Courier New", "Courier", "Courier 10 Pitch", monospace;
  font-size: 18px;
}

.color-warn {
  color: #C64438 !important;
}

/*** popout ***/

#slingcode-frame {
  background-color: white;
  border: 0px solid transparent;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
