/* Rubik font (local) */
@font-face {
  font-family: 'Rubik';
  src: url('../fonts/Rubik-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
}

@font-face {
  font-family: 'Rubik';
  src: url('../fonts/Rubik-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
}

/* Source Sans Variable from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,300;0,600;1,300;1,600&display=swap');

/* CSS Variables for brand colors and fonts */
:root {
  --blue: #199CD3;
  --yellow: #FFCF0A;
  --green: #8FB93A;
  --gray: #DAE3EC;

  --font-body: 'Source Sans 3', sans-serif;
  --font-heading: 'Rubik', sans-serif;
}

/* Body font: Source Sans Light */
body {
  font-family: var(--font-body);
  font-weight: 300;
  color: #000;
}

/* Headlines: Rubik Bold */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
}

/* Utility font classes */
.semibold {
  font-weight: 600;
}

.light {
  font-weight: 300;
}

/* Color utility classes */
.text-blue {
  color: var(--blue);
}
.text-yellow {
  color: var(--yellow);
}
.text-green {
  color: var(--green);
}
.text-gray {
  color: var(--gray);
}

.bg-blue {
  background-color: var(--blue);
  color: #fff;
}

.bg-yellow {
  background-color: var(--yellow);
  color: #000;
}

.bg-green {
  background-color: var(--green);
  color: #fff;
}

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

/* Button override */
.btn-blue {
  background-color: var(--blue);
  color: #fff;
  border-radius: 50px;
}

.btn-yellow {
  background-color: var(--yellow);
  color: #000;
  border-radius: 50px;
}

.btn-green {
  background-color: var(--green);
  color: #fff;
  border-radius: 50px;
}
textarea.form-control {
  font-family: var(--font-body); /* Source Sans 3 */
  font-weight: 300; /* Light */
  font-size: 1rem;
  padding: 1rem;
  border: 1px solid var(--gray);
  border-radius: 12px;
  background-color: #fff;
  color: #000;
  resize: vertical;
  transition: border-color 0.2s, box-shadow 0.2s;
}

textarea.form-control:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 0.2rem rgba(25, 156, 211, 0.25);
  outline: none;
}