body {
      height: 100%;
      overflow-x: hidden;
    }
    .navbar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 999;
    }

.parallax {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.parallax:before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  right: -50%;
  bottom: -50%;
  z-index: -1;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  animation: parallax 30s infinite alternate linear;
}

@keyframes parallax {
  0% {
    transform: translate(-1%, -1%);
  }
  100% {
    transform: translate(1%, 1%);
  }
}

.globe-container {
  width: 200px;
  height: 200px;
  position: fixed;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.globe {
  display: inline-block;
  max-width: 100%;
  height: auto;
  animation-name: spin;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  position: relative; /* to position the shadows */

}

.globe::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, transparent, black);
  pointer-events: none;
  transform-origin: -10% 10%;
  transform: rotateY(-90deg); /* to position the shadow */
  opacity: 0.5; /* set opacity to create a transparent effect */
  filter: blur(5px); /* apply a blur effect for the shadow */
  border-radius: 0%; /* this was added */
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  
  to {
    transform: rotate(360deg);
  }
}

.parallax2 {
   width: 100vw;
  height: 200px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  
}

.clock {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  font-size: 24px;
  color: white;
  text-shadow: 0 0 5px black; /* add a slight text shadow for visibility */
}

@media screen and (max-width: 768px) {
  /* adjust globe size and position for smaller screens */
  .globe-container {
    width: 150px;
    height: 150px;
    top: 30%;
  } 
}

@font-face {
  font-family: 'Patrick Hand SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/PatrickHandSC.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Daruma';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/darumadropone.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */
@font-face {
  font-family: 'Freckle Face';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/FreckleFace.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */
@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/Pacifico.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */
@font-face {
  font-family: 'Averia Serif Libre';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/AveriaSerifLibre.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(../fonts/Montserrat_cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(../fonts/Montserrat.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}