@font-face {
	font-family: "Bebas Neue";
	src:url("BebasNeue.ttf") format("truetype");
}
body{
	text-align:center;
	color:#808080;
	background-color:black;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	letter-spacing:0.2em;
	font-size:5vw;
	margin:0;
	font-family: "Bebas Neue";
	/*height:100vh;*/
	width:100vw;
	overflow-x: hidden;
}

#day{
	font-size:8vw;
	float:left;
	color:white;
	padding:4vw;
	padding-left:6vw;
}

#time{
	font-size:8vw;
	float:right;
	color:white;
	padding:4vw;
	padding-right:0;
}

#ampm{
	float:right;
	color:white;
	padding:4vw;
	padding-left:0.5vw;
	padding-top:6.5vw;
	padding-right:6vw;
	width:7vw;
	text-align:right;
}

#smell{
	padding-left:7vw;
}
#smell > div{
	width:28vw;
	float:left;
	padding:2vw;
	margin-left:-2vw;
	margin-top:-2vw;
	margin-bottom:-3vw;
}

#burning{
	padding-left:22vw;
}
#burning > div{
	width:28vw;
	float:left;
	padding:2vw;
	margin-left:-2vw;
	margin-top:-8vw;
	margin-bottom:-3vw;
}

#duration{
	padding-left:7vw;
	color:#484848;
	font-size:10vw;
}
#duration > div{
	width:28vw;
	float:left;
	padding:2vw;
	margin-left:-2vw;
	margin-top:-2vw;
	margin-bottom:-3vw;
	line-height:24vw;
}

#gas{
	padding-left:7vw;
}
#gas > div{
	width:28vw;
	float:left;
	padding:2vw;
	margin-left:-2vw;
	margin-top:-8vw;
	margin-bottom:-3vw;
}

#volume{
	padding-left:7vw;
}
#volume > div{
	width:28vw;
	float:left;
	padding:2vw;
	margin-left:-2vw;
	margin-top:-8vw;
	margin-bottom:-3vw;
}

#bristolscale{
	padding-top:7vw;
}
#bristolscale > div{
	width:70vw;
	margin-left:15vw;
	margin-top:-7vw;
	position:relative;
}
#bristol1{
	z-index:8;
}
#bristol2{
	z-index:7;
}
#bristol3{
	z-index:6;
}
#bristol4{
	z-index:5;
}
#bristol5{
	z-index:4;
}
#bristol6{
	z-index:3;
}
#bristol7{
	z-index:2;
}


#submit{
	color:white;
	font-size:8vw;
	padding:2vw;
}

.divider{
	width:90vw;
	height:1px;
	background-color:#808080;
	margin-left:5vw;
	margin-top:6vw;
	margin-bottom:2vw;
}

#colorswatch{
	padding-left:4vw;
}

#colorswatch > div{
	background-color:black;
	border-radius:2.5vw;
	height:20vw;
	width:20vw;
	margin-left:2vw;
	margin-top:2vw;
	float:left;
}

#colorswatch > div > div{
	border-radius:2vw;
	height:19vw;
	width:19vw;
	margin-left:0.5vw;
	margin-top:0.5vw;
}
#colorswatch > div > div > div{
	border-radius:2vw;
	height:18.5vw;
	width:18.5vw;
	position:relative;
	top:0.5vw;
	left:0.5vw;
}

#notes{
	width:80vw;
	font-size:4vw;
	margin-top:1vw;
	background-color:black;
	color:white;
	border-radius:2vw;
	padding:1vw;
	border:1px solid #808080;
}


#color1 > div{
	background-color:#32220b;
}
#color1 > div > div{
	background-color:#513712;
}

#color2 > div{
	background-color:#4c4322;
}
#color2 > div > div{
	background-color:#7c6d38;
}

#color3 > div{
	background-color:#7d7969;
}
#color3 > div > div{
	background-color:#cbc4ab;
}

#color4 > div{
	background-color:#533113;
}
#color4 > div > div{
	background-color:#87501f;
}

#color5 > div{
	background-color:#1c1407;
}
#color5 > div > div{
	background-color:#2d210b;
}

#color6 > div{
	background-color:#0f0a00;
}
#color6 > div > div{
	background-color:#181000;
}

#color7 > div{
	background-color:#191e0a;
}
#color7 > div > div{
	background-color:#293111;
}

#color8 > div{
	background-color:#2c3416;
}
#color8 > div > div{
	background-color:#485523;
}