h1,
h2,
h3,
h4,
h5,
h6,
p,
label,
span,
em,
ol,
ul {
  color: var(--color-text);
}

article ul {
  padding-left: 2rem;
}

.register-or-login h1 {
  display: inline;
  vertical-align: middle;
  font-size: 48px;
}

.register-or-login img {
  vertical-align: middle;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

p,
a,
input,
span,
textarea,
ol {
  font-size: 16px;
}

a {
  color: var(--color-links);
}

form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.basic-form input,
select,
textarea {
  max-width: 50%;
}

.basic-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1rem;
}

button,
.basic-button,
.basic-button-full,
.text-only-button,
.red-button,
.purple-button,
.cancel-button,
.green-button,
.basic-card-button,
.button-to {
  all: unset;
  display: flex;
  gap: 0.25rem;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  width: fit-content;
  background-color: var(--color-3);
  color: var(--color-text);
  border-radius: 0.5em;
  padding: 0.5em;
  cursor: pointer;
  user-select: none;
  max-height: 20px;
  -webkit-user-select: none;
  -moz-user-select: none;
}

input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="checkbox"],
textarea,
select {
  background-color: var(--color-2);
  border-color: var(--color-5);
  color: var(--color-text);
  accent-color: var(--color-4);
}

.red-button {
  background-color: var(--color-warning);
}

.basic-card-button {
  background-color: var(--color-3);
}

.cancel-button {
  background-color: var(--color-cancel);
}

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

.purple-button {
  background-color: var(--color-purple);
}

.basic-button svg,
.basic-button-full svg,
.basic-card-button svg,
.green-button svg,
.purple-button svg,
.cancel-button svg,
.red-button svg {
  width: 1.5em;
  height: auto;
}

p svg {
  max-width: 16px;
  max-height: 16px;
  vertical-align: middle;
}

.basic-button span,
.basic-card-button span,
.red-button span,
.cancel-button span,
.green-button span,
.navbar ul li button span {
  @media(max-width: 768px) {
    display: none;
  }
}