:root {
  --font-mono: "Lato", sans-serif;

  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;

  --primary-color-rgb: 218, 165, 32;
  --disabled-color-rgb: 128, 128, 128;
  font-size: 2.7rem;
  font-family: var(--font-mono);
}

html,
body {
  max-width: 100vw;
  max-height: 100vh;
  touch-action: manipulation;
}

body {
  display: flex;
  flex-direction: column;
  background-image: url("../public/background.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: repeat-y;
  min-height: 100vh;
  max-height: 200vh;
  color: white;
}

button:not(#card, :disabled) {
  border-radius: 1rem;
  border: none;
  padding: 1rem 2rem 1rem 2rem;
  font-size: 1rem;
  margin: 1.5em ;
  background-color: rgba(var(--primary-color-rgb), 1);
  box-shadow: rgba(var(--primary-color-rgb), 0.5) 0em 0.3em 1em;
}

input {
  font-size: 1rem;
}

textarea {
  font-size: 1rem;
}