:root {
  --black: #000000;
  --eerie-black: #1e1e1e;
  --white: #ffffff;

  --primary-color: #1e1e1e;
  --secondary-color: #ffffff;

  --font-size-m: 12px;
  --font-size-l: 14px;
  --font-size-ll: 16px;
  --font-size-xl: 18px;
  --font-size-xsl: 24px;
  --font-size-xxl: 36px;
  --font-size-xxxl: 64px;

  --font-weight-light: 300;
  --font-weight-medium: 400;
  --font-weight-bold: 700;

  --container-max-width: 1320px;

  --font-family-lato: 'Lato', sans-serif;
  --font-family-syncopate: 'Syncopate', sans-serif;
  --font-family-nunito:  'Nunito Sans', sans-serif;
  --font-family-IBM-Plex-Sans:  'IBM Plex Sans', sans-serif;

  --btn-bg-primary: #1e1e1e;
  --btn-bg-secondary: #ffffff;

  --btn-color-primary: #ffffff;
  --btn-color-secondary: #000000;
}

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('../fonts/IBM-Plex-Sans/static/IBMPlexSans-Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('../fonts/IBM-Plex-Sans/static/IBMPlexSans-ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('../fonts/IBM-Plex-Sans/static/IBMPlexSans-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('../fonts/IBM-Plex-Sans/static/IBMPlexSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('../fonts/IBM-Plex-Sans/static/IBMPlexSans-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('../fonts/IBM-Plex-Sans/static/IBMPlexSans-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('../fonts/IBM-Plex-Sans/static/IBMPlexSans-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

.ibm-plex-sans {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 400;
}

/* Basic Styling */
* {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  color: var(--eerie-black);
  /*font-family: var(--font-family-nunito);*/
  font-family: var(--font-family-IBM-Plex-Sans);
  font-size: var(--font-size-m);
  font-style: normal;
  /*font-weight: var(--font-weight-light);*/
  font-weight: 400;
  text-align: left;
  background-color: var(--white);
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}


/* TYPOGRAPHY */
div {
  font-family: var(--font-family-lato);
  font-weight: var(--font-weight-light);
  -webkit-text-size-adjust: none;
  font-style: normal;
}

h1 {
  font-family: var(--font-family-nunito);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-xxl);
  font-style: normal;
}

h2 {
  font-family: var(--font-family-nunito);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-xsl);
  font-style: normal;
}

h3 {
  font-family: var(--font-family-nunito);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-xl);
  font-style: normal;
}

h4 {
  font-family: var(--font-family-nunito);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-l);
  font-style: normal;
}

h5, .card-title a {
  font-family: var(--font-family-nunito);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-xl);
  font-style: normal;
  color: var(--eerie-black);
}

h6 {
  font-family: var(--font-family-nunito);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-m);
  font-style: normal;
}

a {
  font-family: var(--font-family-nunito);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-l);
  display: contents;
  text-decoration: none;
  font-style: normal;
}

p, label {
  font-family: var(--font-family-lato);
  font-weight: var(--font-weight-light);
  font-size: var(--font-size-l);
  font-style: normal;
}

.font-nunito{
  font-family: var(--font-family-nunito);
}

table{
  width: 100%;
}


/* FORMS AND BUTTONS */
input {
  background-color: var(--white);
  color: var(--black);
  outline: none;
}

textarea {
  background-color: var(--white);
  color: var(--black);
  outline: none;
}

/* Responsive images */
img {
  width: 100%;
  height: auto;
}

ul{
  margin-left: 0;
}

ul li{
  font-family: var(--font-family-nunito);
  font-weight: var(--font-weight-light);
  font-size: var(--font-size-ll);
  font-style: normal;
}

button{
  font-family: var(--font-family-nunito);
}