:root {
  --color-primary:     #0f1626;
  --color-primary--10: #1d2b4b;
  --color-primary--20: #2c406f;
  --color-primary--30: #3a5694;
  --color-primary--40: #4a6bb7;
  --color-primary--50: #6e89c6;
  --color-primary--60: #93a7d4;
  --color-primary--70: #b7c5e3;
  --color-primary--80: #dce2f1;
  --color-primary--90: white;
  --color-primary-10: #010101;
  --color-primary-20: black;
  --color-primary-30: black;
  --color-primary-40: black;
  --color-primary-50: black;
  --color-primary-60: black;
  --color-primary-70: black;
  --color-secondary:     #ab987a;
  --color-secondary--10: #bfb099;
  --color-secondary--20: #d2c8b9;
  --color-secondary--30: #e6e1d8;
  --color-secondary--40: #faf9f7;
  --color-secondary--50: white;
  --color-secondary--60: white;
  --color-secondary--70: white;
  --color-secondary--80: white;
  --color-secondary--90: white;
  --color-secondary-10: #947f5e;
  --color-secondary-20: #75644a;
  --color-secondary-30: #564a36;
  --color-secondary-40: #372f22;
  --color-secondary-50: #17140f;
  --color-secondary-60: black;
  --color-secondary-70: black;
  --color-secondary-80: black;
  --color-secondary-90: black;
  --color-accent:     #ff533d;
  --color-accent--10: #ff8070;
  --color-accent--20: #ffada3;
  --color-accent--30: #ffdbd6;
  --color-accent--40: white;
  --color-accent--50: white;
  --color-accent--60: white;
  --color-accent--70: white;
  --color-accent--80: white;
  --color-accent--90: white;
  --color-accent-10: #ff260a;
  --color-accent-20: #d61800;
  --color-accent-30: #a31200;
  --color-accent-40: #700d00;
  --color-accent-50: #3d0700;
  --color-accent-60: #0a0100;
  --color-accent-70: black;
  --color-accent-80: black;
  --color-accent-90: black;
  --color-grey:    #f5f5f5;
  --color-grey--10: white;
  --color-grey--20: white;
  --color-grey--30: white;
  --color-grey--40: white;
  --color-grey--50: white;
  --color-grey--60: white;
  --color-grey--70: white;
  --color-grey--80: white;
  --color-grey--90: white;
  --color-grey-10: gainsboro;
  --color-grey-20: #c2c2c2;
  --color-grey-30: darkgray;
  --color-grey-40: #8f8f8f;
  --color-grey-50: #767676;
  --color-grey-60: #5c5c5c;
  --color-grey-70: #434343;
  --color-grey-80: #292929;
  --color-grey-90: #101010;
  --navbar-height: 10vw;
  --font-size-base: 2.2vw;
  --font-size-display-1: calc(var(--font-size-base) * 1.2);
  --font-size-display-2: calc(var(--font-size-base) * 2.3);
  --font-size-display-3: calc(var(--font-size-base) * 3.6);
  --font-size-display-4: calc(var(--font-size-base) * 5); }

@media only screen and (min-width: 850px) {
  :root {
    --navbar-height: 7vw;
    --font-size-base: 1.5vw;
    --font-size-display-1: calc(var(--font-size-base) * 1.2);
    --font-size-display-2: calc(var(--font-size-base) * 2.3);
    --font-size-display-3: calc(var(--font-size-base) * 3.6);
    --font-size-display-4: calc(var(--font-size-base) * 5); } }

@media only screen and (min-width: 1120px) {
  :root {
    --navbar-height: 4vw;
    --font-size-base: 1vw;
    --font-size-display-1: calc(var(--font-size-base) * 1.2);
    --font-size-display-2: calc(var(--font-size-base) * 2.3);
    --font-size-display-3: calc(var(--font-size-base) * 3.6);
    --font-size-display-4: calc(var(--font-size-base) * 5); } }

.bg-primary {
  background-color: var(--color-primary); }

.bg-primary-10 {
  background-color: var(--color-primary-10); }

.bg-primary-20 {
  background-color: var(--color-primary-20); }