p {
  text-align: center;
  font-size: calc(14px + (20 - 14) * ((90vw - 150px) / (1600 - 300)));
  line-height: calc(1.3em + (1.5 - 1.2) * ((90vw - 300px)/(1600 - 300)));
}

span {
  text-align: center;
  font-size: calc(14px + (20 - 14) * ((90vw - 150px) / (1600 - 300)));
  line-height: calc(1.3em + (1.5 - 1.2) * ((90vw - 300px)/(1600 - 300)));
}

svg {
  display: block;
  margin: auto;
  transform: translate(10%,0);
}

body {
  padding:5%;
  width: 90vw;
  height: 90%;
  max-height: 100px;
}

button {
  font-size: calc(14px + (20 - 14) * ((90vw - 150px) / (1600 - 300)));
  margin-left:5px;
  margin-right:5px;
  background-image: -webkit-linear-gradient(
  #ffffff 0%, #F6F6F6   30%, 
  #F3F3F3 45%, #EDEDED  60%, 
  #eeeeee 100%);
  border:1px solid #9C9C9C;
  box-shadow: 0px 0px 1px rgba(0,0,0,0.20);
  border-radius: 3px;

}

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 5px;
}

ul, li {
  font-size: calc(12px + (16 - 14) * ((90vw - 150px) / (1600 - 300)));
}

input { 
  font-size:calc(14px + (20 - 14) * ((90vw - 150px) / (1600 - 300)));
}

p#question{
  font-weight: bold;
  font-size: calc(16px + (30 - 14) * ((90vw - 150px) / (1600 - 300)));
  width: 80vw;
}

.yes{
  padding-left: 5vw;
}

#blinkwords{
  display: table-cell;
  width: 90vw;
  height: 20vw;
  color:green;
  font-size: calc(16px + (30 - 14) * ((90vw - 150px) / (1600 - 300)));
  vertical-align: middle;
  text-align: center;
  position: relative;
}

video {
  border-style: solid;
  border-width: calc(90vw / 100);
}

video.center {
  border-style: solid;
  border-width: calc(50vw / 100);
  margin: 0 10vw;
  width: calc(70vw - (2*(90vw / 100)));
  max-height: calc(70vh - (2*(90vw / 100)));
}

.containCircles {
  position: relative;
  text-align: center;
  color: white;
  height: 20vw;
}

.circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: green;
  background-color: #bbb;
  border-radius: 50%;
  width: 15vw; 
  height: 15vw;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

.smallcircle {  
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: green;
  background-color: green;
  border: 5px solid green;
  position:absolute;
  border-radius: 50%;
  width: 10vw; 
  height: 10vw;
  box-sizing: border-box;
  box-shadow: 0 0 0 1vw #3cba3a;
  -moz-box-sizing: border-box;
  display: 'none';
}

.clickcircle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: transparent;
  height:15vw;
  width:15vw;
}

.fade-in {
  display: inline;
  animation: fadeIn ease 2s;
  -webkit-animation: fadeIn ease 2s;
  -moz-animation: fadeIn ease 2s;
  -o-animation: fadeIn ease 2s;
  -ms-animation: fadeIn ease 2s;
  font-size: calc(14px + (20 - 14) * ((90vw - 150px) / (1600 - 300)));
  line-height: calc(1.3em + (1.5 - 1.2) * ((90vw - 300px)/(1600 - 300)));
  white-space: normal;
}

.prompt {
  text-align: left;
  display: inline;
  white-space: normal;
  font-size: calc(14px + (20 - 14) * ((90vw - 150px) / (1600 - 300)));
  line-height: calc(1.3em + (1.5 - 1.2) * ((90vw - 300px)/(1600 - 300)));
}



crowd-form{
  width: 50vw;
}

svg {
  width: 80vw;
  max-height: 80vh;
}

@keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-moz-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

/*@-webkit-scrollbar {
    width: 3em;
    height: 3em;
}
@-webkit-scrollbar-button {
    background: black;
}
@-webkit-scrollbar-track-piece {
    background: black;
}
@-webkit-scrollbar-thumb {
    background: black;
}​*/

.invisible{
  width: 50%;
}


#highlight {
  font-size: calc(16px + (30 - 14) * ((90vw - 150px) / (1600 - 300)));
  font-weight: bold;
  text-align:center;
  line-height: calc(1.3em + (1.5 - 1.2) * ((90vw - 300px)/(1600 - 300)));
}

.ready {
  position : absolute;
  width: 90%;
  height: 100%;
  top: 40%;
}



.scrollDoc{
  height:50vh;
  width:70vw;
  border:5px double darkgrey;
  font-size: calc(14px + (20 - 14) * ((90vw - 150px) / (1600 - 300)));;
  overflow-y:scroll;
  overflow: -moz-scrollbars-vertical;
  background-color:#eee;
  padding:14px;
}

.scrollMom{
  display: flex; 
  justify-content: center; 
  padding-top:5px;
  padding-bottom: 5px;
  padding-left:3px;
  padding-right:3px;
}

.buttons { 
  display: flex; 
  justify-content: center; 
  padding-top:5px;
  padding-bottom: 5px;
  padding-left:5px;
  padding-right:5px;
  text-align: center;
}

.promptholder {
  justify-content: left;
  width: 90vw;
  font-size: calc(14px + (20 - 14) * ((90vw - 150px) / (1600 - 300)));
  line-height: calc(1.3em + (1.5 - 1.2) * ((90vw - 300px)/(1600 - 300)));
}

/*.bounce {
  height: 25vw;
  background-color: #ddd;
  margin: auto;
}

.bar {
  height: 25vw;
  width: 10vw;
  background-color: #4CAF50;
}*/

.white {
  fill:white;
  stroke:black;
  cursor:pointer;
}
.white:hover {
  fill:lightgrey;
}
.black {
  fill:black;
  cursor:pointer;
}
.black:hover {
  fill:grey;
}

.whiteKeys {
  fill: grey;
  pointer-events: none;
  font-size: 250%;
  font-family: monospace;
  font-weight: bold;
}

.blackKeys {
  fill: white;
  pointer-events: none;
  font-size: 200%;
  font-family: monospace;
  font-weight: bold;
}

.icMain {
  text-align: left;
  font-size: calc(12px + (16 - 14) * ((90vw - 150px) / (1600 - 300)));
}

.icHeader {
  text-align: left;
  font-size: calc(14px + (20 - 14) * ((90vw - 150px) / (1600 - 300)));
  font-weight: bold;
  font-style: italic;
}

.icSectionHeader {
  text-align: left;
  font-size: calc(12px + (24 - 14) * ((90vw - 150px) / (1600 - 300)));
  font-weight: bold;
  text-decoration: underline;
}