h1 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 100;
}

body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  font-family: 'Montserrat',sans-serif;
  font-optical-sizing: normal;
  font-weight: 100;
  margin: 0;
  background-color: #ffffff;
}

footer {
  color: #ffffff;
  mix-blend-mode: difference;
  padding: 1.2em;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 300;
}

/* header blur effect */

.nav-container {
  position: fixed;
  width: 100%;
  height: 10%;
  color: #ffffff;
  top: 2.6%;
  left: 50%;
  transform: translateX(-50%);
  cursor: default;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-style: normal;
  letter-spacing: 2px;
  mix-blend-mode: difference;
  font-weight: 400;
  text-align: center;
  z-index: 500;
}


.nav-container span {
  margin: 0 20px;
  position: relative;
}


.header-blur-layer {
  position: fixed;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 9vh;
  background-color: rgb(255, 255, 255, 0);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: none;
  mix-blend-mode: difference;
  z-index: 499;
  


  -webkit-mask-image: linear-gradient(to bottom,
    rgba(0, 0, 0, 1.00) 0%,
    rgba(0, 0, 0, 1.00) 65%,
    rgba(0, 0, 0, 0.85) 75%,
    rgba(0, 0, 0, 0.60) 82%,
    rgba(0, 0, 0, 0.35) 90%,
    rgba(0, 0, 0, 0.12) 97%,
    rgba(0, 0, 0, 0.00) 100%
  );

  mask-image: linear-gradient(to bottom,
    rgba(0, 0, 0, 1.00) 0%,
    rgba(0, 0, 0, 1.00) 65%,
    rgba(0, 0, 0, 0.85) 75%,
    rgba(0, 0, 0, 0.60) 82%,
    rgba(0, 0, 0, 0.35) 90%,
    rgba(0, 0, 0, 0.12) 97%,
    rgba(0, 0, 0, 0.00) 100%
  );
}


@keyframes blurColorShift {
  0% {
    background-color: rgba(255, 255, 255, 0.1);
  }
  25% {
    background-color: rgba(30, 255, 0, 0.1);
  }
  50% {
    background-color: rgba(62, 71, 240, 0.1);
  }
  75% {
    background-color: rgba(255, 0, 120, 0.1);
  }
  100% {
    background-color: rgba(255, 255, 255, 0.1);
  }
}


/* underline and fade on hover */

.fade {
  display: inline-block;
  transition: color 0.5s ease;
}

.hover-underline {
  display: inline-block;
  transition: color 0.5s ease;
}

.hover-underline:hover {
  cursor: pointer;
}

.hover-underline::after {
  will-change: transform;
  content: '';
  position: absolute;
  width: var(--underline-width, 100%);
  height: 1.7px;
  background: linear-gradient(to right, #1eff00, #3e47f0);
  left: 0px;
  transform: scaleX(0);
  transition: transform 0.5s ease;
  bottom: -3px;
  transform-origin: center;
  mix-blend-mode: difference;
}

.hover-underline:hover::after {
  transform: scaleX(1);
}

/* defining own font */

@font-face {
  font-family: 'jeebra';
  src: url('../fonts/jeebra.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'jeebraital';
  src: url('../fonts/jeebraital.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
  font-display: block;
}

@font-face {
  font-family: 'Anurati';
  src: url('../fonts/Anurati.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}


/* hide scroll bar */

.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

/* loading screen */

.loading-num{
  position: absolute;
  font-family: 'jeebraital', sans-serif;
  font-size: 20px;
  letter-spacing: 1px;
  color: #000000;
  top: 48.5%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.loading-container{
  position: fixed;
  top: 0%;
  opacity: 100;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  z-index: 999;
  transition: top 0.5s ease-out, opacity 0.5s ease-out;
}

.box1{
  position: absolute;
  top: 0%;
  left: 85%;
  height: 100%;
  width: 15%;
  background-color: #ffffff;
  z-index: 1000;
}

.box2{
  position: absolute;
  top: 0%;
  left: 0%;
  height: 100%;
  width: 15%;
  background-color: #ffffff;
  z-index: 1000;
}

.loading-bar{
  position: absolute;
  top: 51.5%;
  left: 10%;
  height: 2px;
  width: 170%;
}


.loading-colour{
  height: 100%;
  background: linear-gradient(to right, #1eff00, #3e47f0,#ffffff);
  transform: translateX(-100%);
}


.loading-disappear {
  top: 0%;
  opacity: 0;
}

/* Cursor */
html {
  cursor: none !important;
}

*,
*::before,
*::after {
  cursor: none !important;
}

.cursor {
  position: fixed;
  width: 0px;
  height: 0px;
  pointer-events: none;
  border-radius: 100%;
  z-index: 850;
  mix-blend-mode: difference;
  transform: translate(-50%, -50%);
  transition:
    width 0.5s ease,
    height 0.5s ease,
    background 0.5s ease,
    transform 0.5s ease;
  display: none;
  will-change: transform, width, height, background;
}

.cursor::before,
.cursor::after {
  content: '';
  position: absolute;
  background: white;
  top: 50%;
  left: 50%;
  transition:
    opacity 0.2s ease 0.25s,
    transform 0.2s ease;
  transform-origin: center;
}

/* Cross shape */
.cursor::before {
  width: 1px;
  height: 16px;
  transform: translate(-50%, -50%);
}

.cursor::after {
  width: 16px;
  height: 1px;
  transform: translate(-50%, -50%);
}

/* Circle state when hovering */
.cursor.pointer {
  width: 35px;
  height: 35px;
  background: white;
  border-radius: 50%;
}

/* Animate hiding the cross lines */
.cursor.pointer::before,
.cursor.pointer::after {
  opacity: 0;
  transform: scale(0);
  transition-delay: 0s;
}