@font-face {
  font-family: Louis;
  src: url(../../../fonts/louis_george_caf/Louis\ George\ Cafe.ttf);
}

/*BODY*/
body {
  text-align: center;
  color: #71461c;
  font-family: Louis !important;
  background-color: #eddcd2;
  /*background-color: #fff1e6;*/
}

main {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

div {
  margin-top: 20px;
  margin-bottom: 20px;
}

/*COLOR SCHEME*/
#color1,
#color2,
#color3,
#color4,
#color5,
#color6,
#color7,
#color8 {
  height: 75px;
  width: 75px;
  border-radius: 50%;
  display: inline-block;
  transition: 0.3s;
}

#color1:hover,
#color2:hover,
#color3:hover,
#color4:hover,
#color5:hover,
#color6:hover,
#color7:hover,
#color8:hover {
  border-radius: 25%;
}

#color1 {
  background-color: #71461c;
}

#color2 {
  background-color: #ddbea9;
}

#color3 {
  background-color: #817a5e;
}

#color4 {
  background-color: #b1b290;
}

#color5 {
  background-color: #983e36;
}

#color6 {
  background-color: #e27979;
}

#color7 {
  background-color: #6780ce;
}

#color8 {
  background-color: #c1caf0;
}

/*BUTTONS*/
#clock {
  text-decoration: none;
  font-size: 12pt;
  color: #71461c;
  font-family: Louis !important;
  padding: 15px 20px 15px 20px;
  border-radius: 30px;
  border: #71461c solid 2px;
  background-color: #ddbea9;
  transition: 0.3s;
}

#clock:hover {
  color: #fff1e6;
  border: #71461c solid 2px;
  background-color: #71461c;
}

#start {
  text-decoration: none;
  font-size: 12pt;
  color: #817a5e;
  font-family: Louis !important;
  padding: 10px 20px 10px 20px;
  border-radius: 30px;
  border: #817a5e solid 2px;
  background-color: #b1b290;
  transition: 0.3s;
}

#start:hover {
  color: #fff1e6;
  border: #817a5e solid 2px;
  background-color: #817a5e;
}

#stop {
  text-decoration: none;
  font-size: 12pt;
  color: #983e36;
  font-family: Louis !important;
  padding: 10px 20px 10px 20px;
  border-radius: 30px;
  border: #983e36 solid 2px;
  background-color: #e27979;
  transition: 0.3s;
}

#stop:hover {
  color: #fff1e6;
  border: #983e36 solid 2px;
  background-color: #983e36;
}

#reset {
  text-decoration: none;
  font-size: 12pt;
  color: #6780ce;
  font-family: Louis !important;
  padding: 10px 20px 10px 20px;
  border-radius: 30px;
  border: #6780ce solid 2px;
  background-color: #c1caf0;
  transition: 0.3s;
}

#reset:hover {
  color: #fff1e6;
  border: #6780ce solid 2px;
  background-color: #6780ce;
}

/*INPUT*/
input {
  text-decoration: none;
  font-size: 12pt;
  color: #71461c;
  font-family: Louis !important;
  padding: 15px 20px 15px 20px;
  border-radius: 30px;
  border: #71461c solid 2px;
  background-color: #fff1e6;
  transition: 0.3s;
}

#down_m {
  text-align: right;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

input:focus {
  color: #71461c;
  border: #71461c solid 2px;
  background-color: #ddbea9;
}