body {
	padding: 10px;
	height: 100%;
    background-color: #333;
    font-family: 'Roboto', sans-serif;
    color: #fff;
    background-color: black !important;
}


h1 {
    border-color: #007bff !important;
}
label {

	font-size: 25px;
}

form {
	padding: 10px;
	margin: 0px auto;
	width: 350px;
	border-radius: 10px;
	z-index: 2;
	position: relative;
}

h1 {
	font-size: 45px;
	text-align: center;
	padding-bottom: 20px;
	margin-bottom: 20px;
	border-bottom: 1px solid rgba(20, 20, 20, .4);
	color: #795548;
	text-shadow: 0px 1px 0px rgba(255, 255, 255, .5);
}

input[type=number] {
	background-color: #007bff;
	border-color: #ffffff;
  color:#000;
}

input[type=number]:focus {
	background-color: #333;
	color: #FAFAFA;
	border-color: black;
}

@media screen and (max-width: 768px) {
	body{
		padding: initial;
		background-image: initial;		
		background-color: #000;
        text-color:#fff;
	}
	form{
		padding: 5vw 10vw;
		width: 100%;
		border-radius: initial;
	}
	h1{
		padding-bottom: 1vh;
	}
	h1, .form-group, label{
		margin-bottom: 1vh;
	}
}