@font-face {
font-family: 'Tom\'s Handwriting';
src: local('Tom\'s Handwriting'), local('Tom\'s-Handwriting'),
url('../res/thw.woff2') format('woff2'),
url('../res/thw.woff') format('woff'),
url('../res/thw.ttf') format('truetype');
font-display: swap;
}
@font-face {
font-family: 'Dream Orphanage Rg';
src: local('DreamOrphanageRg-Regular'),
url('../res/do.woff2') format('woff2'),
url('../res/do.woff') format('woff'),
url('../res/do.ttf') format('truetype');
font-display: swap;
}
html {
margin-top: -8px;
margin-left: -8px
}
.inverted {
filter: invert(1)
}
canvas {
position: fixed;
width: 100%;
height: 100%;
z-index: -100;
}
body {
  font-family: 'Tom\'s Handwriting';
  font-size: 2em;
  font-weight: bold;
  color: black;
text-shadow:
  0 0 2px white,
  0 0 4px white,
  1px 0 2px white,
  -1px 0 2px white,
  0 1px 2px white,
  0 -1px 2px white,
  0 0 8px white,
  0 0 12px white,
  0 0 20px white,
  0 0 30px white;
}
ul {
padding-left: 10vw;
padding-right: 10vw;
text-align: left;
}
.pane {
width: 100%;
height: 100%;
position: fixed;
text-align: center;
transition: 3s;
}
.pane.hidden {
opacity: 0;
pointer-events: none;
}
.button {
width: 60vw;
background-color: rgba(255,255,255,0.2);
border: 1px solid #111;
margin-left: 20vw;
font-family: 'Dream Orphanage Rg';
font-size: 3em;
cursor: pointer;
transition: 0.5s;
}
.button:hover {
background-color: #EEE;
color: #000;
}
#loadingpane {
background-color: #FFF;
}
#email, #invite {
width: 60vw;
background-color: #000;
border: 1px solid #FFF;
box-shadow: 10px 10px #666, 0px 0px 50px #EEE;
font-family: 'Tom\'s Handwriting';
font-weight: 100;
font-size: 2em;
color: #FFF;
text-align: center;
cursor: crosshair;
transition: 0.5s;
}
#captive {
display: inline-block;
/*! background-color: #EEE;
*/
padding: 12px;
width: 60vw;
border-radius: 6px;
}
#captive .button {
background-color: white;
margin-left: 0;
}
#captive .button:hover {
background-color: #FFF;
border: 2px solid #EEE;
box-shadow: 0px 0px #FFF, 10px 10px 50px #FFF, 10px 10px 50px #FFF, 10px 10px 50px #FFF;
color: #AAA;
transition: 2s;
}
#buttonshade {
background-color: white !important;
/*! border: 1px solid brown !important;
*/
box-shadow: 0px 0px 16px #000 !important;
padding: 6px;
position: relative;
left: -6px;
top: calc(-2em + 18px);
margin-bottom: -1.5em;
transition: 2s;
}
#buttonshade:hover {
opacity: 0.9;
color: chartreuse;
}
#buttonshade.dropped {
opacity: 0;
top: -2.5em;
}