/*Button Styling (dodgerblue is a default)*/
.button {
  /*Background/Border styling*/
  background-color: #fff;
  border-style: solid;
  border-width: 0.125rem;
  border-color: var(--accent-1);
  border-radius: 0.125rem;
  /*Padding/Text styling*/
  padding: 0.5rem 1rem;
  font-size: 1.5rem;
  /*Transition durations*/
  transition:
    background-color 0.5s ease-in-out,
    color 0.5s ease-in-out,
    transform 0.05s ease-in-out;
  /*Width/Height styling*/
  width: auto;
  height: auto;
}
.button:hover {
  /*Cursor styling*/
  cursor: pointer;
  background-color: var(--accent-1);
  color: #fff;
}
.button:active {
  transform: scale(0.9);
}
.accent-2-button
{
  border-color: var(--accent-2);

}
.accent-2-button:hover
{
  background-color: var(--accent-2);
}
.selected
{
  /*Background/Border styling*/
  background-color: #88E788;
  border-style: solid;
  border-width: 0.125rem;
  border-color: #88E788;
  border-radius: 0.125rem;
  /*Padding/Text styling*/
  padding: 0.5rem 1rem;
  font-size: 1.5rem;
  /*Transition durations*/
  transition:
    background-color 0.5s ease-in-out,
    color 0.5s ease-in-out,
    transform 0.05s ease-in-out;
  /*Width/Height styling*/
  width: auto;
  height: auto;
  color: #fff;
}
.selected:hover
{
  /*Cursor styling*/
  cursor: pointer;
  background-color: #88E788;
  color: #fff;
}