:root {
  --color1: hsl(312, 39%, 39%);
  --color2: hsl(110, 100%, 50%);
  --color3: hsl(233, 97%, 57%);
  --color4: hsl(18, 76%, 35%);
  --color5: hsl(110, 100%, 50%);
  --color6: hsl(64, 100%, 50%);
  --color7: hsl(283, 90%, 55%);
  --color8: #242424;
  --color9: hsl(298, 37%, 50%);

  --bg-size: 400%;
}

@font-face {
  font-family: "Title";
  src: url("font/New-Normal-Regular.otf") format("truetype");
}

@font-face {
  font-family: "Base";
  src: url("font/Handjet-Light.ttf") format("truetype");
}


@font-face {
  font-family: "Description";
  src: url("font/Vollkorn-VariableFont_wght.ttf") format("truetype");
}


@media (prefers-reduced-motion: no-preference) {
  .anim-text {
    animation: move-bg .5s linear infinite;
  }
  @keyframes move-bg {
    to {
      background-position: 0% 800%;
    }
  }
}

@media screen and (min-width: 800px) {
  .about-header {
    padding-left: 13vw;
    padding-right: 13vw;
  }


  .about {
    padding-left: 25vw;
    padding-right: 25vw;
  } 


  .title {
    font-size: 15rem;
  }

}

@media screen and (max-width: 800px) {
  .title {
    font-size: 15rem;
  }

  .about {
    padding-left: 2vw;
    padding-right: 2vw;
  } 

}


/* Reset and base styles  */
* {
  padding: 0px;
  margin: 0px;
  border: none;
}

/* *,
*::before,
*::after {
  box-sizing: border-box;
}

a,
a:link,
a:visited {
  text-decoration: none;
}
a:hover {
  text-decoration: none;
} */

img {
  vertical-align: top;
}

img,
svg {
  max-width: 100%;
  height: auto;
}

button {
  background-color: transparent;
  cursor: pointer;
}

body {
  font-family: "Base";
  background-color: black;
  text-align: center;
  color: var(--color7);
}

.anim-text {
  cursor: pointer;
  display: block;
  background: linear-gradient( 1deg,var(--color9), var(--color7), var(--color3), var(--color4)) 0% 0% / 100% 80%;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  animation: move-bg .8s infinite linear;
}

.anim-btn {
  cursor: pointer;
  display: block;
  background: linear-gradient( 1deg, var(--color4), var(--color3)) 0% 0% / 100% 80%;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  animation: move-bg 2s infinite linear;
}

.anim-slow {
  animation: move-bg 10s infinite linear;
}

.title {
  line-height: 200px;
  font-family: "Title";
  margin-top: 50px;
  margin-bottom: 50px;
  cursor: pointer;
  display: block;
  overflow: hidden;
  font-size: 15rem;
  letter-spacing: -4px;
  text-transform: uppercase;
  text-align: center;
}

.about-header {
  font-size: 3rem;
}


.about {
  font-size: 1.5rem;
}

.enter {
  cursor: pointer;
  display: block;
  overflow: hidden;
  font-family: "Title";
  font-size: 5rem;
  letter-spacing: 5px;
  text-align: center;
  margin-top: 50px;
  margin-bottom: 50px;
}

.photo {
  cursor: pointer;
  display: block;
  overflow: hidden;
  font-family: "Title";
  font-size: 4rem;
  z-index: 1;
  position: fixed;
}

.left {
  top: 1vh;
  left: 2vh;
}

.right {
  top: 1vh;
  right: 2vh;
}

.bottom {
  right: 2vh;
  bottom: 1vh;
}



#wrapper {
	/* position: absolute; */
	z-index: 1;
	top: 45px;
	bottom: 48px;
	left: 0;
	width: 100%;
	background: #ccc;
	overflow: hidden;
}

#scroller {
	position: absolute;
	/* z-index: 1; */
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	width: 10700px;
	height: 100%;
	background-color: black;
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;
	-o-text-size-adjust: none;
	text-size-adjust: none;
}



.awrap {
  display: flex;
  justify-content: center;
  align-content: center;
  
  flex-direction: column;
}



.scroll {
  display: block;
  border: 0px solid red;
  margin-top: 5px;
  overflow-y: scroll;
  overflow-y: hidden;
}




.galery-wrapper {
  background-color: black;
  color: white;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.image-wrapper {
  display: flex;
  justify-content: center;
}

.navbar-description {
  width: 25vw;
  background-color: var(--color8);
}


.navbar {
  padding: 10px;
  display: inline-flex;
  justify-content: space-around;
  /* height: 100px; */
}


#photo {
  width: 74vw;
  height: 100vh;
  position: relative;
}

.display {
  overflow-x: auto; 
  scroll-behavior: smooth; 
  background-color: #c02eff;

  background-image: url("image/back.jpg");
	background-position: bottom;
  filter: url("#turbulence");
  overflow: hidden;
  width: 100%;
}

#exposition {
  width: 100vw;
  height: 100vh;

  /* width: 100%;
  height: 100%; */

	/* height: 1080px; */
	/* width: 10744px; */
	/* width: 10700px; */
  scroll-behavior: smooth;
}


.exposition-back {
	object-fit:none;
	background-image: url('./image/back.jpg');
	background-position: bottom;
	height: 1080px;
	/* width: 10744px; */
	width: 10700px;
}

#base {
  /* width: 100vw; */
  width: 100%;
  /* height: 100vh; */
  scroll-behavior: smooth;

  overflow: hidden;
}

.horizontal-scroll{ 
  overflow-x: auto; 
  scroll-behavior: smooth; 
}

.lsd {
  filter: url("#turbulence");
}

br::after {
  text-indent: 25px; 
}

#description {
  font-family: "Description";
  font-size: 1.3rem;
  overflow: scroll;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 25px;
  text-align: left;
  overflow-x: hidden;
}

#description::-webkit-scrollbar{
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
#description {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.scroll-container {
  border: 3px solid black;
  border-radius: 5px;
  height: 100px;
  overflow: hidden;
}

.navbar-wrapper {
  display: flex;
  align-content: flex-end;
  flex-direction: column;
  height: 100vh;
}


.lux {
  position: absolute;
  display: block;
  width: 200%;
  height: 200%;
  background-image: radial-gradient(
    circle at center,
    transparent,
    #000000ec 20%,
    black
  );
}

.shine {
  animation: shine 3s infinite;
}

@keyframes shine {
  0%,
  100% {
    filter: invert(50%);
  }
  50% {
    filter: invert(0%);
  }
}

.shine-glitch {
  --time: 0.3s;
  filter: url(#alpha);
  mix-blend-mode: lighten;
  animation-name: imgGlitch;
  animation-duration: var(--time);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes imgGlitch {
  0% {
    clip-path: path("M400,21.66V10.49h-116.29V0H39.36V54.56H0v36.09H101.25v9.77H.23v5.52H101.25v14.44H22.77v15.29H13.82v39.06H.23v6.79H13.82v15.29h60.63v20.81H10.25v51.17H.23v26.75H61.69v30.57h-29.35v12.1H0v30.57H22.77v31.36H400v-25.41h-31.43v-5.95h31.43v-8.28h-31.43v-15.92h-9.57v-14.65h32.56v-13.38h8.44v-10.83h-8.44v-52.23h-79.37v-21.02h69.78v-7.64h18.03v-24.7h-8.44v-52.58h-22.99v-11.89h31.43v-15.29h-31.43v-36.3h31.43V35.03h-116.29v-13.38h116.29ZM138.57,120.38h15.14v15.29h-15.14v-15.29ZM74.45,386.85v-18.08h39.56v14.01h144.19v4.06H74.45Zm89.32-42.28v-6.37h-34.45v-12.1h48.49v18.47h-14.04Zm56.73-25.48h-5.05v-2.55h5.05v2.55Zm-5.05-13.38v-10.19h5.05v10.19h-5.05Z");
  }
  50% {
    clip-path: path("M398.2,238.77v-14.06h2.28v-24.74h-2.28v-37.76h-8.45v-4.24H215.93v-3.23h178.76v-61.25H254.7v-3.19h33.11v-11.59h102.55V29.58h-52.25V0H93.75V13.18H0v11.19H39.84v29.77H.48v36.15H39.84v28.22H18.22v6.81h5.04v10.06H14.3v61.25h60.63v2.12H1.05v56.57H29.76v21.71H96.62v3.81h4.79v7.66h-3.83v-6.14H.6v14.67H62.17v13.8H.48v30.62H82.37v3.83h35.94v8.77H15.17v13.3H118.31v8.77H.48v23.84H244.84v-12.97h134.3v-18.11h21.34v-8.29h-21.34v-26.19h19.02v-25.45h-42.19v-26.19h18.5v-1.93h26.01v-10.85h-26.01v-25.51h-71.49v-5.73h95.22Zm-171.06-75.27v14.95h-11.21v-14.95h11.21Zm-88.09-38.17h38.45v-5.25h15.55v15.31h-54.01v-10.06Zm76.88,189.34v-3.83h40.42v14.92h-10.22v-11.09h-30.21Zm-45.94,30.62h7.52v8.77h-7.52v-8.77Zm0,22.07h7.52v8.77h-7.52v-8.77Z");
  }
  100% {
    clip-path: path("M400.21,112.61v-15.31H234.82v-9.04h52.51v-6.59h112.67V32.54h-33.6V6.06h-95.3V0H69.47V2.36H29.34V13.55h40.13v7.51H32.34v20.87h-12.38v10.18H0v36.15H19.96v49.37h18.2v23.05H13.82v11.8H.23v6.81H13.82v37.96h18.52v22.74H13.14v13.3h19.2v8.96h106.23v4.44H.23v26.8H61.69v30.62h-29.35v14.67H114.47v11.23H17.55v30.62h18.3v17.63h51.68v-17.63h26.94v11.98h143.72v5.65h141.81v-25.45h-114.47v-5.21h101.25v-.75h13.22v-8.29h-13.22v-29.24h-17.58v-10.32h30.72v-10.85h-30.72v-5.11h30.72v-31.26h-16.99v-29.1h17.08v-24.74h-60.14v-6.74h-24.11v-8.11h70.6v-61.25h-20.92v-29.24h34.78Zm-164.97,180.87v-8.94h88.66v12.37h-108.46v-3.43h19.79Zm-50.53-151.63v18.82h-30.76v-23.05h71.6v4.23h-40.84Z");
  }
}


.bimage {
  width: 80px;
  margin-left: 30px;
  margin-top: 10px;

}

.mask:hover {
  text-shadow: 0 0 10px rgba(221, 221, 221, 1), 0 0 0 #ddd;
}


.image {
  position: absolute;
  opacity: 0.95;
}

#bgall {
  position: absolute;
  top: 1vh;
  left: 1vw;
  width: 3vw;
  height: 3vw;
  z-index: 1;
}

img {
  position: absolute;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  z-index: 1;
}



.hero {
  font-size: 1.5rem;
  color: white;
  line-height: 1;
  display: inline-block;
  z-index: 2;
  text-decoration: none;

  /* Bright things in dark environments usually cast that light, giving off a glow */
  filter: drop-shadow(0 1px 3px);
}


.layers {
  position: relative;
}

.layers::before,
.layers::after {
  content: attr(data-text);
  position: absolute;
  width: 110%;
  z-index: -1;
}

.layers::before {
  top: 5px;
  left: 10px;
  color: #e0287d;
}

.layers::after {
  top: -5px;
  left: -10px;
  color: #1bc7fb;
}

.single-path {
  clip-path: polygon(
    0% 12%,
    53% 12%,
    53% 26%,
    25% 26%,
    25% 86%,
    31% 86%,
    31% 0%,
    53% 0%,
    53% 84%,
    92% 84%,
    92% 82%,
    70% 82%,
    70% 29%,
    78% 29%,
    78% 65%,
    69% 65%,
    69% 66%,
    77% 66%,
    77% 45%,
    85% 45%,
    85% 26%,
    97% 26%,
    97% 28%,
    84% 28%,
    84% 34%,
    54% 34%,
    54% 89%,
    30% 89%,
    30% 58%,
    83% 58%,
    83% 5%,
    68% 5%,
    68% 36%,
    62% 36%,
    62% 1%,
    12% 1%,
    12% 34%,
    60% 34%,
    60% 57%,
    98% 57%,
    98% 83%,
    1% 83%,
    1% 53%,
    91% 53%,
    91% 84%,
    8% 84%,
    8% 83%,
    4% 83%
  );
}

.paths {
  animation: paths 5s step-end infinite;
}

@keyframes paths {
  0% {
    clip-path: polygon(
      0% 43%,
      83% 43%,
      83% 22%,
      23% 22%,
      23% 24%,
      91% 24%,
      91% 26%,
      18% 26%,
      18% 83%,
      29% 83%,
      29% 17%,
      41% 17%,
      41% 39%,
      18% 39%,
      18% 82%,
      54% 82%,
      54% 88%,
      19% 88%,
      19% 4%,
      39% 4%,
      39% 14%,
      76% 14%,
      76% 52%,
      23% 52%,
      23% 35%,
      19% 35%,
      19% 8%,
      36% 8%,
      36% 31%,
      73% 31%,
      73% 16%,
      1% 16%,
      1% 56%,
      50% 56%,
      50% 8%
    );
  }

  5% {
    clip-path: polygon(
      0% 29%,
      44% 29%,
      44% 83%,
      94% 83%,
      94% 56%,
      11% 56%,
      11% 64%,
      94% 64%,
      94% 70%,
      88% 70%,
      88% 32%,
      18% 32%,
      18% 96%,
      10% 96%,
      10% 62%,
      9% 62%,
      9% 84%,
      68% 84%,
      68% 50%,
      52% 50%,
      52% 55%,
      35% 55%,
      35% 87%,
      25% 87%,
      25% 39%,
      15% 39%,
      15% 88%,
      52% 88%
    );
  }

  30% {
    clip-path: polygon(
      0% 53%,
      93% 53%,
      93% 62%,
      68% 62%,
      68% 37%,
      97% 37%,
      97% 89%,
      13% 89%,
      13% 45%,
      51% 45%,
      51% 88%,
      17% 88%,
      17% 54%,
      81% 54%,
      81% 75%,
      79% 75%,
      79% 76%,
      38% 76%,
      38% 28%,
      61% 28%,
      61% 12%,
      55% 12%,
      55% 62%,
      68% 62%,
      68% 51%,
      0% 51%,
      0% 92%,
      63% 92%,
      63% 4%,
      65% 4%
    );
  }

  45% {
    clip-path: polygon(
      0% 33%,
      2% 33%,
      2% 69%,
      58% 69%,
      58% 94%,
      55% 94%,
      55% 25%,
      33% 25%,
      33% 85%,
      16% 85%,
      16% 19%,
      5% 19%,
      5% 20%,
      79% 20%,
      79% 96%,
      93% 96%,
      93% 50%,
      5% 50%,
      5% 74%,
      55% 74%,
      55% 57%,
      96% 57%,
      96% 59%,
      87% 59%,
      87% 65%,
      82% 65%,
      82% 39%,
      63% 39%,
      63% 92%,
      4% 92%,
      4% 36%,
      24% 36%,
      24% 70%,
      1% 70%,
      1% 43%,
      15% 43%,
      15% 28%,
      23% 28%,
      23% 71%,
      90% 71%,
      90% 86%,
      97% 86%,
      97% 1%,
      60% 1%,
      60% 67%,
      71% 67%,
      71% 91%,
      17% 91%,
      17% 14%,
      39% 14%,
      39% 30%,
      58% 30%,
      58% 11%,
      52% 11%,
      52% 83%,
      68% 83%
    );
  }

  76% {
    clip-path: polygon(
      0% 26%,
      15% 26%,
      15% 73%,
      72% 73%,
      72% 70%,
      77% 70%,
      77% 75%,
      8% 75%,
      8% 42%,
      4% 42%,
      4% 61%,
      17% 61%,
      17% 12%,
      26% 12%,
      26% 63%,
      73% 63%,
      73% 43%,
      90% 43%,
      90% 67%,
      50% 67%,
      50% 41%,
      42% 41%,
      42% 46%,
      50% 46%,
      50% 84%,
      96% 84%,
      96% 78%,
      49% 78%,
      49% 25%,
      63% 25%,
      63% 14%
    );
  }

  90% {
    clip-path: polygon(
      0% 41%,
      13% 41%,
      13% 6%,
      87% 6%,
      87% 93%,
      10% 93%,
      10% 13%,
      89% 13%,
      89% 6%,
      3% 6%,
      3% 8%,
      16% 8%,
      16% 79%,
      0% 79%,
      0% 99%,
      92% 99%,
      92% 90%,
      5% 90%,
      5% 60%,
      0% 60%,
      0% 48%,
      89% 48%,
      89% 13%,
      80% 13%,
      80% 43%,
      95% 43%,
      95% 19%,
      80% 19%,
      80% 85%,
      38% 85%,
      38% 62%
    );
  }

  1%,
  7%,
  33%,
  47%,
  78%,
  93% {
    clip-path: none;
  }
}

.movement {
  /* Normally this position would be absolute & on the layers, set to relative here so we can see it on the div */
  position: relative;
  animation: movement 8s step-end infinite;
}

@keyframes movement {
  0% {
    top: 0px;
    left: -10px;
  }

  15% {
    top: 5px;
    left: 5px;
  }

  60% {
    top: 2.5px;
    left: -5px;
  }

  75% {
    top: -2.5px;
    left: 10px;
  }

  100% {
    top: 5px;
    left: 2.5px;
  }
}

.opacity {
  animation: opacity 5s step-end infinite;
}

@keyframes opacity {
  0% {
    opacity: 0.1;
  }

  5% {
    opacity: 0.7;
  }

  30% {
    opacity: 0.4;
  }

  45% {
    opacity: 0.6;
  }

  76% {
    opacity: 0.4;
  }

  90% {
    opacity: 0.8;
  }

  1%,
  7%,
  33%,
  47%,
  78%,
  93% {
    opacity: 0;
  }
}

.font {
  animation: font 7s step-end infinite;
}

@keyframes font {
  0% {
    font-weight: 100;
    color: #e0287d;
    filter: blur(3px);
  }

  20% {
    font-weight: 500;
    color: #fff;
    filter: blur(0);
  }

  50% {
    font-weight: 300;
    color: #1bc7fb;
    filter: blur(2px);
  }

  60% {
    font-weight: 700;
    color: #fff;
    filter: blur(0);
  }

  90% {
    font-weight: 500;
    color: #e0287d;
    filter: blur(6px);
  }
}

.glitch span {
  animation: paths 5s step-end infinite;
}

.glitch::before {
  animation: paths 5s step-end infinite, opacity 5s step-end infinite,
    font 8s step-end infinite, movement 10s step-end infinite;
}

.glitch::after {
  animation: paths 5s step-end infinite, opacity 5s step-end infinite,
    font 7s step-end infinite, movement 8s step-end infinite;
}