:root {
  --main-bg-color: #e3ddd5;
  --primary-front-color: #4c3838;
  --secondary-front-color: #6c5b5b;
  --header-height: 40px;
  --flag-height: 100px;
  --header-font-size: 20px;
}

@media (max-width: 600px) {
  :root {
    --flag-height: 50px;
  }
}

* {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  background-color: var(--main-bg-color);
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 16px;
  line-height: normal;
  width: 100vw;
}

/* This is necessary because form elements don't inherit the body font styles */
button,
input,
select,
textarea {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 16px;
  line-height: normal;
}