body {
  --primary-color: #D45141;
  --background-color: #f2ebe9;
  color: var(--primary-color);
  font-family: "Jost", sans-serif;

  font-size: calc(3.82vh + 3.056px);
  background-color: var(--background-color);

  user-select: none;
}

html, body {
  height: 100vh;   /* fallback */
  height: 100svh;  /* small viewport height (när toolbars syns) */
  height: 100dvh;  /* dynamic (bäst när det stöds) */
  margin: 0;
  padding: 0;
  overflow: hidden;
  touch-action: manipulation;
}

main {
  height: 100%;
}


.flex-filler-1 {
  flex-grow: 1;
}

.flex-filler-2 {
  flex-grow: 2;
}

.flex-filler-3 {
  flex-grow: 3;
}




.button {
  display: flex;
  justify-content: center;
  align-items: center;

  border-style: solid;
  border-color: var(--primary-color);
  border-width: 3px;

  --color: var(--primary-color);
  color: var(--color);

  text-align: center;
}

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