style.css

html, body {
	margin: 0;
	padding: 0;

	background-color: #222;
	color: #fff;
}

body {
	width: 100vw;
	height: 100vh;
}

.container {
	height:100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#overlay {
	position: absolute;
	width: 100%;
	height: 100%;
}

#sleepStart {
	width: 700px;
	font-size: 40px;
}

#sleepEnd {
	width: 400px;
	font-size: 40px;
	opacity: 0;
}

#sleepTooBad1 {
	width: 400px;
	font-size: 52px;
	font-family: "Special Elite";
}

#sleepTooBad2 {
	width: 800px;
	font-size: 52px;
	font-family: "Special Elite";
}

.active, .past {
	opacity: 1.0 !important;
	animation: 0.5s ease !important;
}

#nodStart {
	width: 500px;
	font-size: 40px;
}
#nodEnd {
	width: 800px;
	font-size: 46px;
}
#emoStart {
	width: 1300px;
	font-size: 70px;
}
#emoCounter {
	position: absolute;
	top:0;
	left:0;
}
#emoCounter::part(base) {
	width: 400px;
}
#emoCounter::part(text) {
	display: none;
}

#statsEmotionsStart {
	font-size: 32px;
	font-family: "Rock Salt";
}

#happiestEmotion {
	font-size: 32px;
	font-family: "Luckiest Guy";
	color: yellow;
}

#saddestEmotion {
	font-size: 32px;
	font-family: "Merienda";
	color: lightblue;
}

#angriestEmotion {
	font-size: 32px;
	font-family: "Creepster";
	color: red;
}

#statsTimelapse {
	font-size: 32px;
	font-family: "Rock Salt";
}

.happiness {
	font-family: "Luckiest Guy";
	color: yellow;
}

#sadness {
	font-family: "Merienda";
	color: lightblue;
}

#anger {
	font-family: "Creepster";
	color: red;
}

.webcam {
	font-family: "Creepster";
	color: greenyellow;
}

.fancyName {
	font-family: "Special Elite";
	color: mediumpurple;
}
.orienting {
	font-family: "Honk";
	color: lightskyblue;
}
.fancyDirections {
	font-family: "Single Day";
	color: darkorange;
}

#emoEnd {
	width: 400px;
	font-size: 40px;
	opacity: 0;
}
#intro {
	width: 800px;
	font-size: 3em;
}
#intro input {
	font-size: 1em;
}
#intro button {
	font-size: 1em;
}

#sleepStart {
	width: 800px;
	font-size: 90px;
}

#consent {
	width: 40px;
	height: 40px;
}

#sleepStart2 {
	width: 700px;
	font-size: 70px;
	font-family: "Caveat";
}

#sleepStart3 {
	width: 700px;
	font-size: 70px;
	font-family: "Caveat";
}

#sleepWarning {
	width: 1000px;
	font-size: 52px;
	font-family: "Press Start 2P";
	color: red;
}

#sleepEnd {
	opacity: 0;
	width: 700px;
	font-size: 70px;
}

#statsStart {
	width: 1000px;
	font-size: 75px;
	font-family: "Rock Salt";
}
#statsEmotionsStart {
	width: 500px;
	font-size: 2em;
}

#statsEnd {
	width: 1000px;
	font-size: 90px;
	font-family: "Dokdo";
}

#timer
{
	width: 500px;
	font-size: 2em;
	color: purple;
	font-family: "Special Elite";
}

#sleepTime
{
	width: 500px;
	font-size: 2em;
	color: green;
	font-family: "Dokdo";
}

.jelly {
	animation: jelly 0.5s;
}

@keyframes jelly {
	0%,
	100% {
		transform: scale(1, 1);
	}
	25% {
		transform: scale(0.9, 1.1);
	}
	50% {
		transform: scale(1.1, 0.9);
	}
	75% {
		transform: scale(0.95, 1.05);
	}
}


.frame-inner {
	border:solid 2px;
	border-bottom-color:#ffe;
	border-left-color:#eed;
	border-right-color:#eed;
	border-top-color:#ccb;
}

.frame-outer {
	background-color:#ddc;
	border:solid 5vmin #eee;
	border-bottom-color:#fff;
	border-left-color:#eee;
	border-radius:2px;
	border-right-color:#eee;
	border-top-color:#ddd;
	box-shadow:0 0 5px 0 rgba(0,0,0,.25) inset, 0 5px 10px 5px rgba(0,0,0,.25);
	box-sizing:border-box;
	display:inline-block;
	margin:10vh 10vw;
	padding:8vmin;
	position:relative;
	text-align:center;
	&:before {
		border-radius:2px;
		bottom:-2vmin;
		box-shadow:0 2px 5px 0 rgba(0,0,0,.25) inset;
		content:"";
		left:-2vmin;
		position:absolute;
		right:-2vmin;
		top:-2vmin;
	}
	&:after {
		border-radius:2px;
		bottom:-2.5vmin;
		box-shadow: 0 2px 5px 0 rgba(0,0,0,.25);
		content:"";
		left:-2.5vmin;
		position:absolute;
		right:-2.5vmin;
		top:-2.5vmin;
	}
}

.FrameDark {
	display: inline-block;
	padding: 40px;
	border-width: 20px;
	border-style: solid;
	border-color: #2F2D2D #434040 #4F4C4C #434040;
	background: #f5f5f5;
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#E5E4DF), to(#CDCDC6));
	background-image: -webkit-linear-gradient(#E5E4DF, #CDCDC6);
	background-image: -moz-linear-gradient(#E5E4DF, #CDCDC6);
	background-image: -o-linear-gradient(#E5E4DF, #CDCDC6);
	background-image: linear-gradient(#E5E4DF, #CDCDC6);
	box-shadow: inset 0 2px 5px rgba(0,0,0,.6),0 5px 2px rgba(0,0,0,.1), 0 10px 20px rgba(0,0,0,.8);
	position: relative;
	overflow: hidden;
}
.FrameDark::before {
	content: "";
	position: absolute;
	top: -175px;
	right: -20%;
	width: 400px;
	height: 400px;
	transform: rotateZ(-40deg);
	-webkit-transform: rotateZ(-40deg);
	-moz-transform: rotateZ(-40deg);
	-o-transform: rotateZ(-40deg);
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255,255,255,.4)), to(rgba(255,255,255,0)));
	background-image: -webkit-linear-gradient(rgba(255,255,255,.4), rgba(255,255,255,0));
	background-image: -moz-linear-gradient(rgba(255,255,255,.4), rgba(255,255,255,0));
	background-image: -o-linear-gradient(rgba(255,255,255,.4), rgba(255,255,255,0));
	background-image: linear-gradient(rgba(255,255,255,.4), rgba(255,255,255,0));
}
.FrameDark canvas {
	border-width: 2px;
	border-style: solid;
	border-color: #BBBAB4 #C7C7BF #E5E4DF #C7C7BF;
	box-shadow:  0 -1px 1px rgba(0,0,0,.1), 0 1px 1px 1px rgba(255,255,255,.7);
}

.space {
	width: 25px;
}
.bounce-box{
  display: flex; 
}
.bounce-box span{
  position: relative;
  top: 20px;
  display: inline-block;
  animation: bounce 0.3s ease infinite alternate;
}
@keyframes bounce{
  100%{
    top: -20px;
    text-shadow: 0 1px #ccc, 
                 0 2px #ccc, 
                 0 3px #ccc, 
                 0 4px #ccc, 
                 0 5px #ccc,
                 0 6px #ccc, 
                 0 7px #ccc, 
                 0 8px #ccc, 
                 0 9px #ccc, 
                 0 50px 25px rgba(0, 0, 0, 0.2);
  }
}


.leaderboardImage
{
	width: 420px;
	padding-top: 50px;
	padding-left: 0px;
	padding-right: 0px;
}