html {
  margin:0;
  color:#ccc;
  font-size:1.5em;
}

body { 
  background:black;
  padding:0;
  margin:0;
}

::selection {
  background:#444;
  color:white;
}

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

a { color:white; }
a:visited { color: gray }

#help {
  position:absolute;
  top:0;
  right:0;
  border:#aaa 1px solid;
  width:4rem;
  height:4rem;
  background:rgba(0,0,0,.5);
  font-size:2rem;
  color:white;
  font-weight:bold;
  z-index:10000;
}

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

#share {
  right:5em;
}

select {
  vertical-align:top;
  right:10rem;
  width:15rem;
  font-size:1rem;
  font-weight:normal;
  padding: .25rem;
}

@keyframes slidein {
  from {
    translate: 0 -150vw;
  }

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

  to {
    translate: 0 -150vw;
  }
}

.intro {
  width:30rem; 
  display:block; 
  left:calc(50% - 15rem); 
  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;
  padding:2rem;
  font-size:.85rem;
}

.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
  }
}
