@import url('/style/reset.css');

:root {
  --background: #93be4f;
  --background-gradient: linear-gradient(180deg, #93be4f 0%, #81a645 100%);
  --foreground: #ffffff;
  --text: #000000;
  --background-dark: #144c2b;
  --background-dark-gradient: linear-gradient(180deg, #1d6038 0%, rgba(14, 61, 34, 1) 100%);
  --foreground-dark: #ffffff;
  --border-radius: 0.66em;
  --error-color: #ff0040;
  --background-image: url(https://images.unsplash.com/photo-1451903978882-b165bd94e45d?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
  --shadow: 0 4px 8px 4px rgba(0, 0, 0, 0.25);
  --shadow-accent: 0 4px 8px 4px rgba(0, 0, 0, 0.5);
}

html,
body {
  font-family: Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  background-color: var(--background-dark);
  color: var(--foreground);
}

html,
body,
.page {
  min-height: 100dvh;
}

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

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

.align-right {
  display: flex;
  justify-content: end;
}

.button {
  padding: 0.5em 0.75em;
  margin-top: 0.5em;
  border: none;
  border-radius: var(--border-radius);
  background-color: var(--background);
  background: linear-gradient(180deg, rgba(147, 190, 79, 1) 0%, rgba(118, 190, 79, 1) 100%);
  color: var(--foreground);
  font-size: 1em;
  box-shadow: 0 4px 8px 1px rgba(0, 0, 0, 0.5);
}

.button:hover {
  box-shadow: 0 4px 8px 4px rgba(0, 0, 0, 0.5);
}

.hidden {
  display: none;
}

em,
.em {
  font-style: italic;
}

strong,
.strong {
  font-weight: 600;
}