/*	------------------
	nono.x10.mx
	𝓝σɳ04·ⲁꞅⲍ@𝓰ⲙⲁⲓ𝓵.ⲥⲟⲙ
	------------------*/
	
* {	border:0;
	padding:0;
	letter-spacing:2px;
	font-size:20px;	
	}
	
html {
  scroll-behavior: smooth;
}
	
span {font-size:inherit;}
	
a {text-decoration:none;
	color:#F25E5E;}
	
a:hover {
 color:#F2C849;}
}

img { border:0;
	padding:0;
	margin:0;
	}
	
img.info {width:70%;
	border:1px solid #f3f3f3;
	filter:blur(1px);
	opacity:.4;
}	
	
body {
	background-color:#1b083a;
	color:#f3f3f3;
	}
	
header #d-head {
	padding:30px;
	text-align:left;
	}
	
p {}
	
#site-logo {
	width:131px;
	position:fixed;
	top:15px;
	left:15px;
	z-index:9999;
	}

#site-logo:hover {
    width:151px;
    cursor:pointer;
}
	
.oren { color:#F2C849 !important; font-size:inherit;}
.lil-blue { color:#461699 !important; font-size:inherit;}
.lil-pula { color:#F25E5E !important; font-size:inherit;}
.ader-blo { color:#07bccc !important; font-size:inherit; }

#d-footer {
	align:center;
	text-align:center;
	font-size:18px;	
	
    position: fixed;
    bottom: 5%;
    
 
    left: 50%;
    transform: translateX(-50%);
	}
	
#main-text {
	align:center;
	text-align:center;
	font-size:18px;	
	
    position: fixed;
    top: 30%;
 
    left: 50%;
    transform: translateX(-50%);	
	
	font-family: "Passero One", sans-serif;
	font-weight: 400;
	font-style: normal;
	}
	
.x-def {
	color:#9258f5;
	font-size:inherit;

	}
	
.x-def:hover {
	color:#f2c849;
    cursor:pointer;
	
	transition: all .5s;

	
	letter-spacing: 10px;
    font-size:66px;
  text-shadow: 2px 2px 0px #07bccc,
    7px 7px 0px #e601c0,
    13px 13px 15px #482896;
  cursor: pointer;
	
	}
	
.d-h1 {
	line-height:40px;
	}
	
.d-d2 { padding:15px;	}

.d-d1 {
	background:url("images/d-oren-arrow.png") no-repeat right center;
	padding-right:55px;
	}
	
.x-inner {
	font-size:33px;
	line-height:25px;
	}
	
@keyframes zoom-in {
  0% {
    transform: translateZ(-1000px);
    opacity: 0;
    filter: blur(1px);
  }
  50% {
    transform: translateZ(0px);
    opacity: .3;
    filter: blur(0px);
  }
  100% {
    transform: translateZ(1000px);
    opacity: 0;
    filter: blur(5px);
  }
}

.stuck-grid {
  block-size: 100svh;
  perspective: 1000px;
  transform-style: preserve-3d;

  display: grid;
  grid: repeat(4, 25dvh) / repeat(4, 25dvw);;
  place-items: center;

  position: sticky;
  top: 0;

  overflow: clip;

  > .grid-item {
    transform-style: preserve-3d;

    font-size: 5vmin;
    font-weight: lighter;

    text-wrap: nowrap;

    @supports (animation-timeline: scroll()) {
      @media (prefers-reduced-motion: no-preference) {
        animation: zoom-in linear both;
        animation-timeline: scroll(root block);
        will-change: transform, opacity, filter;
		
		        will-change: transform, opacity, filter;
                animation-duration: 1s;
                animation-timing-function: steps(5);
		
		
      }
    }

    &.special.special {
      grid-row: 2 / span 2;
      grid-column: 2 / span 2;
	  display: flex;
	  position:fixed;
	  justify-content: center; /* Centers horizontally */
	  align-items: center;     /* Centers vertically */
      min-height: 100vh;       /* Takes up the full height of the viewport */
    }

    > b {
      font-size: 15vmin;
    }

    &:nth-of-type(1)  { animation-range: 40% 50% }
    &:nth-of-type(2)  { animation-range: 20% 30% }
    &:nth-of-type(3)  { animation-range: 52% 62% }
    &:nth-of-type(4)  { animation-range: 50% 60% }
    &:nth-of-type(5)  { animation-range: 45% 55% }
    &:nth-of-type(6)  { animation-range: 10% 20% }
    &:nth-of-type(7)  { animation-range: 90% 100% }
    &:nth-of-type(8)  { animation-range: 30% 40% }
    &:nth-of-type(9)  { animation-range: 80% 90% }
    &:nth-of-type(10) { animation-range: 70% 80% }
    &:nth-of-type(11) { animation-range: -10% 50% }
    &:nth-of-type(12) { animation-range: 52% 62% }
    &:nth-of-type(13) { animation-range: 15% 25% }
    &:nth-of-type(14) { animation-range: 7% 17% }
    &:nth-of-type(15) { animation-range: 75% 85% }
    &:nth-of-type(16) { animation-range: 3% 13% }
    &:nth-of-type(17) { animation-range: 87% 97% }
    &:nth-of-type(18) { animation-range: 42% 52% }
    &:nth-of-type(19) { animation-range: 57% 67% }
    &:nth-of-type(20) { animation-range: 37% 47% }
    &:nth-of-type(21) { animation-range: 12% 22% }
    &:nth-of-type(22) { animation-range: 8% 18% }
    &:nth-of-type(23) { animation-range: 84% 94% }
    &:nth-of-type(24) { animation-range: 33% 43% }
    &:nth-of-type(25) { animation-range: 48% 58% }
    &:nth-of-type(26) { animation-range: 13% 23% }
    &:nth-of-type(27) { animation-range: 78% 88% }
    &:nth-of-type(28) { animation-range: 62% 72% }
    &:nth-of-type(29) { animation-range: 31% 41% }
    &:nth-of-type(30) { animation-range: 8% 18% }
    &:nth-of-type(31) { animation-range: 4% 14% }
    &:nth-of-type(32) { animation-range: 74% 84% }
    &:nth-of-type(33) { animation-range: 61% 71% }
    &:nth-of-type(34) { animation-range: 26% 36% }
    &:nth-of-type(35) { animation-range: 63% 73% }
    &:nth-of-type(36) { animation-range: 11% 21% }
    &:nth-of-type(37) { animation-range: 89% 99% }
    &:nth-of-type(38) { animation-range: 33% 43% }
    &:nth-of-type(39) { animation-range: 88% 98% }
    &:nth-of-type(40) { animation-range: 22% 32% }
    &:nth-of-type(41) { animation-range: 16% 26% }
    &:nth-of-type(42) { animation-range: 26% 36% }
    &:nth-of-type(43) { animation-range: 66% 76% }
    &:nth-of-type(44) { animation-range: 3% 13% }
    &:nth-of-type(45) { animation-range: 44% 54% }
    &:nth-of-type(46) { animation-range: 11% 21% }
    &:nth-of-type(47) { animation-range: 23% 33% }
    &:nth-of-type(48) { animation-range: 39% 49% }
    &:nth-of-type(49) { animation-range: 59% 69% }
    &:nth-of-type(50) { animation-range: 6% 16% }
    
    @supports (animation-timeline: scroll()) {

      &:nth-of-type(1) { grid-area: 1/1 }
      &:nth-of-type(2) { grid-area: 1/2 }
      &:nth-of-type(3) { grid-area: 1/3 }
      &:nth-of-type(4) { grid-area: 1/4 }
      &:nth-of-type(5) { grid-area: 2/1 }
      &:nth-of-type(6) { grid-area: 2/2 }
      &:nth-of-type(7) { grid-area: 2/3 }
      &:nth-of-type(8) { grid-area: 2/4 }
      &:nth-of-type(9) { grid-area: 3/1 }
      &:nth-of-type(10) { grid-area: 3/2 }
      &:nth-of-type(11) { grid-area: 3/3 }
      &:nth-of-type(12) { grid-area: 3/4 }
      &:nth-of-type(13) { grid-area: 4/1 }
      &:nth-of-type(14) { grid-area: 4/2 }
      &:nth-of-type(15) { grid-area: 4/3 }
      &:nth-of-type(16) { grid-area: 4/4 }
      &:nth-of-type(17) { grid-area: 2/1 }
      &:nth-of-type(18) { grid-area: 2/2 }
      &:nth-of-type(19) { grid-area: 2/3 }
      &:nth-of-type(20) { grid-area: 2/4 }
      &:nth-of-type(21) { grid-area: 3/1 }
      &:nth-of-type(22) { grid-area: 3/2 }
      &:nth-of-type(23) { grid-area: 3/3 }
      &:nth-of-type(24) { grid-area: 3/4 }
      &:nth-of-type(25) { grid-area: 1/1 }
      &:nth-of-type(26) { grid-area: 1/2 }
      &:nth-of-type(27) { grid-area: 1/3 }
      &:nth-of-type(28) { grid-area: 1/4 }
      &:nth-of-type(29) { grid-area: 4/1 }
      &:nth-of-type(30) { grid-area: 4/2 }
      &:nth-of-type(31) { grid-area: 4/3 }
      &:nth-of-type(32) { grid-area: 4/4 }
      &:nth-of-type(33) { grid-area: 2/1 }
      &:nth-of-type(34) { grid-area: 2/2 }
      &:nth-of-type(35) { grid-area: 2/3 }
      &:nth-of-type(36) { grid-area: 2/4 }
      &:nth-of-type(37) { grid-area: 3/1 }
      &:nth-of-type(38) { grid-area: 3/2 }
      &:nth-of-type(39) { grid-area: 3/3 }
      &:nth-of-type(40) { grid-area: 3/4 }
      &:nth-of-type(41) { grid-area: 1/1 }
      &:nth-of-type(42) { grid-area: 1/2 }
      &:nth-of-type(43) { grid-area: 1/3 }
      &:nth-of-type(44) { grid-area: 1/4 }
      &:nth-of-type(45) { grid-area: 4/1 }
      &:nth-of-type(46) { grid-area: 4/2 }
      &:nth-of-type(47) { grid-area: 4/3 }
      &:nth-of-type(48) { grid-area: 4/4 }
      &:nth-of-type(49) { grid-area: 3/1 }
      &:nth-of-type(50) { grid-area: 3/2 }
      &:nth-of-type(51) { grid-area: 3/3 }
      &:nth-of-type(52) { grid-area: 3/4 }
    }
  }
}





@layer support {
  * {
    box-sizing: border-box;
    margin: 0;
  }

  html {
    block-size: 100%;
    color-scheme: dark light;
  }

  body {
    min-block-size: 400vh;
    font-family: system-ui, sans-serif;
  }
}


h1 {font-size:60px;}

.typewriter h1, .type:hover {
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid orange; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em; /* Adjust as needed */
  animation: 
    typing 3.5s steps(40, end),
    blink-caret .75s step-end infinite;
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange; }
}

.main {
    position: fixed;
    top: 50%;
    left: 50%;
    height: 1px;
    width: 1px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: -42vw -4vh 0px 0px #fff,25vw -41vh 0px 0px #fff,-20vw 49vh 0px 1px #fff,5vw 40vh 1px 1px #fff,29vw 19vh 1px 0px #fff,-44vw -13vh 0px 0px #fff,46vw 41vh 0px 1px #fff,-3vw -45vh 0px 1px #fff,47vw 35vh 1px 0px #fff,12vw -8vh 1px 0px #fff,-34vw 48vh 1px 1px #fff,32vw 26vh 1px 1px #fff,32vw -41vh 1px 1px #fff,0vw 37vh 1px 1px #fff,34vw -26vh 1px 0px #fff,-14vw -49vh 1px 0px #fff,-12vw 45vh 0px 1px #fff,-44vw -33vh 0px 1px #fff,-13vw 41vh 0px 0px #fff,-36vw -11vh 0px 1px #fff,-23vw -24vh 1px 0px #fff,-38vw -27vh 0px 1px #fff,16vw -19vh 0px 0px #fff,28vw 33vh 1px 0px #fff,-49vw -4vh 0px 0px #fff,16vw 32vh 0px 1px #fff,36vw -18vh 1px 0px #fff,-25vw -30vh 1px 0px #fff,-23vw 24vh 0px 1px #fff,-2vw -35vh 1px 1px #fff,-25vw 9vh 0px 0px #fff,-15vw -34vh 0px 0px #fff,-8vw -19vh 1px 0px #fff,-20vw -20vh 1px 1px #fff,42vw 50vh 0px 1px #fff,-32vw 10vh 1px 0px #fff,-23vw -17vh 0px 0px #fff,44vw 15vh 1px 0px #fff,-40vw 33vh 1px 1px #fff,-43vw 8vh 0px 0px #fff,-48vw -15vh 1px 1px #fff,-24vw 17vh 0px 0px #fff,-31vw 50vh 1px 0px #fff,36vw -38vh 0px 1px #fff,-7vw 48vh 0px 0px #fff,15vw -32vh 0px 0px #fff,29vw -41vh 0px 0px #fff,2vw 37vh 1px 0px #fff,7vw -40vh 1px 1px #fff,15vw 18vh 0px 0px #fff,25vw -13vh 1px 1px #fff,-46vw -12vh 1px 1px #fff,-18vw 22vh 0px 0px #fff,23vw -9vh 1px 0px #fff,50vw 12vh 0px 1px #fff,45vw 2vh 0px 0px #fff,14vw -48vh 1px 0px #fff,23vw 43vh 0px 1px #fff,-40vw 16vh 1px 1px #fff,20vw -31vh 0px 1px #fff,-17vw 44vh 1px 1px #fff,18vw -45vh 0px 0px #fff,33vw -6vh 0px 0px #fff,0vw 7vh 0px 1px #fff,-10vw -18vh 0px 1px #fff,-19vw 5vh 1px 0px #fff,1vw 42vh 0px 0px #fff,22vw 48vh 0px 1px #fff,39vw -8vh 1px 1px #fff,-6vw -42vh 1px 0px #fff,-47vw 34vh 0px 0px #fff,-46vw 19vh 0px 1px #fff,-12vw -32vh 0px 0px #fff,-45vw -38vh 0px 1px #fff,-28vw 18vh 1px 0px #fff,-38vw -46vh 1px 1px #fff,49vw -6vh 1px 1px #fff,-28vw 18vh 1px 1px #fff,10vw -24vh 0px 1px #fff,-5vw -11vh 1px 1px #fff,33vw -8vh 1px 0px #fff,-16vw 17vh 0px 0px #fff,18vw 27vh 0px 1px #fff,-8vw -10vh 1px 1px #fff;
  
  /* stars were too big with the layers above but left the code in case no one cares  -- as in, if noone's just that  one other loner who actually cares    */
  
  box-shadow: 24vw 9vh 1px 0px #fff,12vw -24vh 0px 1px #fff,-45vw -22vh 0px 0px #fff,-37vw -40vh 0px 1px #fff,29vw 19vh 0px 1px #fff,4vw -8vh 0px 1px #fff,-5vw 21vh 1px 1px #fff,-27vw 26vh 1px 1px #fff,-47vw -3vh 1px 1px #fff,-28vw -30vh 0px 1px #fff,-43vw -27vh 0px 1px #fff,4vw 22vh 1px 1px #fff,36vw 23vh 0px 0px #fff,-21vw 24vh 1px 1px #fff,-16vw 2vh 1px 0px #fff,-16vw -6vh 0px 0px #fff,5vw 26vh 0px 0px #fff,-34vw 41vh 0px 0px #fff,1vw 42vh 1px 1px #fff,11vw -13vh 1px 1px #fff,48vw -8vh 1px 0px #fff,22vw -15vh 0px 0px #fff,45vw 49vh 0px 0px #fff,43vw -27vh 1px 1px #fff,20vw -2vh 0px 0px #fff,8vw 22vh 0px 1px #fff,39vw 48vh 1px 1px #fff,-21vw -11vh 0px 1px #fff,-40vw 45vh 0px 1px #fff,11vw -30vh 1px 0px #fff,26vw 30vh 1px 0px #fff,45vw -29vh 0px 1px #fff,-2vw 18vh 0px 0px #fff,-29vw -45vh 1px 0px #fff,-7vw -27vh 1px 1px #fff,42vw 24vh 0px 0px #fff,45vw -48vh 1px 0px #fff,-36vw -18vh 0px 0px #fff,-44vw 13vh 0px 1px #fff,36vw 16vh 0px 1px #fff,40vw 24vh 0px 0px #fff,18vw 11vh 0px 0px #fff,-15vw -23vh 1px 0px #fff,-24vw 48vh 0px 1px #fff,27vw -45vh 1px 0px #fff,-2vw -24vh 0px 1px #fff,-15vw -28vh 0px 0px #fff,-43vw 13vh 1px 0px #fff,7vw 27vh 1px 0px #fff,47vw 5vh 0px 0px #fff,-45vw 15vh 1px 1px #fff,-5vw -28vh 0px 1px #fff,38vw 25vh 1px 1px #fff,-39vw -1vh 1px 0px #fff,5vw 0vh 1px 0px #fff,49vw 13vh 0px 0px #fff,48vw 10vh 0px 1px #fff,19vw -28vh 0px 0px #fff,4vw 7vh 0px 0px #fff,21vw 21vh 1px 1px #fff,-15vw -15vh 0px 1px #fff,-6vw -42vh 1px 0px #fff,-15vw 48vh 1px 1px #fff,-23vw 25vh 1px 1px #fff,-48vw 25vh 0px 1px #fff,-31vw -19vh 0px 1px #fff,4vw 37vh 1px 1px #fff,-43vw 28vh 0px 0px #fff,3vw -25vh 0px 1px #fff,-39vw 14vh 0px 1px #fff,-40vw 31vh 0px 1px #fff,35vw -36vh 1px 1px #fff,16vw 49vh 0px 0px #fff,6vw 39vh 0px 0px #fff,3vw -35vh 0px 1px #fff,-44vw -2vh 1px 0px #fff,-6vw 21vh 1px 0px #fff,48vw 9vh 1px 1px #fff,-43vw 30vh 1px 1px #fff,29vw -12vh 1px 1px #fff,-48vw 13vh 1px 0px #fff,-42vw 32vh 1px 1px #fff,34vw 15vh 1px 1px #fff,29vw -37vh 1px 1px #fff,28vw 2vh 0px 0px #fff;
  animation: zoom 16s alternate infinite; 
}

@keyframes zoom {
    0%{
        transform: scale(1);
    }
    100%{
        transform: scale(1.5);
    }
}

@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400');
body {
  margin:0px;
  text-align:center;
  padding-top:43vh;
  color:#fff;
  font-family:'Roboto';
  font-size:36px;
  font-weight:100;
  animation:bg 5s linear infinite;
}

.dropping-texts {
  display: inline-block;
  width: 232px;
  text-align: center;
  height: 36px;
  vertical-align: -2px;
}

.dropping-texts > div {
  font-size:0px;
  opacity:0;
  position:absolute;
  font-weight:300;
  z-index:-9;
}

.dropping-texts > div:nth-child(1) {
  animation: roll 5s linear infinite 0s;
}
.dropping-texts > div:nth-child(2) {
  animation: roll 5s linear infinite 1s;
}
.dropping-texts > div:nth-child(3) {
  animation: roll 5s linear infinite 2s;
}
.dropping-texts > div:nth-child(4) {
  animation: roll2 5s linear infinite 3s;
}

@keyframes roll {
  0% {
    font-size:0px;
    opacity:0;
    margin-left:-30px;
    margin-top:0px;
    transform: rotate(-25deg);
  }
  3% {
    opacity:1;
    transform: rotate(0deg);
  }
  5% {
    font-size:inherit;
    opacity:1;
    margin-left:0px;
    margin-top:0px;
  }
  20% {
    font-size:inherit;
    opacity:1;
    margin-left:0px;
    margin-top:0px;
    transform: rotate(0deg);
  }
  27% {
    font-size:0px;
    opacity:0.5;
    margin-left:20px;
    margin-top:100px;
  }
  100% {
    font-size:0px;
    opacity:0;
    margin-left:-30px;
    margin-top:0px;
    transform: rotate(15deg);
  }
}

@keyframes roll2 {
  0% {
    font-size:0px;
    opacity:0;
    margin-left:-30px;
    margin-top:0px;
    transform: rotate(-25deg);
  }
  3% {
    opacity:1;
    transform: rotate(0deg);
  }
  5% {
    font-size:inherit;
    opacity:1;
    margin-left:0px;
    margin-top:0px;
  }
  30% {
    font-size:inherit;
    opacity:1;
    margin-left:0px;
    margin-top:0px;
    transform: rotate(0deg);
  }
  37% {
    font-size:1500px;
    opacity:0;
    margin-left:-1000px;
    margin-top:-800px;
  }
  100% {
    font-size:0px;
    opacity:0;
    margin-left:-30px;
    margin-top:0px;
    transform: rotate(15deg);
  }
}

@keyframes d-dx {
  0% {color: #ff0075 !important;}
  3% {color: #0094ff;}
  20% {color: #0094ff;}
  23% {color: #b200ff;}
  40% {color: #b200ff;}
  43% {color: #8BC34A;}
  60% {color: #8BC34A;}
  63% {color: #F44336;}
  80% {color: #F44336;}
  83% {color: #F44336;}
  100% {color: #F44336;}
}

}