body{
  /*background-color: black;*/
  background-color: #a8e1ff;
  /*background-image: url('https://cdn.vox-cdn.com/thumbor/yeki5aYDqyCPxdg1rrypBknrnLw=/0x0:1004x753/1220x813/filters:focal(422x296:582x456):format(webp)/cdn.vox-cdn.com/uploads/chorus_image/image/63710251/20150428-cloud-computing.0.1489222360.0.jpg');*/
  /*background-image: url('CartoonClouds_2048x2048.png');*/
  background-size: 100%;
  background-repeat: no-repeat;
}

::backdrop
{
  background-color: #a8e1ff;
  /*background-image: url('https://cdn.vox-cdn.com/thumbor/yeki5aYDqyCPxdg1rrypBknrnLw=/0x0:1004x753/1220x813/filters:focal(422x296:582x456):format(webp)/cdn.vox-cdn.com/uploads/chorus_image/image/63710251/20150428-cloud-computing.0.1489222360.0.jpg');*/
  /*background-image: url('CartoonClouds_2048x2048.png');*/
  background-size: 100%;
  background-repeat: no-repeat;
}

.display-element {
  font-family: 'Open Sans', 'Arial', sans-serif;
  font-size: 18px;
  color: black;
  line-height: 1.6em;
  margin: auto;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.button {
  display: inline-block;
  padding: 4px 9px;
  margin: 30px;
  font-size: 16px;
  font-weight: 400;
  font-family: 'Open Sans', 'Arial', sans-serif;
  cursor: pointer;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
  color: #333;
  background-color: #fff;
  border-color: #ccc;
  min-width: 100px;
  transition-duration: 0.25s;
}

.button:hover {
  background-color: #ddd;
  border-color: #aaa;
}

.button:disabled {
  background-color: #eee;
  color: #aaa;
  border-color: #ccc;
  /*cursor: not-allowed;*/
}

.big-button {
  display: inline-block;
  padding: 4px 9px;
  margin: 30px;
  font-size: 40px;
  font-weight: 400;
  font-family: 'Open Sans', 'Arial', sans-serif;
  cursor: pointer;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
  color: #FFF;
  background-color: #228B22;
  border-color: #AFE1AF;
  min-width: 100px;
  transition-duration: 0.25s;
}

.big-button:hover {
  background-color: #AFE1AF;
  border-color: #aaa;
}

.big-button:disabled {
  background-color: #eee;
  color: #aaa;
  border-color: #ccc;
  /*cursor: not-allowed;*/
}

input[type="checkbox"] {
  margin-right: 10px;
}

input[type="text"] {
  font-family: 'Open Sans', 'Arial', sans-serif;
  font-size: 16px;
  width: 200px;
}

input[type="number"] {
  font-family: 'Open Sans', 'Arial', sans-serif;
  font-size: 16px;
  width: 100px;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  opacity: 1;
  /* makes up/down arrows always visible */
}

select {
  font-family: 'Open Sans', 'Arial', sans-serif;
  font-size: 16px;
  width: 200px;
}

input[type="radio"] {
  margin-left: 20px;
}

.landingPage_display-element {
  font-family: 'Open Sans', 'Arial', sans-serif;
  font-size: 18px;
  color: black;
  line-height: 1.3em;
  text-align: center;
  position: relative;
  top: 0%;
  left: 0%;
  max-width: 960px;
  margin: auto;
  border: 10px solid black;
  padding: 20px;
}

#landingPage-content {
  display: block;
  width: 1000px;
  height: 780px;
}

.landingPage-header {
  text-align: center;
  margin: 0 20px;
  line-height: 1.5;
  font-size: 18pt;
}

.landingPage-body {
  text-align: center;
  font-size: 14pt;
  column-count: 2;
  column-gap: 40px;
  column-rule-style: solid;
  column-rule-width: 1px;
}

#flyer-content {
  display: none;
  width: 1000px;
  height: 700px;
}

img {
  //border: 1px solid #ddd;
  //border-radius: 4px;
  padding: 5px;
  height: 100px;
}

h3 {
display: block;
font-size: 1.17em;
margin-top: 0em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}

h4 {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}	

h5 {
display: block;
margin-top: 0em;
margin-bottom: 0em;
margin-left: 0;
margin-right: 0;
font-weight: normal;
font-style: italic;
}

h6 {
display: block;
margin-top: 1em;
margin-bottom: 0em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}

#homepage-content {
  display: none;
  width: 800px
}

#connection-content {
  display: none;
  width: 800px;
}

#chrome-required-content {
  display: none;
  width: 800px;
}

#desktop-required-content {
  display: none;
  width: 800px;
}

#survey-content {
  display: none;
  width: 800px
}

.survey-q {
  margin-bottom: 0;
}

#fullscreen-content {
  display: none;
  width: 800px
}

#pointerlock-content {
  display: none;
  width: 800px;
  font-size: 20pt;
}

#block1_instructions-content {
  display: none;
  width: 800px;
  height: 500px;
  background-color: #e6cfad
}

.block1_instructions-header {
  text-align: center;
  margin: 0 20px;
  line-height: 1.5;
  font-size: 18pt;
}

.block1_instructions-body {
  text-align: center;
  font-size: 14pt;
}

#block2_instructions-content {
  display: none;
  width: 800px;
  height: 500px;
  background-color: #e6cfad
}

.block2_instructions-header {
  text-align: center;
  margin: 0 20px;
  line-height: 1.5;
  font-size: 18pt;
}

.block2_instructions-body {
  text-align: center;
  font-size: 14pt;
}

#block5_instructions-content {
  display: none;
  width: 800px;
  height: 500px;
  background-color: #e6cfad
}

.block5_instructions-header {
  text-align: center;
  margin: 0 20px;
  line-height: 1.5;
  font-size: 18pt;
}

.block5_instructions-body {
  text-align: center;
  font-size: 14pt;
}

#trial-content {
  display: none;
  position: relative;
}

canvas {
  position: absolute;
  transform: translateX(-50%) translateY(-50%);
}

#end-content {
  display: none;
  width: 800px
}

#endEarly-content {
  display: none;
  width: 800px
}

#crash-content {
  display: none;
  width: 800px
}

#crashDataLoaded-content {
  display: none;
  width: 800px
}

#crashDataNotLoaded-content {
  display: none;
  width: 800px
}

#screenOrientation-content {
  display: none;
  width: 800px
}

#screenOrientationChange-content {
  display: none;
  width: 800px
}

#phoneDetected-content {
  display: none;
  width: 800px
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}