/* Fonts */

@font-face {
  font-family: "futura";
  src: url("/fonts/FuturaPTLight.woff2") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "futura-b";
  font-weight: bold;
  src: url("/fonts/FuturaPTMedium.woff2") format("opentype");
  font-display: swap;
}

@font-face {
  font-family: "garamond";
  src: url("/fonts/EBGaramond-Regular.woff2") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "garamond-b";
  font-weight: bold;
  src: url("/fonts/EBGaramond-SemiBold.woff2") format("opentype");
  font-display: swap;
}

:root {
  --animate-delay: 0.5s;
  --white: #F6F4EA;
  --gray: #4C5760;
  --black: #141414;
}

html {
  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-color: var(--black) var(--white);
}

/* CUSTOM SCROLLBAR */
::-webkit-scrollbar {
  width: 10px;
  background-color: var(--black);
}

::-webkit-scrollbar-track {
  border-radius: 4px;
  box-shadow: inset 0 0 10px var(--black);
}

::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: var(--black);
}

  /* The progress container (grey background) */
  .progress-container {
    width: 100%;
    position:fixed;
    top: 60px;
    height: 8px;
    background: transparent;
  }