/* Component for light mode*/
button {
  border: none;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.button-lite {
  background-color: transparent;
  border: 2px solid rgb(0, 45, 141);
  border-bottom-width: 2px;
  border-bottom-style: groove;
  color: rgb(0, 31, 97);
  padding: 15px 32px;
  display: inline-block;
  font-size: 16px;
  text-transform: uppercase;
  font-weight: bold;
  margin: 4px 2px;
  border-radius: 12px;
  transition: all 0.1s ease-in;
}

.button-lite:hover {
  background-color: rgb(237, 241, 255);
  border-color: rgb(0, 60, 189);
  box-shadow: 0px 0px 5px #003cbd77;
  border-bottom-width: 2px;
  border-bottom-style: groove;
  color: rgb(3, 48, 146);
}

.button-lite:active {
  border-color: rgb(0, 68, 216);
  border-bottom-width: 2px;
  border-bottom-style: groove;
  color: rgb(0, 73, 230);
  transform: translateY(2px);
  box-shadow: 0px 5px 5px rgb(153, 168, 252) inset;
}