/* ________________ load fonts _________________ */
@font-face {
  font-family: "SpaceGrotesk-Light";
  src: url("fonts/SpaceGrotesk-Light.ttf") format("truetype");
}

@font-face {
  font-family: "SpaceGrotesk-Medium";
  src: url("fonts/SpaceGrotesk-Medium.ttf") format("truetype");
}

@font-face {
  font-family: "SpaceGrotesk-Bold";
  src: url("fonts/SpaceGrotesk-Bold.ttf") format("truetype");
}

/* ________________ styles for body, header and footer _________________ */

.header {
  display: flex;
  gap: 12vw;
  position: fixed;
  background: transparent;
  z-index: 1000;
  transition: top 0.3s ease-in-out;
}

body {
  margin: 15px;
  font-family: SpaceGrotesk-Medium;
  overflow-x: hidden;
  cursor: none;
}

.body-blck {
  margin: 12px;
  font-family: SpaceGrotesk-Medium;
  overflow-x: hidden;
  background-color: black;
  cursor: none;
}

body.stop-scroll {
  overflow: hidden;
}

.overflow-hidden {
  overflow-y: hidden;
  height: 100%;
}

a {
  text-decoration: none;
}

footer {
  background: transparent;
  height: 2vh;
  margin-bottom: 20px;
}

/* footer > :last-child {
  justify-self: end;
} */

.custom-cursor {
  position: fixed;
  width: 20px;
  height: 20px;
  background-color: silver;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: width 0.2s ease, height 0.2s ease;
  z-index: 9999;
  mix-blend-mode: exclusion;
}

a,
button,
img,
video {
  cursor: none;
}

a:hover ~ .custom-cursor,
button:hover ~ .custom-cursor {
  width: 14px;
  height: 14px;
}

body::-webkit-scrollbar {
  display: none;
}

/* ________________ styles for text _________________ */

.title01-big {
  font-family: SpaceGrotesk-Bold;
  text-decoration: none;
  font-size: 12vw;
  color: black;
  text-align: center;
  z-index: 1;
  opacity: 1;
  position: absolute;
  top: 13%;
  left: 50%;
  transform: translate(-50%);
  transition: opacity 0.5s ease;
}

.title02-section {
  font-family: SpaceGrotesk-Bold;
  text-decoration: none;
  font-size: 11.111vw;
  color: black;
  z-index: 2;
  opacity: 1;
  height: 3.5vh;
  margin-top: -0.5vh;
  /* transition: opacity 0.5s ease;
  mix-blend-mode: exclusion; */
}

.title02-section-back {
  font-family: SpaceGrotesk-Bold;
  text-decoration: none;
  font-size: 11.111vw;
  color: black;
  z-index: 2;
  opacity: 1;
  height: 24vh;
  margin-top: -4vh;
}

.title02-section-back:hover,
.title02-section-back-small:hover,
.title02-section-back-blck:hover,
.title02-section-back-blck02:hover {
  font-family: SpaceGrotesk-Light;
}

.title03-section-sub:hover,
.title03-section-sub-small:hover,
.nav-text:hover,
.nav-text-blck:hover {
  font-family: SpaceGrotesk-Bold;
}

.hover:hover {
  font-family: SpaceGrotesk-Bold;
}

.title02-section-back-small {
  font-family: SpaceGrotesk-Bold;
  text-decoration: none;
  font-size: 8vw;
  color: black;
  z-index: 2;
  opacity: 1;
  height: 24vh;
  margin-top: -4vh;
}

.title02-section-back-blck {
  font-family: SpaceGrotesk-Bold;
  text-decoration: none;
  font-size: 11.111vw;
  color: white;
  z-index: 2;
  opacity: 1;
  height: 24vh;
  margin-top: -4vh;
}

.title02-section-back-blck02 {
  font-family: SpaceGrotesk-Bold;
  text-decoration: none;
  font-size: 8vw;
  color: white;
  z-index: 2;
  opacity: 1;
  height: 24vh;
  margin-top: -4vh;
}

.title03-section-sub,
.title03-section-sub-small {
  font-family: SpaceGrotesk-Light;
  text-decoration: none;
  font-size: 11.111vw;
  color: black;
  z-index: 2;
  opacity: 1;
  height: 20vh;
  margin-top: -3vh;
  /* transition: opacity 0.5s ease; */
}

.title04-float {
  font-family: SpaceGrotesk-Medium;
  text-decoration: none;
  letter-spacing: 0.06em;
  font-size: 1.235vw;
  color: black;
}

.title04-float-blck {
  font-family: SpaceGrotesk-Medium;
  text-decoration: none;
  letter-spacing: 0.06em;
  font-size: 1.235vw;
  color: white;
}

.float {
  font-family: SpaceGrotesk-Light;
  text-decoration: none;
  letter-spacing: 0.06em;
  font-size: 1.235vw;
  color: black;
}

.float-blck {
  font-family: SpaceGrotesk-Light;
  text-decoration: none;
  letter-spacing: 0.06em;
  font-size: 1.235vw;
  color: white;
}

.nav-text {
  font-family: SpaceGrotesk-Medium;
  text-decoration: none;
  letter-spacing: 0.06em;
  font-size: 0.972vw;
  color: black;
  background-color: white;
  letter-spacing: 1.1pt;
}

.nav-text-blck {
  font-family: SpaceGrotesk-Medium;
  text-decoration: none;
  letter-spacing: 0.06em;
  font-size: 0.972vw;
  color: white;
  background-color: black;
  letter-spacing: 1.1pt;
}

/* ________________ styles for videos _________________ */

.aspect-cheat {
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

img,
video {
  border-radius: 16px;
  border: 1px solid white;
}

video:fullscreen {
  width: 100vw;
  height: 100vh;
  object-fit: contain;
  background-color: black;
  border: none;
}

#video-container,
#video-container02 {
  position: relative;
  margin: 0 auto;
}

.background-video {
  width: 100%;
  margin-top: 40vh;
  z-index: 2;
  opacity: 1;
  mix-blend-mode: multiply;
  transition: opacity 0.5s ease;
}

.background-video::-webkit-media-controls-fullscreen-button {
  display: none !important;
}

.noSound::-webkit-media-controls-mute-button {
  display: none !important;
}

.noSound::-webkit-media-controls-volume-slider {
  display: none !important;
}

/* ________________ styles for mobile _________________ */

@media (max-width: 768px) {
  body,
  .body-blck {
    -webkit-overflow-scrolling: touch;
  }
  .delete {
    display: none !important;
  }

  .header {
    gap: 12vw;
    position: fixed;
    background: transparent;
    z-index: 1000;
    display: block;
  }

  .fixed {
    gap: 12vw;
    position: absolute;
    background: transparent;
    z-index: 1000;
    margin-right: 2vw;
    display: block;
  }

  .footer {
    display: block;
    margin-left: 20px;
  }

  .footer > :last-child {
    justify-self: start;
  }

  .close-button {
    position: absolute;
    top: -9rem;
    right: 1rem;
    background: none;
    border: none;
  }

  .custom-cursor {
    display: none;
  }

  .mobile-home-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-image: url("projekte/video/01-eos-visuals/07.jpg");
    background-size: cover;
    background-position: center;
    z-index: -1;
    opacity: 1;
    transition: opacity 0.3s ease-out;
  }

  .title01-big {
    font-size: 34vw;
    width: 90%;
    overflow-wrap: break-word;
    line-height: 84%;
    text-align: left;
    margin-top: 10vh;
    color: white;
  }

  .nav-text,
  .nav-text-blck {
    font-size: 3.6vw;
  }

  .title02-section-blck,
  .title02-section-back,
  .title02-section-back-blck {
    align-self: flex-end !important;
    text-align: right;
    font-size: 8vw;
    margin-top: 4vh;
    margin-bottom: 20px;
    overflow-wrap: break-word;
    line-height: 6vh;
    height: 100%;
  }

  .title02-section {
    margin-top: 8vh;
    text-align: right;
  }

  .title02-section-back-blck02,
  .title02-section-back-small {
    align-self: flex-end !important;
    text-align: right;
    font-size: 8vw;
    margin-top: 20px;
    margin-bottom: 20px;
    overflow-wrap: break-word;
    line-height: 6vh;
    height: 100%;
    width: 100%;
  }

  .title02-section-blck::before,
  .title02-section-back::before,
  .title02-section-back-blck::before {
    content: "↖";
    font-size: 48px;
  }

  .title02-section-back-blck02::before,
  .title02-section-back-small::before {
    content: "↖︎";
    font-size: 40px;
  }

  .title03-section-sub {
    margin-top: 2vh;
    margin-bottom: -16vh;
    line-height: 1vh;
    font-size: 12vw;
    text-align: right;
    line-height: 4vh;
  }

  .title03-section-sub-small {
    font-family: SpaceGrotesk-Light;
    text-decoration: none;
    font-size: 11.111vw;
    color: black;
    z-index: 2;
    opacity: 1;
    height: 20vh;
    margin-top: 2vh;
    margin-bottom: -16vh;
    line-height: 1vh;
    text-align: right;
    line-height: 4vh;
  }

  .float,
  .float-blck,
  .title04-float,
  .title04-float-blck {
    font-size: 4vw;
  }

  .empty {
    margin-bottom: 58vh;
  }

  .small {
    width: 50%;
  }

  .rotate {
    transform: rotate(90deg);
    height: 39vh;
  }
}