@font-face {
  font-family: 'Brown';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/Brown-Light.woff') format('woff'),
         url('../fonts/Brown-Light.ttf') format('truetype');
}
@font-face {
  font-family: 'Brown';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/Brown-Regular.woff') format('woff'),
         url('../fonts/Brown-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Brown';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/Brown-Bold.woff') format('woff'),
         url('../fonts/Brown-Bold.ttf') format('truetype');
}

* {
  line-height: 1.1;
}

:root {
    /* FONTS */
    --main-font: 'Brown';
    --display-font: 'Brown';
    /* COLORS */
    --color: var(--black);
    --color-lgt: var(--white);
    --color-drk: #979fa7;
    --bgcolor: var(--white);
    --bgcolor-lgt: #F4F4F4;
    --bgcolor-drk: #F7F7F7;
    --hl: var(--blue);
    --white: #fff;
    --black: #242424;
    --blue: #306be6;
    --pink: #E9007E;
    --green: #5CBE48;
    --yellow: #FCC13E;
    --red: #F2545B;
    /* SIZES */
    --container-width: 100%;
    --container-padding: 1rem;
}

@media (min-width: 576px) {
  :root {
    --container-width: 100%;
    --container-padding: 1.5rem;
  }
}
@media (min-width: 1200px) {
  :root {
    --container-width: 1170px;
    --container-padding: 2.5rem;
  }
}

.feather {
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  height: 1.15em;
  width: 1.15em;
}

@keyframes fadeIn {
  0% { opacity:0; }
  100% { opacity:1; }
}