:root {
  --normal-font-size: 15px;

  --title-size-ratio: 6;
  --subtitle-size-ratio: 2;
  --title-size: calc(var(--normal-font-size) * var(--title-size-ratio));
  --subtitle-size: calc(var(--normal-font-size) * var(--subtitle-size-ratio));
  --max-title-size: calc(var(--normal-font-size) * 6);
  --min-title-size: calc(var(--normal-font-size) * 2);
  --max-subtitle-size: calc(var(--normal-font-size) * 2);
  --min-subtitle-size: calc(var(--normal-font-size));

  --heading-font-family: 'Oswald', sans-serif;
  --heading-font-weight: 400;
  --normal-font-family: 'Poppins', sans-serif;
  --normal-font-weight: 400;
  --bold-font-family: 'Poppins', sans-serif;
  --bold-font-weight: 600;
  --trademark-font-family: 'Lobster', sans-serif;

  --orange: #ff801a;
  --green: #1db954;
}

html,
body,
form {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--normal-font-family);
  font-weight: var(--normal-font-weight);
  font-size: var(--normal-font-size);
  color: #000;
}

h1 {
  font-family: var(--heading-font-family);
  font-weight: var(--heading-font-weight);
}

a,
a:visited {
  color: #000;
  text-decoration: none;
}

.select-page {
  width: 100%;
  min-height: 100vh;
  display: flex;
}
.select-page.column {
  flex-direction: column;
}
.select-page a {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: max(1rem, calc(1rem * var(--title-size-ratio) / 2));
  font-family: var(--trademark-font-family);
  transition: all 0.2s ease-out;
}
.select-page a:active,
.select-page a:focus,
.select-page a:hover {
  transition: all 0.2s ease-in;
}

.select-page a {
  color: #fff;
}
.select-page a.orange {
  background-color: var(--orange);
}
.select-page a.green {
  background-color: var(--green);
}
@media (pointer: fine) {
  .select-page a:active,
  .select-page a:focus,
  .select-page a:hover {
    background-color: #fff !important;
  }
  .select-page a.orange:active,
  .select-page a.orange:focus,
  .select-page a.orange:hover {
    color: var(--orange);
  }
  .select-page a.green:active,
  .select-page a.green:focus,
  .select-page a.green:hover {
    color: var(--green);
  }
}

.select-page a span {
  flex: 1;
  text-align: center;
  padding: 0 1rem;
}
.select-page a span.title {
  display: flex;
  align-items: end;
  justify-content: center;
  font-size: max( var(--min-title-size)
                , min(var(--title-size), var(--max-title-size))
                );
}
.select-page a span.subtitle {
  font-family: var(--bold-font-family);
  font-weight: var(--bold-font-weight);
  font-size: max( var(--min-subtitle-size)
                , min(var(--subtitle-size), var(--max-subtitle-size))
                );
}