:root {
  --color-blue-0: #31A5DE;
  --color-grey-0: #9b9b9b;
  --color-grey-1: #949494;
  --background-color-white: #fff;

  --standard-font-family: 'Gabarito', sans-serif;
  --header-font-family: 'Gabarito', sans-serif;
  --h1-font-min: 30px;
  --h1-font-max: 45px;
  --h2-font-min: 22px;
  --h2-font-max: 30px;
  --h3-font-min: 18px;
  --h3-font-max: 30px;
  --p-font: 16px;
  --p-font-small-min: 14px;
  --p-font-small-max: 16px;
  --p-font-small: clamp(var(--p-font-small-min), calc(var(--p-font-small-min) + 0.25vw), var(--p-font-small-max));

  --standard-body-margin: 120px 0 0 0;
  --standard-content-padding: 0 15% 0 15%;
  --mid-content-padding: 0 5% 0 5%;
  --small-content-padding: 0 2.5% 0 2.5%;

  --max-content-width: 1000px;

  --overview-item-base-width: 480px;
  --overview-item-max-width: 960px;
}

sup {
  font-size: 10px;
}

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: var(--background-color-white);
  font-family: var(--standard-font-family);
}

h1 {
  font-family: var(--header-font-family);
  font-size: clamp(var(--h1-font-min), calc(var(--h1-font-min) + 1vw), var(--h1-font-max));
}

h2 {
  font-family: var(--header-font-family);
  font-size: clamp(var(--h2-font-min), calc(var(--h2-font-min) + 0.5vw), var(--h2-font-max));
}

h3 {
  font-family: var(--header-font-family);
  font-size: clamp(var(--h3-font-min), calc(var(--h3-font-min) + 0.5vw), var(--h3-font-max));
}

p {
  margin: 0;
  font-size: var(--p-font);
}

a {
  text-decoration: none;
  color: var(--background-color-white);
}

button {
  padding: 4px 4px;
  color: #000; !important;
  font-family: var(--standard-font-family);
  font-size: 15px;
  transform: none;
  -webkit-tap-highlight-color: transparent;
}

label {
  font-size: 14px;
  text-transform: uppercase;
}

input,
select {
  outline: black;
  color: black;
  background-color: white;
  height: 36px;
  padding: 7px 7px;
  min-width: 25px;
  font-family: var(--standard-font-family);
  font-size: 16px;
  box-sizing: border-box;
  border: 1px solid;
  border-radius: 5px;
  caret-color: black;
}

input::placeholder,
select::placeholder {
  color: var(--color-grey-0);
}

input:focus {
  border: 2px solid var(--color-blue-0);
}

.required-label::after {
  content: "*";
  color: var(--color-blue-0);
  margin-left: 2px;
}

.standard-content-padding {
  padding: var(--standard-content-padding);
}

.max-content-width {
  max-width: var(--max-content-width);
}

.content {
  margin: var(--standard-body-margin);
  padding: var(--standard-content-padding);
  display: flex;
  flex-direction: column;
}

.content > h1 {
  margin-bottom: 5px;
}

.content > h2 {
  margin-bottom: 5px;
}

.content > p {
  margin-bottom: 8px;
}

.content-separator {
  border-top: 2px solid var(--color-grey-0);
  width: 100%;
  margin-top: 30px;
  margin-bottom: 30px;
}

.no-border {
  margin-top: 0;
  border: none;
}

.no-margin {
  margin: 0;
}

.left-align {
  float: left;
  clear: left;
}

.left-align table {
  width: auto;
}

.left-align table th, td {
  text-align: left;
  padding-right: 30px;
}

@media screen and (max-width: 1000px) {
  .content {
    padding: var(--mid-content-padding);
  }
}

@media screen and (max-width: 680px) {
  .content {
    padding: var(--small-content-padding);
  }

  .content-separator {
    margin-top: 15px;
    margin-bottom: 15px;
  }
}