:root {
  --primary-background-color: #ffffff;
  --primary-lighter-background-color: #fbfbfc;
  --primary-off-background-color: #f8f9fb;
  --primary-main-text-color: #4c566a;
  --primary-button-hover-color: #79b8ca;
  --primary-button-border-color: #4c566a;
  --primary-button-text-color: #3b4252;

  --divider-color: rgba(216, 222, 233, 1);
  --primary-button-color: #88c0d0;
  --text-hover-color: #5e81ac;

  --wave-footer-one: rgb(244, 246, 249);
  --wave-footer-two: rgb(247, 249, 251);
  --wave-footer-three: rgb(251, 251, 252);

  --secondary-background-color: #2e3440;
  --secondary-off-background-color: #3b4252;
  --secondary-main-text-color: #eceff4;
  --secondary-off-text-color: #d8dee9;
  --secondary-button-hover-color: #79b8ca;
  --secondary-button-border-color: #4c566a;
}

[data-theme="dark"] {
  --primary-background-color: #2e3440;
  --primary-lighter-background-color: #3b4252;
  --primary-off-background-color: #292e39;
  --primary-main-text-color: #eceff4;
  --primary-off-text-color: #d8dee9;
  --primary-button-hover-color: #79b8ca;
  --primary-button-text-color: #3b4252;

  --divider-color: rgba(216, 222, 233, 0.6);
  --primary-button-color: #88c0d0;
  --text-hover-color: #5e81ac;

  --wave-footer-one: rgb(55, 61, 76);
  --wave-footer-two: rgb(57, 64, 79);
  --wave-footer-three: rgb(59, 66, 82);

  --secondary-background-color: #ffffff;
  --secondary-off-background-color: #f8f9fb;
  --secondary-main-text-color: #4c566a;
  --secondary-button-hover-color: #79b8ca;
  --secondary-button-border-color: #4c566a;
}

html {
  height: 100%
}

body {
  background-color: var(--primary-background-color);
  color: var(--primary-main-text-color);
  font-family: "Rubik", sans-serif;
  width: 100%;
  margin: 0px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

body.theme-transition {
  transition:
    background-color 400ms ease-in-out,
    color 400ms ease-in-out,
    border-color 400ms ease-in-out;
}

.secondaryButton {
  display: inline-flex;
  align-items: center;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  white-space: nowrap;
  border-radius: 0.25em;
  border: 0.0625em solid var(--secondary-button-border-color);
  background: none;
  padding: 0.375em 0.75em;
  user-select: none;
  line-height: 1.15;
  color: var(--primary-main-text-color);
  transition:
    color 400ms ease-in-out;

  font-size: 1.375em;
  margin: 0.4em 0 0.25em;
  width: fit-content;
}

.secondaryButton:hover {
  color: var(--secondary-button-hover-color);
  border: 0.0625em solid var(--secondary-button-hover-color);
  cursor: pointer;
}

.primaryButton {
  display: inline-flex;
  align-items: center;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  white-space: nowrap;
  border: none;
  border-radius: 0.25em;
  background: none;
  padding: 0.375em 0.75em;
  user-select: none;
  line-height: 1.15;
  color: var(--primary-button-text-color);

  background-color: var(--primary-button-color);
  font-size: 1.375em;
  margin: 0.4em 0 0.25em;
  width: fit-content;
}

.primaryButton:hover {
  background-color: var(--primary-button-hover-color);
  cursor: pointer;
}

@media (max-width: 768px) {
  .primaryButton, .secondaryButton {
    font-size: 1.125em;
    line-height: 1.15em;
  }
}