html {
  margin:0
}

&1b {
  color:#bbb;
}

.tr { 
  background:red !important 
}

#clicktostart {
  font-size:1.5rem;
  margin-left:2rem;
}

#help, #share, #presets {
  position:fixed;
  top:0;
  right:0;
  border:#aaa 1px solid;
  width:5rem;
  height:1.75rem;
  background:rgba(0,0,0,.5);
  font-size:1rem;
  color:white;
  font-weight:bold;
  z-index:10;
}

#share {
  right:5em;
}

button {
  background:black;
  border: 1px white solid;
  color:white;
}

#presetsdisplay button { margin-right:.5rem; }

#closepresets, #closeintro {
  position:sticky;
  top:-1px;
  right:-1px;
  width:2rem;
  height:2rem;
  float:right;
  font-size:1.5rem;
  margin-right:0 !important;
}

#closeintro { top:-2rem; right:-2rem; }

#presets { right: 10em; }

#presetsdisplay { display:none }
#presetsdisplay p {
  padding:1rem;
}
#presetsdisplay { 
  width: 35rem;
  position:fixed;
  left: calc(50% - 17.5rem);
  top:0;
  z-index:20;
  background:rgba(0,0,0,1);
  border:1px solid white;
  overflow:auto;
  margin:0;
  list-style:none;
  height:100%;
  box-sizing:border-box;
}

#presetslist { list-style:none; margin:0; padding:0 1.25rem; }

.error {
  width:calc(100% - 1em);
  margin:0; 
  padding:.5rem; 
  height:2rem; 
  position:fixed; 
  bottom:3rem; 
  left:0; 
  background:rgb(127,0,0); 
  color:white;
  z-index:1000; 
  font-family:monospace; 
  font-size:1rem;
}

a img {
  filter: invert(100%);
  width:3rem;
  height:3rem;
}

a { color:white; }

a:visited { color: gray }

select {
  position:fixed;
  vertical-align:top;
  top:0;
  right:15rem;
  width:15rem;
  z-index:1;
  background:black;
  color:white;
  border: 1px solid #aaa;
  font-size:1rem;
  padding: .25rem;
}

header{
  position:absolute;
  top:0;
  right:0;
}

body {
  margin:0;
  padding:0;
  background:black;
  color:white;
  font-family:sans-serif;
}

canvas {
  width:100%;
  height:100%;
  position:fixed;
  top:0; left:0;
}

.cm-editor {
  position:absolute !important;
  background-color:black;
  top:0;
}

.cm-line {
  display:inline-block;
  background-color:rgba(0,0,0,.65);
  width:fit-content;
}

.cm-gutters {
  background-color:rgba(0,0,0,.5) !important;
}

.cm-activeLine {
  background-color:rgba(0,0,0,.85) !important;
}

.cm-focused { outline:none !important }
@keyframes slidein {
  from {
    translate: 0 -150vw;
  }

  to {
    translate: 0 0;
  }
}
@keyframes slideout {
  from {
    translate: 0 0;
  }

  to {
    translate: 0 -150vw;
  }
}
.intro {
  width:50rem; 
  display:block; 
  left:calc(50% - 25rem); 
  top:0; 
  z-index:100; 
  background:rgba(0,0,0,.85); 
  color:white; 
  position:absolute; 
  font-size:1.25rem; 
  font-family:sans-serif; 
  box-sizing:border-box; 
  border:3px solid white; 
  border-top-width:0px;
}
#introcopy { padding:2rem }
.enter {
  animation: 1s slidein;
}
.exit {
  animation: 1s slideout;
}
.next {
  box-sizing: border-box;
  position:absolute; 
  top:0; right:4rem; 
  background:rgba(0,0,0,.75); 
  color:white; 
  font-size:2rem; 
  min-height:4rem; 
  border:1px solid white;
}


.intro pre { display:inline; }


@media( max-width:767px ) {
  .intro{ 
    left:0;
    max-width:50rem;
    width:100%;
  }
}

@media( max-width:50rem ) {
  .intro {
    font-size:1.75rem !important
  }
}