/* Variables */
:root {
  body {
    --corner-radius: 25px;
    --color-green: #248a3f;
    --color-green-hover: #49bf68;
    --color-gray-secondary: #7a7974;
    --color-background: #f7f5f0;
    --color-background-secondary: #e6e3dc;
    --color-divider: #c7c4bd;

    --button-padding-x: 25px;
    --button-padding-y: 10px;
    --button-corner-radius: 15px;
  }
}

* {
  box-sizing: border-box;
}

body {
  font-family:
    ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";
  background-color: var(--color-background);
}

/* Text */

h1 {
  font-size: 3rem;
  font-weight: 600;
  margin-top: 1.5rem;
}

h2 {
  font-size: 2rem;
  font-weight: 600;
}

h4 {
  /* h4 to be used in conjunction with other headers */
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: -30px;
}

a {
  color: var(--color-green);
  text-decoration: none;
  font-weight: 600;
  transition-duration: 0.3s;
}

a:hover {
  color: var(--color-green-hover);
}

p {
  line-height: 1.7rem;
}

/* Other */

img {
  border-radius: var(--corner-radius);
  max-width: 100%;
}

hr {
  border-color: var(--color-divider);
  background-color: var(--color-divider);
  height: 1px;
  border: 0;
  margin: 64px 0;
}

/* Buttons */
.button {
  background-color: var(--color-green);
  color: white;
  display: inline-block;
  padding: var(--button-padding-y) var(--button-padding-x);
  border-radius: var(--button-corner-radius);
  transition-duration: 0.3s;
}

.button:hover {
  background-color: var(--color-green-hover);
  color: white;
}

.button.disabled {
  background-color: var(--color-gray-secondary);
}

.secondary-button {
  border-color: var(--color-green);
  border-style: solid;
  border-width: 2px;
  color: var(--color-green);
  display: inline-block;
  padding: var(--button-padding-y) var(--button-padding-x);
  border-radius: var(--button-corner-radius);
  transition-duration: 0.3s;
}

.secondary-button:hover {
  color: var(--color-green-hover);
}

.button,
.secondary-button {
  border-color: var(--color-green);
  border-style: solid;
  border-width: 2px;
}

.button:hover,
.secondary-button:hover {
  border-color: var(--color-green-hover);
}

/* Areas */

.footer {
  color: var(--color-gray-secondary);
  font-weight: 500;
}

/* Modifiers */

.left-align {
  text-align: left;
}

.center-align {
  text-align: center;
}

img.center-align {
  margin: 0 auto;
}