@import 'header.css';
@import 'form.css';
@import 'data.css';
@import 'tooltip.css';

:root {
  --default-font-family: sans-serif;
  --default-font-size: 16px;
  --error-color: #B00020;
  --data-display-highlight-color: mediumorchid;
  --default-dark-gray-color: dimgray;
}

html {
  margin: 0;
}

html, body {
  font-size: var(--default-font-size);
  font-family: var(--default-font-family);
}


body {
  display: flex;
  flex-direction: column;
  max-width: 750px;
  margin: 0 auto;
}

@media screen and (max-width: 800px) {
  body {
    max-width: 90%;
  }
}

@media screen and (max-width: 600px) {
  body {
    max-width: unset;
    margin: 0 40px;
  }
}

@media screen and (max-width: 375px) {
  body {
    max-width: unset;
    margin: 0 20px;
  }
}