#main-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: Arial, Helvetica, sans-serif;
}

#timer-text {
  font-size: 5rem;
  margin: 10px;
  font-family: monospace;
}

button {
  padding: 20px;
  margin: 20px;
  border: none;
  border-radius: 15px;
  cursor: pointer;
  transition: 0.2s;
  font-weight: bold;
  font-family: inherit;
}

button:active {
  padding: 15px;
}

#start-button {
  background-color: #20db20;
}

#start-button:hover {
  background-color: #3bb93b;
}

#pause-button {
  background-color: #e1e439;
}

#pause-button:hover {
  background-color: #c4c730;
}

#reset-button {
  background-color: #f74336;
}

#reset-button:hover {
  background-color: #bd2727;
}

#light-button {
  background-color: #000000;
  color:#ffffff;
}

#home-link {
  margin-top: 75px;
}

@media screen and (max-width: 426px) {
  #timer-text {
    font-size: 3.5rem;
    margin: 10px;
  }
}

@media screen and (max-width: 376px) {
  #timer-text {
    font-size: 3rem;
    margin: 10px;
  }

  button {
    padding: 15px;
  }

  button:hover {
    padding: 10px;
  }
}