* {
    font-family: Quicksand;
}

:root {
    --colorPrimaryNormal: #5dbbff;
    --colorPrimaryDark: #00979f;
    --colorPrimaryGlare: #00cdd7;
    --colorPrimaryHalf: #5dbbff;
    --colorPrimaryQuarter: #bfecee;
    --colorPrimaryEighth: #dff5f7;
    --colorPrimaryPale: #ffffff;
    --colorPrimarySeparator: #f3f5f7;
    --colorPrimaryOutline: #dff5f7;
    --colorButtonNormal: #5dbbff;
    --colorButtonHover: #00cdd7;
    --colorLinkNormal: #00979f;
    --colorLinkHover: #00cdd7;
  }
  
  body {
    margin: 24px;
  }
  
  
  .upload_dropZone {
    color: #0f3c4b;
    background-color: var(--colorPrimaryPale, #e7e9e9);
    outline: 2px dashed var(--colorPrimaryHalf, #c1ddef);
    outline-offset: -12px;
    transition:
      outline-offset 0.2s ease-out,
      outline-color 0.3s ease-in-out,
      background-color 0.2s ease-out;
  }
  .upload_dropZone.highlight {
    outline-offset: -4px;
    outline-color: var(--colorPrimaryNormal, #0576bd);
    background-color: var(--colorPrimaryEighth, #c8dadf);
  }
  .upload_svg {
    fill: var(--colorPrimaryNormal, #0576bd);
  }
  .btn-upload {
    color: #fff;
    background-color: var(--colorPrimaryNormal);
  }
  .btn-upload:hover,
  .btn-upload:focus {
    color: #fff;
    background-color: var(--colorPrimaryGlare);
  }
  .upload_img {
    width: calc(33.333% - (2rem / 3));
    object-fit: contain;
  }