body {
   font-family: Arial, sans-serif;
}

div#header {
	text-align: center;
	margin: auto;
	position: relative;
	width: 75%;
}

h1 {
	background: #0000dd;
	font-size:3em;
	text-align: center;
	padding: 10px;
	border: 5px solid #222;
	border-radius: 30px;
}

div#timer {
   font-family: "Inconsolata", monospace;
   display: flex;
   justify-content: center; /* align horizontal */
   align-items: center; /* align vertical */
   background: -webkit-linear-gradient(bottom, #101010, #303030 175px);
   background: -moz-linear-gradient(bottom, #101010, #303030 175px);
   background: linear-gradient(bottom, #101010, #303030 175px);
   margin: auto;
   position: relative;
   width: 75%;
   min-height: 380px;
   font-size: 20em;
   color: #00dd00;
   text-align: center;
   text-decoration: none;
   border-radius: 30px;
   padding: 10px;
   border: 10px solid #222;
   border: inset 5px solid #ddd;
}

div#buttons {
	margin: auto;
	position: relative;
	width: 75%;
	padding: 30px;
	text-align: center;
}

button {
	font-family: Arial, sans-serif;
	font-size: 5em;
	border-radius: 30px;
	border: 5px solid #222;
	padding: 50px;
	color: #000;
	min-width: 300px;
}

button#toggle {
	background: #00dd00;
}

button#toggle:hover {
	background: #00ff00;
}

span#spacer {
	min-width: 100px;
}

button#reset {
	background: #dd0000;
}

button#reset:hover {
	background: #ff0000;
}

@media screen and (max-width: 1000px) {
    h1 {
        font-size: 10vw;
        padding: 1vw;
    }
}

@media screen and (max-width: 1600px) {

    div#timer {
        font-size: 20vw;
        min-height: 30%;
        width: 90%;
    }
    div#buttons {
        width: 90%;
        padding: 1vw;
    }
    button {
        font-size: 7vw;
        min-height: 10%;
        min-width: 30%;
        padding: 5vw;
    }
}