@font-palette-values --greyscale {
  font-family: "Nabla";
  base-palette: 0;
  override-colors:
    0 #000000,
    1 #000000,
    2 #999999,
    3 #999999,
    4 #C1C1C1,
    5 #C1C1C1,
    6 #F0F0F0,
    7 #C1C1C1,
    8 #FFFFFF,
    9 #FFFFFF
}

@font-palette-values --yellow {
  font-family: "Nabla";
  base-palette: 0;
}

@font-palette-values --green {
  font-family: "Nabla";
  base-palette: 0;
  override-colors:
    0 #004D0D,
    1 #004D0D,
    2 #93FB44,
    3 #93FB44,
    4 #63B262,
    5 #0A0B0A,
    6 #14FF86,
    7 #68CF68,
    8 #AADB8A,
    9 #FFFFFF;
}

@font-palette-values --red {
  font-family: "Nabla";
  base-palette: 1;
}

@font-palette-values --blue {
  font-family: "Nabla";
  base-palette: 0;
  override-colors:
    0 #00A0E1, /* rgb(0, 160, 225) */
    1 #2200F5, /* rgb(34, 0, 245) */
    2 #3C6EE1,
    3 #325AFF,
    4 #00A0E1, /* rgb(0, 160, 225) */
    5 #1EE1FF,
    6 #00A0E1,
    7 #1EE1FF,
    8 #87FFFF,
    9 #FFFFFF;
}

.nabla-title {
  font-family: "Nabla", system-ui;
  font-size: 5.5vw;
  font-weight: 400;
  font-style: normal;
  font-palette: --greyscale;
  font-variation-settings:
    "EDPT" 100,
    "EHLT" 12;
}

.nabla-secondary {
  font-family: "Nabla", system-ui;
  font-size: 2.5vw;
  font-weight: 400;
  font-style: normal;
  font-palette: --greyscale;
  font-variation-settings:
    "EDPT" 100,
    "EHLT" 12;
}

.nabla-yellow {
  font-palette: --yellow;
}

.nabla-green {
  font-palette: --green;
}

.nabla-red {
  font-palette: --red;
}

.nabla-blue {
  font-palette: --blue;
}

.responsive-header {
  font-size: 1.5vw;
}

.quicksand {
  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  color: white;
}

/* Phones and small screens */
@media (max-width: 1100px) {

  .nabla-title {
    text-align: center;
    font-size: 13vw;
  }

  .nabla-secondary {
    font-size: 6vw;
  }

  .responsive-header {
    font-size: 3vw;
  }

  .quicksand {
    font-size: 4vw;
  }

}

@media (max-width: 480px) {

  .nabla-title {
    text-align: center;
    font-size: 15vw;
  }

  .responsive-header {
    font-size: 5.5vw;
  }

  .quicksand {
    font-size: 4.2vw;
  }

}