@font-face {
    font-family: 'pp_neue_machinalight';
    src: url('assets/fonts/ppneuemachina-light-webfont.woff2') format('woff2'),
         url('assets/fonts/ppneuemachina-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'pp_neue_machinaregular';
    src: url('assets/fonts/ppneuemachina-regular-webfont.woff2') format('woff2'),
         url('assets/fonts/ppneuemachina-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'pp_neue_machinaultrabold';
    src: url('assets/fonts/ppneuemachina-ultrabold-webfont.woff2') format('woff2'),
         url('assets/fonts/ppneuemachina-ultrabold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

:root {
  --pink: #FFD6E9;
  --yellow: #FFFACD;
  --green: #D0F4DE;
  --purple: #7765E3;
  --lilac: #E4C1F9;
  --gray: #999999;
  --light-gray: #EFEFEF;
  --dark-gray: #212529;
  --white: #FFFFFF;
}

body {
  color: var(--dark-gray);
  font-family: 'Karla', sans-serif
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6, li {
  font-family: "pp_neue_machinalight", sans-serif;
  font-weight: 300!important
}

h1 {
  margin: 40px 0 0 0;
}

h2 {
  margin: 20px 0 10px 0;
  font-size: 36px;
  color: var(--purple)
}

h2:first-child {
  margin: 40px 0 10px 0
}

h3 {
  margin: 10px 0 0 0;
  font-size: 20px
}

code {
  color: var(--purple)
}

i.im {
  font-size: 48px;
  color: var(--dark-gray);
  padding: 20px;
  margin: 20px;
  background-color: var(--green);
}

i.im:hover {
  background-color: var(--lilac)
}

a {
  text-decoration: none;
  color: var(--dark-gray)!important;
  background: linear-gradient(180deg,rgba(255,255,255,0) 50%, var(--green) 50%);
}

a:hover {
  background: linear-gradient(180deg,rgba(255,255,255,0) 50%, var(--lilac) 50%);
}

a.icon {
  background: none!important
}

.nav-item a {
  font-size: 20px;
  color: var(--dark-gray)!important;
  background: none;
}

.nav-item a:hover {
  text-decoration: none;
  color: var(--green)!important;
}

.nav-link.active {
  font-weight: 500!important;
}

.date {
  color: var(--gray)!important
}

.container {
  width: auto;
  max-width: 900px;
  padding: 0 15px;
}

.landing {
  padding-top: 60px
}

.bg-soft-gradient {
  background: rgb(255,214,233);
  background: linear-gradient(90deg, rgba(255,214,233,1) 0%, rgba(119,101,227,1) 50%, rgba(208,244,222,1) 100%);
}

.jumbotron.jumbotron-fluid {
  padding: 100px;
  margin-bottom: 20px;
  background: rgb(255,214,233);
  background: linear-gradient(90deg, rgba(255,214,233,1) 0%, rgba(119,101,227,1) 50%, rgba(208,244,222,1) 100%);
}

.made-by {
  font-size: 12px;
  color: var(--dark-gray);
  text-align: center
}

hr {
  margin: 40px 0;
  background-color: var(--gray);
}

ul {
  margin-top: 12px
}

ul ul {
  margin-top: 0
}

ul li::marker {
  color: var(--purple);
}

ul ul {
  list-style-type: disc!important;
}

ul ul li::marker {
  color: var(--lilac)
}

ul ul ul li::marker {
  color: var(--purple)
}

/* Sticky footer and navbar */

.bd-placeholder-img {
  font-size: 1.125rem;
  text-anchor: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

@media (min-width: 768px) {
  .bd-placeholder-img-lg {
    font-size: 3.5rem;
  }
}

@media (max-width: 768px) {
  h1 {
    font-size: 36px;
    margin: 20px 0 0 0;
  }

  .jumbotron.jumbotron-fluid {
    padding: 30px!important
  }

  .jumbotron.jumbotron-fluid .container {
    padding: 40px 0 0 0;
  }

  .container {
    padding: 0 30px
  }

  .navbar>.container {
    margin-left: 10px;
    margin-top: 5px;
  }
}

footer {
  background-color: --white;
}