@import url('https://fonts.googleapis.com/css?family=Lato');
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda');

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap');

body, html 
{
  height: 100%;
  margin: 0;
  
}

p, span, a {
  font-family: Franklin Gothic Book, Franklin Gothic, Lato, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Playfair Display"; 
}

.KratosFamily {
  font-family: Bodoni Moda;
}
/* X-Small devices (portrait phones, less than 576px) */
/* No media query for `xs` since this is the default in Bootstrap */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  h1 {  } 
  h2 {  } 
  h3 {  }
  h4 {  } 
  h5 {  } 
  h6 {  }

  p, span {  }
  a {  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  h1 {  } 
  h2 {  } 
  h3 {  }
  h4 {  } 
  h5 {  } 
  h6 {  }

  p, span {  }
  a {  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  h1 {  } 
  h2 {  } 
  h3 {  }
  h4 {  } 
  h5 {  } 
  h6 {  }

  p, span {  }
  a {  }
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  h1 {  } 
  h2 {  } 
  h3 {  }
  h4 {  } 
  h5 {  } 
  h6 {  }

  p, span {  }
  a {  }
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
  h1 {  } 
  h2 {  } 
  h3 {  }
  h4 {  } 
  h5 {  } 
  h6 {  }

  p, span {  }
  a {  }
}

/* width */
::-webkit-scrollbar {
  width: 12px;
  /* display: none; */
}

/* Track */
::-webkit-scrollbar-track {
  background: #e1e1e1; 
  border-radius: 4px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #bbb; 
  border-radius: 4px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #b3b3b3; 
}