@import url(https://fonts.googleapis.com/css?family=Anonymous+Pro);

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    width: 100%;
    background-color: #000;
    font-family: 'Anonymous Pro', monospace;
    color: #6c39a2;
}
.blinker {
    animation: blinker 1.5s linear infinite;
    color: #686868;
    font-size: 1.5em; /* Larger, responsive font size */
     position: absolute;
     top: 35vmax;/* Adjust margin to position it below chevrons */
     text-align: center;
}

/* For mobile screens */
@media screen and (max-width: 768px) {
    .blinker {
        top: 65vmax;  /* Adjusted for mobile, bringing it further down */
        font-size: 1.2em;  /* Slightly smaller font for mobile */
    }
}

/* For tablet screens (768px to 1024px) */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .blinker {
        top: 60vmax;  /* Adjusted for tablets */
        font-size: 1.3em;  /* Moderate font size for tablets */
    }
}


.flipdown {
    margin: auto;
    margin-top: 10%;
  }

  /* Media query for mobile screens */
@media screen and (max-width: 768px) {
    .flipdown {
        margin-top: 20%;
        height: 30vw;
    }
}

/* Media query for tablets (768px to 1024px) */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .flipdown {
        margin-top: 15%;  /* Moderate top margin for tablet screens */
    }
}

/* Media query for desktop screens (above 1024px) */
@media screen and (min-width: 1024px) {
    .flipdown {
        margin-top: 10%;  /* Standard margin for larger screens */
    }
}


@keyframes blinker {
    50% {
        opacity: 0;
    }
}
.container {
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: rgb(0, 0, 0);
}

@keyframes anim {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

canvas {
    position: relative;
    z-index: 9;
    width: 100vw;
    height: 100vh;
    background-color: #000;
    opacity: 1;
    transition: opacity 1.5s ease-in-out;
}

.intro {
    height: 100%; /* Ensure full height for the intro section */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 2; /* Ensure it's above the canvas */
    padding: 0 20px; /* Add padding for small screens */
}

.cursor {
    position: absolute;
    width: 70%; /* Reduce width for better fit */
    max-width: 96.5%; /* Ensure it never overflows */
    margin: 0 auto;
    border-right: 2px solid rgba(255, 255, 255, 0.75);
    font-size: 3vw; /* Responsive font size */
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    transform: translateY(-30%);
    padding-right: 0.1em;
    top:25vmax;
}

@media (max-width: 1024px) {
    .cursor {
        position: absolute;
        top:35vmax;/* Adjust font size to make it smaller for smaller screens */
    }

}


.typewriter-animation {
    animation: typewriter 4s steps(50) 1 normal both, blinkingCursor 500ms steps(50) infinite normal;
}

@keyframes typewriter {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

@keyframes blinkingCursor {
    from {
        border-right-color: #6c39a2;
    }
    to {
        border-right-color: transparent;
    }
}

/* Scroll indicator styling */
.scroll-indicator {
    margin-top: 5rem;
    animation: bounce 1.5s infinite alternate;
}

@keyframes bounce {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(10px);
    }
}

/* Chevron styles */
:root {
    --base: 10px;
}

/* General chevron styling */
.chevron {
    position: absolute;
    width: calc(var(--base) * 3.5);
    height: calc(var(--base) * 0.8);
    opacity: 0;
    transform: scale(0.3);
    animation: move-chevron 2s ease-out infinite;
    top: 28vmax;
    z-index: 5; /* Ensure they are on top of other elements */
}

/* First chevron */
.chevron:first-child {
    animation: move-chevron 2s ease-out 0.5s infinite; /* Start slightly earlier */
    z-index: 6; /* Make sure it is in front of the second chevron */
}

/* Second chevron */
.chevron:nth-child(2) {
    animation: move-chevron 2s ease-out 1s infinite; /* Delay start slightly */
    z-index: 5; /* Layer it slightly behind */
}

/* Chevron shape */
.chevron:before,
.chevron:after {
    content: '';
    position: absolute;
    top: 0;
    height: 100%;
    width: 50%;
    background: #6c39a2;
}

.chevron:before {
    left: 0;
    transform: skewY(30deg);
}

.chevron:after {
    right: 0;
    transform: skewY(-30deg);
}

/* Keyframe animation for chevrons */
@keyframes move-chevron {
    25% {
        opacity: 1;
    }
    33.3% {
        opacity: 1;
        transform: translateY(calc(var(--base) * 3.8));
    }
    66.6% {
        opacity: 1;
        transform: translateY(calc(var(--base) * 5.2));
    }
    100% {
        opacity: 0;
        transform: translateY(calc(var(--base) * 8)) scale(0.5);
    }
}


/* Media query for mobile screens */
@media screen and (max-width: 768px) {
    .chevron {
        width: calc(var(--base) * 2.5);  /* Smaller chevrons */
        height: calc(var(--base) * 0.6);  /* Adjust height */
        top: 40vmax;  /* Bring the chevrons lower for mobile */
        transform: scale(0.25);  /* Scale down the chevrons for mobile */
    }
}

/* Media query for tablets (768px to 1024px) */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .chevron {
        width: calc(var(--base) * 3);  /* Moderately smaller chevrons */
        height: calc(var(--base) * 0.7);  /* Adjust height for tablet */
        top: 45vmax;  /* Bring chevrons lower for tablets */
        transform: scale(0.28);  /* Slightly scale down for tablets */
    }
}



/* Adjust font size for large text in the loop */
/* #loop {
    display: flex;
    position: absolute;
    top: 30%;
    height: 25%;
    width: 100%;
    font-size: 12vw; /* Set font size to be responsive 
    white-space: nowrap;
    justify-content: center;
} */

/* @media (max-width: 768px) {
    #loop {
        font-size: 8vw;
    }
} */
/* @media screen and (max-width: 768px) {
    canvas {
      display: none;
    }
  } */
/* Style the container and video to ensure it fits properly */
#videoContainer {
    width: 100%;
    height: 100vh; /* Full viewport height */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
video{
    width: 100%;
}

#vrVideo {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover; /* Ensures video scales nicely within the container */
}

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



@media (max-width: 768px) { /* Tablets and below */
    #videoContainer {
        width: 100vw;
        height: 100vh; /* Full height for mobile devices */
    }

    #vrVideo {
        width: 100vw;
        height: 100vh; /* Make the video full screen */
        object-fit: cover; /* Ensures video covers the screen without distortion */
    }
    
    
}