/*
  De waardes in dit bestand mag je aanpassen als dat nodig blijkt te zijn.

  - De HSL waardes worden gebruikt om het hover effect te creëren.
    Gebruik hiervoor de waardes die terug te vinden zijn in het Figma bestand.
    Is er geen Figma bestand kun je deze ook terugvinden door de HEX code in Google te plaatsen.
*/

/* Custom font */
@font-face {
  --font-face: 'Uni Neue';
  font-family: var(--font-face);
  src: url('../fonts/unineue/unineue-bold.woff') format('woff'), /* Pretty Modern Browsers */
  url('../fonts/unineue/unineue-bold.ttf')  format('truetype'), /* Safari, Android, iOS */
  url('../fonts/unineue/unineue-bold.svg#svgFontName') format('svg'); /* Legacy iOS */
}

/* Variables */
:root {


  /* theme-color-variables */
  --bs-primary: #6300C8;
  --bs-primary-rgb: 99, 0, 200;
  --bs-primary-hsl: hsl(270, 100%, calc(39%  var(--bs-darken)));

  --bs-secondary: #9500FA;
  --bs-secondary-rgb: 149, 0, 250;
  --bs-secondary-hsl: hsl(276, 100%, calc(49%  var(--bs-darken)));

  --bs-tertiary: #FF8800;
  --bs-tertiary-rgb: 255, 136, 0;
  --bs-tertiary-hsl: hsl(32, 100%, calc(50%  var(--bs-darken)));

  /* Body */
  --bs-body-font-family: 'DM Sans', sans-serif;
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.6;
  --bs-body-color: var(--bs-black);
  --bs-body-bg: var(--bs-primary);

  /* Typography */
  --display-1-font-size: 8.75rem;
  --display-2-font-size: 7.5rem;
  --display-3-font-size: 6rem;
  --display-4-font-size: 5.5rem;
  --display-5-font-size: 4.5rem;
  --display-6-font-size: 3.5rem;

  --h1-font-size: 2.5rem;
  --h2-font-size: 2.25rem;
  --h3-font-size: 2rem;
  --h4-font-size: 1.5rem;
  --h5-font-size: 1.25rem;
  --h6-font-size: 1rem;

  --headings-font-family: var(--font-face);
  --headings-font-weight: 600;
  --headings-line-height: 1.2;
  --headings-color: var(--bs-primary);

  /* Link */
  --bs-link-color: var(--bs-tertiary);
  --bs-link-hover-color: var(--bs-tertiary-hsl);

  /* Transition */
  --bs-transition: all 0.25s ease-in-out;

}


/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  --bs-btn-padding-x: 1.5rem;
  --bs-btn-padding-y: 0.75rem;
  --bs-btn-font-family: var(--bs-body-font-family);
  --bs-btn-font-size: var(--bs-body-font-size);
  --bs-btn-font-weight: 700;
  --bs-btn-line-height: var(--bs-body-line-height);
  --bs-btn-color: var(--bs-black);
  --bs-btn-bg: transparent;
  --bs-btn-border-width: 2px;
  --bs-btn-border-color: transparent;
  --bs-btn-border-radius: 1.5625rem;
  --bs-btn-hover-border-color: transparent;
}

.btn img {
  margin-left: 15px;
}