html {
  scroll-behavior: smooth;
  cursor: url("Images/curshover.png") 0 0, default;
}

* {
  cursor: inherit;
}

body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  background: black;
}

header {
  position: absolute;
  top: 5%;
  width: 100%;
  text-align: center;
  font-family: skyrim;
  font-size: 38px;
  color: rgb(0, 0, 0);
  padding: 10px 0;
  z-index: 10;
  transition: all 1s ease;
  opacity: 0.7;
}

.scroll {
  position: relative;
  height: 100vh;
  overflow-y: auto;
  z-index: 100;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.scrolltext {
  position: relative;
  z-index: 10;
  padding: 100px 46px;
}

@media only screen and (max-width: 768px), (max-device-width: 768px) {
  header {
    font-size: 22px;
  }
}


/* Buttons */


.enter-btn-img {
  width: 180px;
  height: auto;
  display: block;
  filter: drop-shadow(0px 4px 12px rgba(0, 0, 0, 0.8));
}

@media (max-width: 768px) {
  .enter-btn-img {
    width: 165px;
  }
}

.enter-button {
  position: absolute;
  bottom: 15%;
  left: 50%;
  transform: translateX(-50%);
  background: none;
  border: none;
  color: rgb(195, 195, 195);
  font-size: 21px;
  z-index: 4;
  font-family: skyrim;
  transition: all 0.3s ease;
  letter-spacing: 0.15em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.95);
  animation: fadeInEnter 0.5s ease 0.5s both;
}

@keyframes fadeInEnter {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.back-button {
  position: fixed;
  top: 9%;
  font-size: 8px;
  left: 10%;
  transform: translateX(-50%);
  background: none;
  border: none;
  z-index: 500;
  opacity: 1;
  transition: all 0.3s ease;
  animation: fadeInEnter 0.8s ease 0.8s both;
}

.home-button {
  z-index: 500;
  transition: transform 1s ease;
  border: none;
  padding: 10px;
  background-color: #00000000;
}

.home-button:hover {
  transform: scale(1.25);
}

.enter-button:hover,
.back-button:hover {
  color: #bdbdbd85;
  transform: translateX(-50%) scale(1.1);
}

.arrow {
  width: 128px;
  transition: transform 8s ease;
  filter: drop-shadow(0 2px 14px rgba(0, 0, 0, 0.95));
  opacity: 0.9;
}

@media only screen and (max-width: 768px), (max-device-width: 768px) {
  .back-button {
    scale: 1.5;
    left: 24%;
    top: 7%;
  }

  .enter-button {
    font-size: 22px;
  }

  .arrow {
  width: 65px;
  }
}


/* Text */


p {
  font-family: skyrim;
  font-size: 30px;
  color: rgba(207, 207, 207, 0.689);
  background-color: #00000000;
  padding: 50px;
  margin: 15vh auto;
  max-width: 800px;
  text-align: center;
  box-shadow: 0 100px 40px rgba(0, 0, 0, 0.854);
}

#welcome,
#bourgeois {
  z-index: 500;
  pointer-events: none;
  font-family: skyrim;
}

#bourgeois {
  position: fixed;
  top: 50%;
  font-size: 280px;
  color: white;
  transform: translate(-50%, -50%);
  left: 50%;
  opacity: 0;
}

#welcome {
  position: fixed;
  top: 50%;
  transition: opacity 4s ease;
  transform: translate(-50%, -50%);
  left: 50%;
  opacity: 0;
}

#welcome video {
  width: 260px;
  display: block;
}

.neon-text {
  color: #fff;
  text-shadow:
    0 0 5px #fff,
    0 0 10px #fff,
    0 0 20px #fff,
    0 0 40px rgb(210, 210, 210),
    0 0 80px rgb(170, 168, 168),
    0 0 90px rgb(160, 160, 160),
    0 0 100px rgb(67, 67, 67),
    0 0 150px rgb(43, 43, 43);
}

.neon-header {
  color: #000000;
  text-shadow:
    0 0 5px #c5c5c587,
    0 0 10px #a5a5a58a,
    0 0 20px #71717181,
    0 0 40px rgba(97, 97, 97, 0.499),
    0 0 80px rgba(67, 66, 66, 0.498),
    0 0 90px rgba(58, 58, 58, 0.508),
    0 0 100px rgba(37, 37, 37, 0.532),
    0 0 150px rgba(43, 43, 43, 0.5);
}

#bourgeois.flicker {
  animation: flicker 0.5s linear;
}


@keyframes dots {
  0%, 20% {
    color: rgba(0,0,0,0);
    text-shadow:
      .25em 0 0 rgba(0,0,0,0),
      .5em 0 0 rgba(0,0,0,0);}
  40% {
    color: white;
    text-shadow:
      .25em 0 0 rgba(0,0,0,0),
      .5em 0 0 rgba(0,0,0,0);}
  60% {
    text-shadow:
      .25em 0 0 white,
      .5em 0 0 rgba(0,0,0,0);}
  80%, 100% {
    text-shadow:
      .25em 0 0 white,
      .5em 0 0 white;}}

@keyframes appear {
  to {
    opacity: 1;
  }
}

@keyframes flicker {
  0%   { opacity: 0; }
  10%  { opacity: 0.8; }
  20%  { opacity: 0; }
  30%  { opacity: 0.8; }
  40%  { opacity: 0; }
  50%  { opacity: 0.8; }
  60%  { opacity: 0; }
  70%  { opacity: 0.8; }
  80%  { opacity: 0; }
  90%  { opacity: 0.8; }
  100% { opacity: 0; }
}

@font-face {
  font-family: 'skyrim';
  src: url(Fonts/DarkXShadowSkyrim.ttf);
}

@font-face {
  font-family: 'morris';
  src: url(Fonts/MorrisRoman-Black.ttf);
}

@media only screen and (max-width: 800px), (max-device-width: 800px) {
 p {
  font-size: 30px;
 }
 #welcome { 
  transition: opacity 8s ease;
  color: rgba(255, 255, 255, 0.974);
  font-size: 45px;
}
 #bourgeois {
  font-size: 80px;
  color: white;
}
}


/* Background */


.glitch {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  opacity: 0.22;
  z-index: 3;
  pointer-events: none;
  will-change: transform;
}

.castle {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  opacity: 0.95;
  filter: brightness(1.4);
  z-index: 2;
  pointer-events: none;
}

.fog {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 120vh;
  width: auto;
  object-fit: cover;
  z-index: 4;
  opacity: 0.7;
  pointer-events: none;
}

.fog2 {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 120vh;
  width: auto;
  object-fit: cover;
  z-index: 4;
  opacity: 0.75;
  pointer-events: none;
  will-change: transform;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  background-color: black;
  pointer-events: none;
  opacity: 0.25;
  z-index: 9;
}

#fade-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: black;
  opacity: 0;
  pointer-events: none;
  transition: opacity 2s ease;
  z-index: 999;
}

#fade {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: black;
  opacity: 1;
  pointer-events: none;
  transition: opacity 5s ease;
  z-index: 1000;
}

#black-fade {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: black;
  opacity: 1;
  pointer-events: none;
  transition: opacity 4s ease 3.5s;
  z-index: 50;
}


/* Contents */


.logo {
  position: absolute;
  width: 70vw;
  max-width: 400px;
  aspect-ratio: 1 / 1;
  top: 15%;
  left: 50%;
  transform: translate(-50%);
  z-index: 8;
  transition: all 1s ease;
}  

.icons {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 85%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5vw;
  z-index: 10;
}

.icons img {
  max-width: 25vw;
  max-height: 25vw;
}

.left,
.right {
  width: 325px;
  height: auto;
  opacity: 0.8;
}

.middle {
  width: 450px;
  height: auto;
  z-index: 1;
}

@media (max-device-width: 700px), (max-width: 700px) {
  .icons {
    flex-direction: column;
    align-items: center;
  }

  .icons img {
  max-width: 50vw;
  max-height: 50vw;
  }

  .logo {
  width: 90vw;
  max-width: 90%;
  }
  
  .left,
  .right {
    width: 40vw;
  }

  .middle {
    width: 60vw;
    margin-bottom: 20px;
  }

  .icons > .home-button {
    margin: 10px 0;
  }

  .icons > .home-button.left,
  .icons > .home-button.right {
    display: inline-block;
    margin: 0 10px;
  }
}


/* Border */


#site-border {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-image: url('website%20border%202.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 5;
  margin: 0;
  padding: 0;
  filter: brightness(0.6);
  opacity: 0;
  transform: scale(1.01);
  transform-origin: center center;
}

#site-border::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('phone%20border%20.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.6s ease;
}

@media (orientation: portrait) and (max-width: 768px) {
  #site-border {
    background-image: none;
  }
  #site-border::after {
    opacity: 1;
  }
}


/* About Page */


.booktext {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: 10;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse at top left, black 40%, transparent 70%);
  mask-image: radial-gradient(ellipse at top left, black 40%, transparent 70%);
  -webkit-mask-size: 0% 0%;
  mask-size: 0% 0%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: revealTopLeft 25s ease-out forwards;
}

@keyframes revealTopLeft {
  0%   { -webkit-mask-size: 0% 0%;   mask-size: 0% 0%; }
  100% { -webkit-mask-size: 350% 350%; mask-size: 350% 350%; }
}

#booktext-1 { animation-delay: 0s; }
#booktext-2 { animation-delay: 2.5s; }
#booktext-3 { animation-delay: 3.5s; }

.book-container {
  position: fixed;
  top: 49%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

.book-image {
  max-width: 55vw;
  max-height: 55vh;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 40px rgba(0, 0, 0, 0.9));
}

@media (max-width: 768px) {
  .book-image {
    max-width: 95vw;
    max-height: 90vh;
  }
}


/* Bug Video */


.bug-video {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: auto;
  z-index: 10;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: brightness(2.5);
}


/* Rain */


.rain-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  pointer-events: none;
  z-index: 5;
  mix-blend-mode: screen;
  opacity: 0.2;
  will-change: transform;
}


/* Brickwall */


.brickwall-scroll {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: 2;
  pointer-events: none;
  will-change: transform;
  filter: brightness(0.72) contrast(1.1) saturate(0.6);
}

.brickwall-img {
  display: block;
  width: 100vw;
  height: auto;
}

.mobile-wall { display: none; }

@media (max-width: 768px) {
  .desktop-wall { display: none; }
  .mobile-wall { display: block; }
}

.brickwall-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.6) 0%,
    rgba(0, 0, 0, 0) 25%,
    rgba(0, 0, 0, 0) 75%,
    rgba(0, 0, 0, 0.6) 100%
  );
  pointer-events: none;
  z-index: 3;
}


/* Vignette */


.vignette {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.7) 100%);
  pointer-events: none;
  z-index: 150;
  display: none;
}


/* Images */


.image-stack {
  position: relative;
  margin: 320px auto;
  width: 80vw;
  z-index: 100;
  transition: all 1.5s ease;
}

.img-wrapper {
  position: relative;
  display: block;
  width: fit-content;
  margin-top: 2vw;
  transition: transform 1s ease;
}

.img-wrapper.lhs:hover {
  transform: translateX(62%);
  z-index: 10;
}

.img-wrapper.rhs:hover {
  transform: translateX(-62%);
  z-index: 10;
}

.img-wrapper:first-child {
  margin-top: 0;
}

.img-wrapper.lhs {
  margin-left: 1.5vw;
}

.img-wrapper.rhs {
  margin-left: 44vw;
}

.img-wrapper.img-hidden-left {
  opacity: 0;
  transform: translateX(-80px);
}

.img-wrapper.img-hidden-right {
  opacity: 0;
  transform: translateX(80px);
}

.img-wrapper.img-visible {
  opacity: 1;
  transform: translateX(0);
}


.img-backboard {
  display: none;
  position: absolute;
  top: -14px;
  left: -14px;
  right: -14px;
  bottom: -14px;
  background-color: #0a0a0a;
  background-image: url('Images/Black-Gravel.jpg');
  background-size: cover;
  background-position: center;
  z-index: -1;
  transition: transform 1s ease, filter 1.8s ease, opacity 1.8s ease;
}

.img-wrapper.lhs:hover .img-backboard {
  transform: translateX(-14vw);
  filter: brightness(0.65);
  opacity: 0.8;
}

.img-wrapper.rhs:hover .img-backboard {
  transform: translateX(14vw);
  filter: brightness(0.65);
  opacity: 0.8;
}

.image-stack img {
  will-change: transform, opacity;
  display: block;
  position: relative;
  width: 27vw;
  max-width: 100%;
  opacity: 1;
  transition: transform 1s ease, box-shadow 1s ease;
}

.image-stack img:hover {
  transform: scale(1.4);
  z-index: 10;
}

.img-wrapper.rhs img {
  width: 42vw;
}

.image-stack .img-wrapper:nth-child(1) img  { width: 24vw; }
.image-stack .img-wrapper:nth-child(2) img  { width: 44vw; }
.image-stack .img-wrapper:nth-child(3) img  { width: 29vw; }
.image-stack .img-wrapper:nth-child(4) img  { width: 38vw; }
.image-stack .img-wrapper:nth-child(5) img  { width: 26vw; }
.image-stack .img-wrapper:nth-child(6) img  { width: 46vw; }
.image-stack .img-wrapper:nth-child(7) img  { width: 31vw; }
.image-stack .img-wrapper:nth-child(8) img  { width: 40vw; }
.image-stack .img-wrapper:nth-child(9) img  { width: 22vw; }
.image-stack .img-wrapper:nth-child(10) img { width: 48vw; }

.img-wrapper.rhs:hover img {
  transform: scale(1.5);
}

@media only screen and (max-width: 768px), (max-device-width: 768px) {
  .image-stack {
    margin: 150px auto;
} 
  .image-stack img:hover {
    transform: scale(2);
}
  .image-stack img {
    margin-top: 20vw;
    width: 40vw;
  }

  .image-stack .img-wrapper:nth-child(1) img  { width: 52vw; }
  .image-stack .img-wrapper:nth-child(2) img  { width: 72vw; }
  .image-stack .img-wrapper:nth-child(3) img  { width: 58vw; }
  .image-stack .img-wrapper:nth-child(4) img  { width: 65vw; }
  .image-stack .img-wrapper:nth-child(5) img  { width: 50vw; }
  .image-stack .img-wrapper:nth-child(6) img  { width: 75vw; }
  .image-stack .img-wrapper:nth-child(7) img  { width: 60vw; }
  .image-stack .img-wrapper:nth-child(8) img  { width: 68vw; }
  .image-stack .img-wrapper:nth-child(9) img  { width: 48vw; }
  .image-stack .img-wrapper:nth-child(10) img { width: 78vw; }
}

.lhs {
  margin-left: -35%;
}

.rhs {
  margin-left: 35%;
}