/* add font Nohemi-ExtraLight */
@font-face {
  font-family: Nohemi-ExtraLight;
  src: url(Web-TT/Nohemi-ExtraLight.woff2);
}

@font-face {
  font-family: Nohemi-Light;
  src: url(Web-TT/Nohemi-Light.woff2);
}

@font-face {
  font-family: Neue Regrade;
  src: url(Fonts/Neue_Regrade/Neue\ Regrade\ Light.woff2);
}

/* body styling */
html, body {
  font-family: Neue Regrade;
  font-size: medium;
  cursor: none;
}



/* size of the monitor */
.screenSpace {
  display: flex;
  min-height: 100vh;
  width: 100%;
}

.vertical-flexbox {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.spread {
  display: flex;
  flex-direction: row;
  /* decides in what direction to flex.  row for horizontal | column for vertical */
  flex-wrap: wrap;
  /* "wrap" allows items to flood over the flexbox */
  justify-content: center;
  /* tells where the content is placed horizontally.  start | center | space-between | space-around*/
  align-items: start;
  align-content: center;
  /* tells where the content is placed vertically.  stretch | flex-start | center */
  /*   align-content: space-between; */
  /* works like justify content but for flex-wrap.  | space-between |  */
  padding-bottom: 50px;
  padding-top: 50px;
  width: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  opacity: 0;
  filter: blur(5px);
  transition: all 500ms;
  transition-delay: 100ms;
  
}

.show{
  filter: blur(0px);
  opacity: 1;

}


@keyframes slideIn {
  from {
    transform: translateY(45%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.flexbox-item {
  width: 50vh;
  min-width: 700px;
  margin: 0;
  margin-bottom: -5px;
  flex-grow: 1;
  position: relative;
  opacity: 0;
}

.animate {
  animation: slideIn .8s ease forwards;
}

.delay {
  animation-delay: .1s;
}

.imageSelect,
.image {
  width: 100%;
  height: 100%;
  transition: 0.3s;
}

.imageSelect.hover {
  /* cursor: pointer; */
  filter: blur(1px) grayscale(100%);
}

#video-container1,
#video-container2,
#video-container3,
#video-container4,
#video-container4-1,
#video-container5,
#video-container6 {
  display: none;
}

/* .videoHoverContainer {
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease;
}
.videoHoverContainer:hover {
  transform: scale(1.02);
} */
.vid {
  width: 100%;
  display: block;
}

#video-container {
  display: none;
}

trigger+div {
  display: none;
  transition: color 0.3;
}

trigger:hover+div {
  height: 10%;
  width: 100%;
  display: block;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 45%;
  font-weight: 200;
}

.flexbox-multi-item {
  /*   margin-top: 100px; */
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
  flex-wrap: wrap;
}

/*.video-play-notification {
  cursor: pointer;
}*/

/*.video-play-notification:hover {
  cursor: pointer;
}*/

.text,
#current-time,
#current-date {
  display: flex;
  font-weight: 100;
  color: white;
  flex-direction: row;
}

#current-time,
#current-date {
  width: 70px;
  justify-content: end;
  scroll-snap-align: start;
}


/* scroll snapping */
html {
  scroll-snap-type: y mandatory;
}

/* Create a dot that will be the custom cursor */
/* Hide the default cursor */
body {
  cursor: none;
}

/* Create a dot that will be the custom cursor */
.cursor-dot {
  width: 15px;
  height: 15px;
  background-color: rgb(255, 255, 255); /* Ensure dot is visible when not hovering */
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: 10;
  transform: translate(-50%, -50%);
  transition: width 0.2s ease, height 0.2s ease, background-color 0.2s ease;
  filter: drop-shadow(0px 0px 4px black);
 
  display: flex;
  justify-content: center;
  align-items: center;

  font-family: Neue Regrade;
  font-size: medium;

  /* Ensure the dot is visible always */
  opacity: 1; /* Keep the dot visible at all times */

  border-width: 2px;
  border-color: black;
}

/* Style for the text inside the dot */
.cursor-text {
  font-family: Neue Regrade;
  font-size: medium;
  font-weight: bold;
  color: transparent; /* Hide text initially */
  transition: color 0.2s ease; /* Transition for text color */
  z-index: 1000000;
}

/* When hovering over imageSelect, show text */
.cursor-dot.show-text .cursor-text {
  mix-blend-mode: normal;
  color: rgb(255, 255, 255); /* Show text when hovering */
  opacity: 1;
}

/* Enlarge dot on hover */
.cursor-dot.show-text {
  width: 200px; /* Increase size */
  height: 200px; /* Increase size */
}

/* Specific hover styles for six different colors */
.cursor-dot.hover-color-0 {
  background-color: rgb(219, 132, 55);
}

.cursor-dot.hover-color-1 {
  background-color: rgb(239, 62, 35);
}

.cursor-dot.hover-color-2 {
  /* background-color: rgb(147, 166, 190); */
  background-color: rgb(196, 168, 126);
}

.cursor-dot.hover-color-3 {
  background-color: rgb(172, 104, 62);
}

.cursor-dot.hover-color-4 {
  background-color: rgb(172, 104, 62);
}

.cursor-dot.hover-color-6 {
  background-color: rgb(105, 202, 211);
}

.cursor-dot.hover-color-5 {
  background-color: rgb(221, 201, 138);
}

.videoHoverContainer:hover .cursor-dot {
  background-color: black;
}