@import url(https://fonts.googleapis.com/css?family=Roboto);
@import url(https://fonts.googleapis.com/css?family=Material+Icons);
html {
  --mdc-theme-blue: #0060A8;
  --mdc-theme-on-blue: #ffffff;
  --mdc-theme-blue-container: #D1E4FF;
  --mdc-theme-on-blue-container: #001C38;
  --mdc-theme-error: #ba1b1b;
  --mdc-theme-on-error: #ffffff;
  --mdc-theme-error-container: #ffdad4;
  --mdc-theme-on-error-container: #410001;
  --mdc-theme-neutral-variant: #56605f;
  --mdc-theme-on-neutral-variant: #ffffff;
  --mdc-theme-neutral-variant-container: #dae4e3;
  --mdc-theme-on-neutral-variant-container: #141d1d;
  --mdc-theme-neutral: #655c5e;
  --mdc-theme-on-neutral: #ffffff;
  --mdc-theme-neutral-container: #ebe0e1;
  --mdc-theme-on-neutral-container: #1f1a1b;
  --mdc-theme-primary: #006a68;
  --mdc-theme-on-primary: #ffffff;
  --mdc-theme-primary-container: #6ff7f3;
  --mdc-theme-on-primary-container: #002020;
  --mdc-theme-secondary: #765b00;
  --mdc-theme-on-secondary: #ffffff;
  --mdc-theme-secondary-container: #ffdf8b;
  --mdc-theme-on-secondary-container: #251a00;
  --mdc-theme-tertiary: #006783;
  --mdc-theme-on-tertiary: #ffffff;
  --mdc-theme-tertiary-container: #b8eaff;
  --mdc-theme-on-tertiary-container: #001f2a;
  --mdc-theme-background: #fcfcfc;
  --mdc-theme-on-background: #1f1a1b;
  --mdc-theme-surface: #fcfcfc;
  --mdc-theme-on-surface: #1f1a1b;
  --mdc-theme-surface-variant: #dae4e3;
  --mdc-theme-on-surface-variant: #3f4948;
  --mdc-theme-outline: #6f7978;
  --mdc-theme-dark-blue: #9FCAFF;
  --mdc-theme-dark-on-blue: #00325B;
  --mdc-theme-dark-blue-container: #004881;
  --mdc-theme-dark-on-blue-container: #D1E4FF;
  --mdc-theme-dark-error: #ffb4a9;
  --mdc-theme-dark-on-error: #680003;
  --mdc-theme-dark-error-container: #930006;
  --mdc-theme-dark-on-error-container: #ffdad4;
  --mdc-theme-dark-neutral-variant: #bec8c7;
  --mdc-theme-dark-on-neutral-variant: #283231;
  --mdc-theme-dark-neutral-variant-container: #3f4948;
  --mdc-theme-dark-on-neutral-variant-container: #dae4e3;
  --mdc-theme-dark-neutral: #cfc4c5;
  --mdc-theme-dark-on-neutral: #352f30;
  --mdc-theme-dark-neutral-container: #4c4546;
  --mdc-theme-dark-on-neutral-container: #ebe0e1;
  --mdc-theme-dark-primary: #4ddad6;
  --mdc-theme-dark-on-primary: #003736;
  --mdc-theme-dark-primary-container: #00504e;
  --mdc-theme-dark-on-primary-container: #6ff7f3;
  --mdc-theme-dark-secondary: #ecc248;
  --mdc-theme-dark-on-secondary: #3e2e00;
  --mdc-theme-dark-secondary-container: #594400;
  --mdc-theme-dark-on-secondary-container: #ffdf8b;
  --mdc-theme-dark-tertiary: #60d4fe;
  --mdc-theme-dark-on-tertiary: #003545;
  --mdc-theme-dark-tertiary-container: #004d63;
  --mdc-theme-dark-on-tertiary-container: #b8eaff;
  --mdc-theme-dark-background: #1f1a1b;
  --mdc-theme-dark-on-background: #ebe0e1;
  --mdc-theme-dark-surface: #1f1a1b;
  --mdc-theme-dark-on-surface: #cfc4c5;
  --mdc-theme-dark-surface-variant: #3f4948;
  --mdc-theme-dark-on-surface-variant: #bec8c7;
  --mdc-theme-dark-outline: #889392;
}

body {
  max-width: 600px;
  margin: 0 auto;
  padding: 5vw;
  background-color: var(--mdc-theme-background);
}

* {
  font-family: Roboto, Helvetica, Arial, sans-serif;
  color: var(--mdc-theme-on-background);
}

h1 {
  font-family: "Roboto", sans-serif;
  line-height: 64px;
  font-weight: 400;
  font-size: 57px;
}

p {
  font-family: "Roboto", sans-serif;
  line-height: 24px;
  font-weight: 400;
  font-size: 16px;
}