body {
  background-color: #05050F;
}
  
h1 {
  color: whitesmoke;
}

/* The mother of all tasks: Centering a div
Taken from https://css-tricks.com/centering-css-complete-guide/ */
.center {
  margin: 0 auto;
  width: 80vw;
  background-color: #0C0A4A;
  padding: 20px;
  border-radius: 30px;
}

@media (min-width:1000px){
  .center {
    width: 60vw;
  }
}

label {
  color:whitesmoke;
}

/* Form styles shamelessly taken from https://www.w3schools.com/css/css_form.asp*/

input[type=button], input[type=reset] {
  background-color: #04AA6D;
  border: none;
  border-radius: 10px;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}

input[type=reset] {
  background-color:grey;
}

input[type=number], input[type=text], input[type=search], select, p {
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 2px solid grey;
  border-radius: 5px;
  width: 100%;
}

input[type=time]{
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 2px solid grey;
  border-radius: 5px;
  width: 49%;
}

p {
  color: whitesmoke;
}
#total_hrs {
	padding: 12px 5px;
	margin: 0px;
	background-color: lightgrey;
	box-sizing: border-box;
	border: 2px solid grey;
	border-radius: 5px;
	width: 70px;
}


/* Using pseudo class from
  https://programmersportal.com/how-to-apply-css-on-readonly-inputs/
*/
input[type='text']:read-only{
  background: lightgrey;
}

/* Tip: use width: 100% for full-width buttons */