@import url('https://fonts.googleapis.com/css?family=Raleway');

html {
	font-family: 'Raleway';
	/*background-color: #15171B;*/
}

body {
	margin: 0;
}
canvas, img {
    image-rendering: optimizeSpeed;
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
    image-rendering: pixelated;
    -ms-interpolation-mode: nearest-neighbor;
}

#DAText {
	font-weight: 100;
	color: white;
	font-size: 500%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);	
}

#imagecode {
    width: 35%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

header {
	height: 7vh;
	width: 100%;
	position: absolute;
	top: 0;
	background-color: rgba(255,255,255,0.05);
}

#title {
	margin: 0;
	padding-left: 2%;
	padding-right: 2%;
	font-family: "Raleway";
	line-height: 5vh;
	color: white;
	font-weight: 100;
	display:inline-block;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	float: left;
}

#urlInput {
	padding: 2%;
	height: 100%;
	width: 30%;
	background-color: rgba(255,255,255,0.05);
	border: 0;
	border-radius: 3px;
	display: inline-block;
	position: relative;
	top: 50%;
	font-family: "Raleway";
	transform: translateY(-50%);
	outline: none;
	color: white;
	font-size: 110%;
	float: left;
}

.fa-search, .fa-cog, .fa-bars {
	color: white;
	float: left;
	font-size: 140%;
	display: inline-block;
	height: 7vh;
    width: 7vh;
    line-height: 7vh !important;
    text-align: center;
    cursor: pointer;
    background-color: rgba(255,255,255,0);
    transition: background-color 0.2s ease;
}

.fa-search:hover, .fa-cog:hover, .fa-bars:hover {
	background-color: rgba(255,255,255,0.1);
}

.fa-bars {
	float: right;
}

#settings {
	position: absolute;
	background-color: rgba(255,255,255,0.5);
}

.dropdown {
	position: relative;
	display: inline-block;
}

.dropdown h1 {
	width: 100%;
	font-size: 80%;
	text-align: center;
	line-height: none;
	padding: 0;
	font-family: "Raleway";
	font-weight: 100;
    font-size: 120%;
    color: white;
}

#speedContainer div {
	width: 80%;
	margin: auto;
}

.dropdown input {
	width: 100%;
	cursor: pointer;
	-webkit-appearance: none;
	background-color: rgba(255,255,255, 0.1);
	transition: background-color 0.2s ease;
	outline: none;
}

.dropdown input:hover {
	background-color: rgba(255,255,255, 0.12);
}

.dropdown input::-webkit-slider-thumb {
	background: rgba(255,255,255,0.2);
	-webkit-appearance: none;
	height: 30%;
  	width: 10%;
}

#speedContainer {
	display: none;
	position: absolute;
	top: 100%;
    background-color: rgba(255,255,255,0.1);
    width: 300%;
    height: 150%;
}

#modeContainer {
	display: none;
	position: absolute;
	top: 100%;
	background-color: rgba(255,255,255,0.1);
	right: 0;
	width: 350%;
}

#modeContainer p {
	cursor: pointer;
	margin: 0;
	padding: 10% 0 10% 0;
	color: white;
	font-weight: 100;
	text-align: center;
	background-color:rgba(0,0,0,0);
	transition: background-color 0.2s ease;
}

#modeContainer p:hover {
	background-color: rgba(0,0,0,0.1);
}

.show {
	display: block !important;
}