@import url(./assets/reset.css);
@import url(./styles/result.css);
@import url(./styles/responsive.css);
@font-face {
  font-family: 'CustomFont';
  src: url(./assets/fonts/HankenGrotesk-VariableFont_wght.ttf);
}

:root {
font-size: 18px;
/* ### Primary */
--light-red: hsl(0, 100%, 67%);
--light-red-lo: hsl(0, 100%, 67%, .1);

--orange-yellow: hsl(39, 100%, 56%);
--orange-yellow-lo: hsl(39, 100%, 56%, .1);

--green-teal: hsl(166, 100%, 37%);
--green-teal-lo: hsl(166, 100%, 37%, .1);

--cobalt-blue: hsl(234, 85%, 45%);
--cobalt-blue-lo: hsl(234, 85%, 45%, .1);

/* ## Gradients */

/* bg */
--light-slate-blue: hsl(252, 100%, 67%, 1);
--light-royal-blue: rgb(46, 43, 233);

--bg-gradient: linear-gradient(to bottom, var(--light-slate-blue), var(--light-royal-blue) 80%);

/* circle */
--violet-blue: hsla(256, 72%, 46%, 1);
--persian-blue: hsla(241, 72%, 46%, 0);

--circle-gradient: linear-gradient(to bottom, var(--violet-blue) 10%, var(--persian-blue) 100%);

/* ### Neutral */
--white: hsl(0, 0%, 100%);
--pale-blue: hsl(221, 100%, 96%);
--light-lavender: hsl(241, 100%, 89%);
--light-lavender-lo: hsla(241, 100%, 89%, .1);
--dark-gray-blue: hsl(224, 30%, 27%);
--dark-gray-blue-lo: hsl(224, 30%, 27%, .1);

}

* {
  font-family: 'CustomFont' !important;
  box-sizing: border-box;
}

body {
  background-color: var(--white);
}