@font-face {
	font-family: Arsenal;
	src:
		url('fonts/Arsenal-Regular.woff2') format('woff2'),
		url('fonts/Arsenal-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
	font-family: Arsenal;
	src:
		url('fonts/Arsenal-Bold.woff2') format('woff2'),
		url('fonts/Arsenal-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}
@font-face {
	font-family: Arsenal;
	src:
		url('fonts/Arsenal-Italic.woff2') format('woff2'),
		url('fonts/Arsenal-Italic.woff') format('woff');
  font-weight: bold;
  font-style: italic;
}
@font-face {
	font-family: Arsenal;
	src:
		url('fonts/Arsenal-BoldItalic.woff2') format('woff2'),
		url('fonts/Arsenal-BoldItalic.woff') format('woff');
  font-weight: bold;
  font-style: italic;
}

html, body {
  margin: 0; padding: 0;
  background: white;
  z-index: -10;
  position: relative;
}

html {
  font-size: 1.2em;
}

*, textarea, input, button {
    font-family: Arsenal;
}

h1 {
  font-size: 1.5em;
  margin: 0.2em;
}
h2 {
  font-size: 1.3em;
}

ul {
  padding-left: 0;
}
li {
  margin-left: 1em;
}

.unemphasized {
  color: #777;
}
h1.unemphasized, h2.unemphasized {
  color: #999;
}
h1.halftone, h2.halftone {
  color: #555;
}
:link, :visited, :active {
  color: #007;
}

#trident-area-solid {background: #000;}
#trident-screen {min-height: 100vh; display: flex;flex-direction: column;/*! position: relative; */}
#trident {
  margin: auto;
  display: block;
  max-width: 100%;
  height: 87vh;
}
.trident-margin {
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}
#trident-spacer {height: 150px; height: 10vh;}
#trident-spacer-bottom {height: 30px; height: 1vh;}
#trident-fadeout {
  height: 200px;
  background: linear-gradient(0deg, rgba(255,255,255,0), rgba(255,255,255,0.125), rgba(255,255,255,0.675), rgba(255,255,255,0.9), rgb(255, 255, 255)); 
  mix-blend-mode: exclusion;
  position: relative; z-index: 20;
}
/*
linear-gradient(0deg, rgba(0,0,0,0), rgba(0,0,0,0.125), rgba(0,0,0,0.675), rgba(0,0,0,1));
background: linear-gradient(180deg, white, #dfdfdf, #535353, black);  
*/

#bystanders-popup-margin {
  height: 13vh;
  position: relative;
  min-height: 8em;
}
.bystanders-popup {
  width: 40em;
  max-width: 100%;
  cursor: pointer;
  top: 0;
  left: 0;
}
.bystanders-dialog, .bystanders-dialog-left, .bystanders-dialog-right {
  background-color: #ffa000; 
}
.bystanders-dialog {
  position: absolute;
  padding: 0.7em;
  display: inline-block;
  font-size: 1.5em;
  box-sizing: border-box;
}
.bystanders-dialog-left, .bystanders-dialog-right {
  width: 1em;
  height: 100%;
  position: absolute;
  top: 0;
}
.bystanders-dialog-left {
  left: -0.5em;
  border-radius: 50%;
  z-index: -1;
}
.bystanders-dialog-right {
  right: -0.5em;
  border-radius: 50%;
  z-index: -1;
}
.bystanders-text {
  /*margin: 1em;*/
  max-width: 100%;
  /*! max-width: 100vw; */
}
.bystanders-closed {
  padding-left: 0; padding-right: 0;
  z-index: 1;
}
.bystanders-exclamation {
  opacity: 0;
  z-index: 2;
  color: red;
  font-weight: bolder;
}
.bystanders-phrase1 {
  opacity: 0;  
  z-index: 3;
}
/* .bystanders-popup-closed .bystanders-closed {opacity: 1} */
.bystanders-popup-exclamation .bystanders-closed {opacity: 0}
.bystanders-closed {
  transition: opacity 0.3s;
}
.bystanders-phrase1 {
  transition: opacity 1.5s;
}
.bystanders-text {
  transition: opacity 0.7s;
}

.bystanders-exclamation {
  transition: opacity 0.7s cubic-bezier(0.5, 2, 0.7, -1.6);
}
.bystanders-popup-exclamation .bystanders-exclamation {opacity: 1}

.bystanders-popup-phrase1 .bystanders-exclamation {
  transition: opacity 0.5s;
  opacity: 0;
}
.bystanders-popup-phrase1 .bystanders-phrase1 {opacity: 1}
.bystanders-popup-phrase1 .bystanders-exclamation .bystanders-text {opacity: 0;}

.feedback-area {max-width: 100%; width: 50em; text-align: right; margin: 5em 0;}
.feedback-area-position {max-width: 100%; width: 30em; margin: 0 0 0 auto; /*! display: inline-block; *//*! width: 100%; *//*! box-sizing: border-box; */}
.feedback-margin {margin: 1em;}
.feedback-note {box-sizing: border-box; text-align: left;}
.feedback-top-row {width: 100%; padding: 0.5em; background-color: #ddd;}
.feedback-send-row .feedback-note, .feedback-send-row .feedback-note-margin {display: inline-block;}
.feedback-send-row .feedback-note {margin: 0 1em 0.5em 1em; color: #ddd; text-align: center;}
.feedback-note-margin {/*! margin: 0.5em; */}
.feedback-input {width: 100%; display: inline-block; box-sizing: border-box; height: 6em; margin: 0; padding: 0.5em; max-height: 90vh;}
.feedback-input:focus {height: 18em;}
.feedback-margin {text-align: right;}

.chat-status-icon {position: relative; display: inline-block; vertical-align: middle; width: 16px; height: 16px; overflow: hidden; line-height: 16px;}
.chat-status-icon img {position: absolute; top: 0; left: 0;}
.chat-available .chat-status-icon {background: green;}

#page-area {min-height: 100vh;}
#page {max-width: 50em; margin: auto;}

#hand-anchor {
  position: relative;
  top: -200px;
}
#hand-clipping {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 400px;
  overflow: hidden;
}
#hand-with-drawing {
  position: absolute;
  z-index: 5;
  top: 0px;
  right: 0px;
  width: 800px;
  height: 400px;
}
/*
  max-width: 120%
*/

@media (max-width: 600px) {
  #trident-fadeout {
    height: 100px;
  }
  #hand-with-drawing {
    width: 400px;
    height: 200px;
  }
  #hand-anchor {
    top: -100px;
  }
  .bystanders-dialog {
    font-size: 1.2em;
    max-width: 100%;
  }
}

#main {
  max-width: 40em;
  margin: auto;
  position: relative;
}
/*
  z-index: 50;
*/

#main-content {
  margin: 0 1em 2em 1em;
}

.content-box {
  margin: 1em 1em 2em 1em;
  border: 1px solid black;
  padding: 1em;
}
.content-box-greyedout {
  background: #dddddd44;
  border-color: gray;
}
.content-box-normal {
  
}

#intro {text-indent: 1.5em}

#profiles-area {
  padding: 0.1em;
}
#profiles {
  margin: 4em 0 0 0;
  text-align: center;
}

#main .feedback-area-position {margin-left: auto; margin-right: auto;}