@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&display=swap');

  /*** Track: Kerala Dust
  Clip: Hubble Space Telescope
  Ballerina: Unkown Artist 
  Dog Pilot: Jhey
  ***/

.body{
    z-index: 3;
    display: flex;
    flex-wrap: flex;
    justify-content: flex-end;
    transform: scale(0.7);
    transform-origin: top center;
}

:root{
    --tile-length: 21.5vmin;
    --animation-duration: 10s;
}

h1{
    font-size: min(10vw, 3rem);
    font-family: 'Comfortaa', cursive;
    color: white;
    align-items: center;
    justify-content: center;
    background: black;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 10%;
    left: 10%;
    z-index: 1;
}

.page {
  display: flex;
  flex-direction: column;
  font-size: 48px; /* Adjust as needed */
  font-family: 'Orbitron', sans-serif;
  font-weight: 400; /* Regular weight */
  left: 50px;
  top: 50px;
  z-index: 2;
}

@keyframes float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}

.page span {
  display: block;
  animation: bounce 0.5s ease-in-out infinite, rotateVertical 30s linear infinite;
}

.image-container {
  position: fixed; /* stays at bottom even when scrolling */
  bottom: 0; /* anchors to bottom */
  left: 50%; /* centers horizontally */
  transform: translateX(-50%); /* adjusts for left 50% to perfectly center */
  height: 100px; /* or whatever height you want */
  display: flex;
  justify-content: center;
  transition: transform 0.3s ease-in-out, width 0.3s ease-in-out;
  z-index: 9999; /* optional: ensure it's on top */
}  

@keyframes rotateVertical {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg); /* Rotates 360 degrees */
  }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-60px); /* Adjust the bounce height as needed */
  }
  60% {
    transform: translateY(30px);
  }
}

.kaleidoscope{
position: absolute;
width: calc(10 * .166 * var(--tile-length));
height: 100vmin;
-webkit-animation: rotation var(--animation-duration) linear infinite;
        animation: rotation var(--animation-duration) linear infinite;
border-radius: 1%;
justify-content: center;
align-items: center;
z-index: -1;
top: -4%;
left: 25%;
}

.kaleidoscope:after{
content:'';
position: relative;
height: inherit;
width: inherit;
background: radial-gradient(circle at center, transparent 100%,  #a7cfdf 20%);
z-index: -1;
}

.container{
    position: absolute;
    width: calc(2 * var(--tile-length));
    height: calc(2 * var(--tile-length));
    border-radius: 100%;
    overflow: hidden;
    transform: translate( calc(var(--tile-length) * -0.934 ), -50%);
    z-index: -1;
}

.container:nth-child(1){
    top: 50%;
    left: 0%;
    z-index: -1;
}

.container:nth-child(2){
    top: 50%;
    left: calc(2 * calc(var(--tile-length) * 0.866 ));
    z-index: -1;
}

.container:nth-child(3){
    top: 50%;
    left: calc(4 * calc(var(--tile-length) * 0.866 ));
    z-index: -1;
}

.container:nth-child(4){
    top: calc(50% - calc(1.5 * var(--tile-length)));
    left: calc(var(--tile-length) * 0.866 );
    z-index: -1;
}

.container:nth-child(5){
    top: calc(50% - calc(1.5 * var(--tile-length)));
    left: calc(3 * var(--tile-length) * 0.866 );
    z-index: -1;
}

.container:nth-child(6){
    top: calc(50% + calc(1.5 * var(--tile-length)));
    left: calc(var(--tile-length) * 0.866 );
    z-index: -1;
}

.container:nth-child(7){
    top: calc(50% + calc(1.5 * var(--tile-length)));
    left: calc(3 * var(--tile-length) * 0.866 );
    z-index: -1;
}

@-webkit-keyframes rotation{
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(270deg);
    }
}

@keyframes rotation{
    from{
        transform: rotate(360deg);
    }
    to{
        transform: rotate(0deg);
    }
}

.tile{
    position: absolute;
    top: 28%;
    left: 25%;
    width: var(--tile-length);
    height: calc(var(--tile-length) * 0.966);
    -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
            clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tile:nth-child(1){
    transform: rotate(30deg) translateY(50%) scaleX(-1);
    z-index: -1;
}

.tile:nth-child(2){
    transform: rotate(90deg) translateY(50%);
    z-index: -1;
}

.tile:nth-child(3){
    transform: rotate(150deg) translateY(50%) scaleX(-1);
    z-index: -1;
}

.tile:nth-child(4){
    transform: rotate(210deg) translateY(50%);
    z-index: -1;
}

.tile:nth-child(5){
    transform: rotate(270deg) translateY(50%) scaleX(-1);
    z-index: -1;
}

.tile:nth-child(6){
    transform: rotate(330deg) translateY(50%);
    z-index: -1;
}

.texture{
    position: absolute;
    height: calc(5.75 * var(--tile-length));
    width: calc(1.35 * var(--tile-length));
    /* background-image: url(https://zupimages.net/up/21/39/6p27.png); */
    background-image: url("../images/dhaulagiri.jpg");
    background-size: 100%;
    -webkit-animation: rotation var(--animation-duration) linear infinite;
    z-index: 1;
}

#upload {
  position: relative; /* or absolute, fixed, etc., depending on your layout */
  z-index: 10; /* Adjust this value as needed */
  top: 15%;
}

.link {
  position: fixed;
  z-index: -1;
  left: calc(12.5vmin - 3.75rem);
  bottom: calc(2.5vmin - .75rem);
  font-size: 1.5rem;
  font-family: arial, sans-serif;
  color: whitesmoke;
  display: flex;
  align-items: center;
  justify-content: overflow;
  cursor: pointer;
}

.my-name {
  position: relative;
}

.before, .after {
  overflow: hidden;
  width: 0px;
  transition: width .5s;
  transform-origin: right;
  z-index: -1;
}

.before-text {
  display: inline-block;
  width: auto;
  text-align: right;
}

.after-text {
  display: flex;
  align-items: center;
  width: auto;
  height: 3rem;
  z-index: -1;
  transform-origin: top center;
}

.link:hover .before {
  width: 2.5rem;
  z-index: -1;
}

.link:hover .after {
  width: 4rem;
}

.link:hover .spin {
  display: inline-block;
  transition: .5s transform .5s ease-in-out;
  transform: rotate(360deg);
  z-index: -1;
}

canvas, body, html {
    height : 100%;
    width : 100%;
    overflow: hidden;
    padding : 0;
    margin : 0;
    position: absolute;
  } 
  
body {
     background: #a7cfdf; 
     background: -webkit-linear-gradient(bottom left, #a7cfdf 0%, #23538a 10%);
     background: -moz-linear-gradient(bottom left, #a7cfdf 0%, #23538a 10%);
     background: -o-linear-gradient(bottom left, #a7cfdf 0%, #23538a 10%);
     background: linear-gradient(to top right, #a7cfdf 0%, #23538a 10%);
     position: fixed;
  }

.astro{
    width: 7%;
    float: left;
    width: 100px; 
    height: 100px;
    position: absolute;
    background: #a7cfdf;
}

.ast5{
  animation: continuous-rotate 5s linear infinite;
}

@keyframes continuous-rotate {
    from {
        transform: rotate(360deg);
    }
    to {
        transform: rotate(0deg);
    }
  }

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}


.ice2{
  width: 7%;
  position: absolute;
  top: 10%; /* Adjust the starting position */
  animation: zigzag 7s linear infinite; /* Added a 1-second delay */
  z-index: 2; /* Lowered z-index to be under .head-img2 */
}

.ice3{
  width: 7%;
  position: absolute;
  top: 20%; /* Adjust the starting position */
  animation: zigzag 7s linear infinite 3s; /* Added a 1-second delay */
  z-index: 2; /* Lowered z-index to be under .head-img2 */
}

.ice4{
  width: 7%;
  position: absolute;
  top: 30%; /* Adjust the starting position */
  animation: zigzag 7s linear infinite 6s; /* Added a 1-second delay */
  z-index: 2; /* Lowered z-index to be under .head-img2 */
}

.ice5{
  width: 7%;
  position: absolute;
  top: 30%; /* Adjust the starting position */
  animation: zigzag 7s linear infinite 9s; /* Added a 1-second delay */
  z-index: 2; /* Lowered z-index to be under .head-img2 */
}


@keyframes zigzag {
  0% {
      top: 0;
      left: 0;
  }
  25% {
      top: 25%;
      left: 100%;
      transform: translateX(-100%);
  }
  50% {
      top: 50%;
      left: 0;
  }
  75% {
      top: 75%;
      left: 100%;
      transform: translateX(-100%);
  }
  100% {
      top: 100%;
      left: 0;
  }
}

#video-background-hubble {
  position: fixed;
  top: 50%;
  left: 50%;
  object-fit: cover; 
  filter: brightness(100%);
  opacity: 0.9; 
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -2;
  transform: translateX(-50%) translateY(-50%);
  background-size: cover;
  animation: zoomIn 5s alternate-reverse infinite;
}