:root {
  --bg-primary: linear-gradient(to left, #7540ee 100%, #5d21e6 0%);

  --primary-dark: #3617af;
  --primary: #3a14d3;
  --primary-light: #6142df;
  --primary-lightest: #dfd8fd;

  --secondary-dark: #061733;
  --secondary: #FF5959;
  --secondary-light: #FF5959;
  --secondary-lightest: #7187ad;

  --primary-invert: #fff;
  --secondary-invert: #fff;

  --text-primary: #0a1f44;

  /* FOR BUTTONS & INPUTS */
  --elements-roundness: 10rem;
}

/* --------------- FONT --------------------- */

@font-face {font-family: "Touche";
  src: url("../fonts/touche_w03_bold/6ff35b8857ed1d3bf6a3cc93164ff962.eot"); /* IE9*/
  src: url("../fonts/touche_w03_bold/6ff35b8857ed1d3bf6a3cc93164ff962.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
  url("../fonts/touche_w03_bold/6ff35b8857ed1d3bf6a3cc93164ff962.woff2") format("woff2"), /* chrome、firefox */
  url("../fonts/touche_w03_bold/6ff35b8857ed1d3bf6a3cc93164ff962.woff") format("woff"), /* chrome、firefox */
  url("../fonts/touche_w03_bold/6ff35b8857ed1d3bf6a3cc93164ff962.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url("../fonts/touche_w03_bold/6ff35b8857ed1d3bf6a3cc93164ff962.svg#Touche W03 Bold") format("svg"); /* iOS 4.1- */
  font-weight: 900;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}

@font-face {font-family: "Touche";
  src: url("../fonts/touche_w03_semibold/e47842169b17674250d3f8ed52cf53f8.eot"); /* IE9*/
  src: url("../fonts/touche_w03_semibold/e47842169b17674250d3f8ed52cf53f8.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
  url("../fonts/touche_w03_semibold/e47842169b17674250d3f8ed52cf53f8.woff2") format("woff2"), /* chrome、firefox */
  url("../fonts/touche_w03_semibold/e47842169b17674250d3f8ed52cf53f8.woff") format("woff"), /* chrome、firefox */
  url("../fonts/touche_w03_semibold/e47842169b17674250d3f8ed52cf53f8.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url("../fonts/touche_w03_semibold/e47842169b17674250d3f8ed52cf53f8.svg#Touche W03 Semibold") format("svg"); /* iOS 4.1- */
  font-weight: 600;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}

@font-face {font-family: "Touche";
  src: url("../fonts/touche_w03_light/239247824c627435c11d8195e15fb880.eot"); /* IE9*/
  src: url("../fonts/touche_w03_light/239247824c627435c11d8195e15fb880.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
  url("../fonts/touche_w03_light/239247824c627435c11d8195e15fb880.woff2") format("woff2"), /* chrome、firefox */
  url("../fonts/touche_w03_light/239247824c627435c11d8195e15fb880.woff") format("woff"), /* chrome、firefox */
  url("../fonts/touche_w03_light/239247824c627435c11d8195e15fb880.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url("../fonts/touche_w03_light/239247824c627435c11d8195e15fb880.svg#Touche W03 Light") format("svg"); /* iOS 4.1- */
  font-weight: normal;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Touche';
  color: var(--text-primary);
}

/* ----------------- BUTTONS ------------------- */

button {
  color: inherit;
  padding: 0;
  background: none;
  border: none;
}

button:focus {
  outline: none;
  box-shadow: none;
}

.btn {
  font-size: .8rem;
  padding: .8rem 1.6rem;
  border-radius: var(--elements-roundness);
  transition: .2s all;
}

@media(min-width: 992px) {
  .btn {
    font-size: 1rem;
    padding: .8rem 2rem;
  }
}

.btn,
.btn:hover,
.btn:focus {
  border: none;
  box-shadow: none;
  outline: none;
}

.btn:hover,
.btn:focus {
  transform: scale(1.05);
}

.btn-primary,
.btn-primary:hover,
.btn-primary:focus {
  background: var(--bg-primary);
  color: var(--primary-invert);
}

.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus {
  background: var(--secondary);
  color: var(--secondary-invert);
}

.btn-sm {
  padding: .5rem 2rem;
}