perlin.css

.ui{
	position:absolute;
	left:2.5%;
}

.seed{
	top:35%;

}

.scale{
	top:45%;

}

.amplitude{
	top:55vh;
}

.noiseType{
	top:15%;
	box-shadow: 2px 4px 8px rgba(0, 0, 0, .5);
}

.stats{
	top: 65%;
}

.dimensions{
	top:25%;
	box-shadow: 2px 4px 8px rgba(0, 0, 0, .5);
}

.render{
	width:100%;
	height:40%;	
}


.title{
	text-align: center;
	left:38%;
	text-shadow: 2px 4px 8px rgba(0, 0, 0, .5);
}

.classy-text{
	text-shadow: 2px 4px 8px rgba(0, 0, 0, .5);
}

.input-text{
	padding-bottom: 10px;
}

.bold{
	font-weight:bold;
}

.source{
	font-size: 150px;
	left:88%;
	top:75%;
	text-align: center;
	padding-bottom: 5px; 
	border-radius: 75px;
	width:145px;
	height:145px;
	box-shadow: 2px 4px 8px rgba(0, 0, 0, .5);
}


a:link {
    color: black;
}

a:visited {
    color: black;
}

a:hover {
    box-shadow: 2px 4px 8px rgba(0, 0, 0, .5);
}

a:active {
    color: black;
}


input[type=range]{
	-webkit-appearance: none;
	background: none;
}

input[type=range]::-webkit-slider-runnable-track {
	height: 5px;
	background: #ddd;
	border: none;
	border-radius: 3px;
}

input[type=range]::-ms-track {
	height: 5px;
	background: #ddd;
	border: none;
	border-radius: 3px;
}

input[type=range]::-moz-range-track {
	height: 5px;
	background: #ddd;
	border: none;
	border-radius: 3px;
}

input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	border: none;
	height: 16px;
	width: 16px;
	border-radius: 50%;
	background: #555;
	margin-top: -5px;
	position: relative;
}

input[type=range]::-ms-thumb {
	-webkit-appearance: none;
	border: none;
	height: 16px;
	width: 16px;
	border-radius: 50%;
	background: #555;
	margin-top: -5px;
	position: relative;
}

input[type=range]::-moz-range-thumb {
	-webkit-appearance: none;
	border: none;
	height: 16px;
	width: 16px;
	border-radius: 50%;
	background: #555;
	margin-top: -5px;
	position: relative;
}

input[type=range]:focus {
	outline: none;
&::-webkit-slider-thumb:after {
	 position: absolute;
	 top: -35px;
	 left: 50%;
	 transform: translateX(-50%);
	 background: #eee;
	 border-radius: 5px;
	 color: #555;
	 padding: 5px 10px;
	 border: 2px solid #555;
 }
&::-ms-thumb:after {
	 position: absolute;
	 top: -35px;
	 left: 50%;
	 transform: translateX(-50%);
	 background: #eee;
	 border-radius: 5px;
	 color: #555;
	 padding: 5px 10px;
	 border: 2px solid #555;
 }
&::-moz-range-thumb:after {
	 position: absolute;
	 top: -35px;
	 left: 50%;
	 transform: translateX(-50%);
	 background: #eee;
	 border-radius: 5px;
	 color: #555;
	 padding: 5px 10px;
	 border: 2px solid #555;
 }
}

input[type=range]:focus::-webkit-slider-runnable-track {
	background: #ccc;
}

input[type=range]:focus::-ms-track {
	background: #ccc;
}

input[type=range]:focus::-moz-range-track {
	background: #ccc;
}


@media only screen and (max-device-width: 768px) {
	
	.title{
		font-size: 60px;
		left:10vh;	
	}
	
	.source{
		font-size: 300px;
		left:22.5vh;
		top:75vh;
		text-align: center;
		padding-bottom: 5px; 
		border-radius: 150px;
		width: 295px;
		height: 295px;
	}
	
	.scale{
		left: 13.5vh;
		top:55vh;
	}
	
	.noiseType{
		left: 29vh;
		top:56.15vh;
	}
	
	.dimensions{
		left: 42vh;
		top:56.15vh;
	}
	
	.render{
		position:absolute;
		top: 12.5vh;	
	}
	
	.stats{
		text-align:center;
		font-size: 30px;	
	}
	
}