/* Variabes */

/* Media stuff */

:root {
	--main-bg-color: #181a1b;
	--main-txt-color: #a69e92;
	--main-hilight-color: #dcd9d4;
}
@media (prefers-color-scheme: light) {
	:root {
		--main-bg-color: #ffffff;
		--main-txt-color: #696969;
		--main-hilight-color: #131313;
	}
}
/* Mixin's */
 body {
	 background: var(--main-bg-color);
	 font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	 height: 100%;
}
 /* .wrapper {
	 width: 800px;
	 margin: 30px auto;
	 color: #fff;
	 text-align: center;
     button
     	 margin: 10px;
} */
/* .Grid {
	display: flex;
	justify-content: center;
  }
*/
  .Grid-cell {
	flex: 1;
  }

.form {
	display: flex;
	max-width: 500px;
	margin-left: auto;
	margin-right: auto;
	align-items: center;
  	justify-content: center;
}
/* .form-control {
	padding: 20px 25px;
} */
.wrapper {
    color: #a69e92;
    text-align: center;
}
.settings {
	display: none;
}
/* .form-center {
	display:flex;
	justify-content:center;
} */

label {
	display: flex
}
 h1, h2 {
	 font-family: 'Roboto', sans-serif;
	 font-weight: 100;
	 font-size: 2.6em;
	 /*text-transform: uppercase; */
}

h3 {
	font-family: 'Roboto', sans-serif;
	font-weight: 100;
	font-size: 2em;

}

 #seconds, #tens,  #alt{
	 font-size: 3em;
	 color: var(--main-hilight-color)
}
 button {
	 -moz-border-radius: 5px;
	 -webkit-border-radius: 5px;
	 border-radius: 5px;
	 -khtml-border-radius: 5px;
	 background: var(--main-bg-color);
	 color: var(--main-txt-color);
	 border: solid 1px var(--main-txt-color);
	 text-decoration: none;
	 cursor: pointer;
	 font-size: 1.2em;
	 padding: 18px 10px;
	 width: 360px;
     margin-top: 10px;
     margin-bottom: 10px;
	 outline: none;
}
a:link, a:visited {
    color: var(--main-txt-color);
}