html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


:root {
    /* Colors */
    --purple-mind: #A772FF;
    --yellow-life: #D9FE44;
    --blue-ghost-light: rgba(83, 68, 254, 1);
    --blue-ghost-dark: #252449;
    --gray-dead: #202020;
    --white-hover: rgba(225, 224, 255, 0.7);
    --red-flicker: rgba(255, 0, 84, 0.2);
    --blue-flicker: rgba(1, 87, 128, 0.5);
    --blue-success: #44F2FE;
    --pink-error: #FE45D7;

    /* Sizes */
    --social-icon-size: 32px;
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

html, body {
    height: 100%;
    background-color: #111;
    color: var(--yellow-life);
    /* display: grid; */
    /* grid-template-rows: auto 1fr auto; */
    /* grid-template-columns: 1fr; */
    height: 100vh;
    display: flex;
}


@font-face {
    font-family: 'DaysOne';
    src: url('./assets/fonts/DaysOne-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/*----------------------------------------------------------------------- Header and Nav */

header {
    display: flex;
    flex-direction: row;
    /* align-items: flex-start; */
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding-left: 24px;
    padding-top: 10px;
    padding-bottom: 10px;
    /* background-color: rgba(167, 114, 255, 0.5); */
    position: fixed;
    top: 0;
    background-color: rgba(17, 17, 17, 0.8);
    backdrop-filter: blur(4px);
    z-index: 5000;
    /* opacity: 0.5; */
}

.mute-button {
    width: 32px;
    height: 32px;
    margin-left: auto;
    margin-right: 2rem;
    background-color: transparent;
    border: none;
    border-radius: 2px;
}

.mute-button:hover {
    background-color: var(--blue-ghost-dark);
}

.mute-button:active {
    
    background-color: var(--white-hover);
}

.mute-button img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.vx-logo {
    
    display: flex;
    justify-content: center;
    align-items: center;
    height: 54px;
    margin-right: 10px;
    /* object-fit: contain; */
    
}

.nav-spacer {
    /* display: inline-block; */
    width: 9px; /* Adjust width */
    height: 54px; /* Adjust height */
    background-color: var(--purple-mind);
    margin: 0px; /* Adjust spacing */
    border-radius: 1px; /* Add a 2px corner radius */
}

nav {
    display: flex;
    flex-direction: column;
    margin-left: 10px;
    position: static;
    top: auto;
    width: 120px;
    z-index: auto;
    
}

@keyframes flicker {
    0%, 100% { background-color: var(--blue-ghost-light); } /* Main color */
    50% { background-color: var(--blue-ghost-dark); }       /* Flicker color */
    20%, 80% { background-color: var(--white-hover); }  /* Alternate flicker color */
}

nav a {
    text-decoration: none;
    color: inherit;
    padding: 0px;
    transition: background-color 0.3s ease;
    font-family: 'DaysOne';
    font-weight: 400;
    font-style: normal;
    font-size: 1em;
    background-color: var(--blue-ghost-dark);
    animation: none;
}

nav a:hover {
    /* background-color: var(--white-hover); */
    /* background-color: var(--white-hover); */
    animation: flicker 0.1s 2;

}

nav a:active {
    transition: none;
    background-color: var(--blue-ghost-light);
}


/*----------------------------------------------------------------------- Main */

main {
    /* display: grid; */
    /* grid-template-rows: auto 1fr auto; */
    /* grid-template-columns: 1fr; */
    display: flex;
    flex-direction: row;
    /* align-items: center; */
    justify-items: flex-start;
    width: 100vw;
    height: 100vh;
    
}


footer {
    font-family: 'Pavanam';
    font-size: 9px;
    color: #555;
    text-align: center;
    position: fixed;
    bottom: 4px;
    width: 100%;
}

/*----------------------------------------------------------------------- Button Container */

.button-container {
    font-family: 'Pavanam';
    position: fixed;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    z-index: 3000;
    /* background-color: rgba(0, 0, 255, 0.5); */
}

/* Houses the Social icon and its short text */
.button-group {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: space-around;
    gap: 1rem;
}

.button-text {
    opacity: 0.5;
    transition: opacity 0.3s ease;
    writing-mode: vertical-rl; /* Rotates the text vertically */
}

.button-group:hover .button-text {
    opacity: 1;
}

.social-button {
    padding: 0;
    border: none;
    cursor: pointer;
    background: none;
    display: flex;
    justify-content: center;
    align-items: center;
    height: var(--social-icon-size);
    width: var(--social-icon-size);
}

.social-button img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.social-button:hover {
    background-color: var(--white-hover);
}

.tiktok-btn {
    /* display: flex; */
    /* justify-content: center; */
    /* align-items: center; */
    height: var(--social-icon-size); /* Adjusted height */
    width: var(--social-icon-size); /* Adjusted width */
    /* background-image: url('./assets/images/icons/social_tiktok.png'); */
    background-image: none;
    /* background-color: var(--purple-mind); */
    background-size: contain;
}

 .tiktok-btn:hover {
    background-color: var(--white-hover);
}

.instagram-btn {

    height: var(--social-icon-size); /* Adjusted height */
    width: var(--social-icon-size); /* Adjusted width */
    background-image: url('./assets/images/icons/social_insta.png');
    background-size: contain;
}

.x-btn {
    height: var(--social-icon-size); /* Adjusted height */
    width: var(--social-icon-size); /* Adjusted width */
    background-image: url('./assets/images/icons/social_x.png');
    background-size: contain;
}

.youtube-btn {
    height: var(--social-icon-size); /* Adjusted height */
    width: var(--social-icon-size); /* Adjusted width */
    background-image: url('./assets/images/icons/social_youtube.png');
    background-size: contain;
}


/*----------------------------------------------------------------------- Background Container (holds logo images) */

.background-container {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5;
    overflow: hidden;
    position: fixed;
    /* transform: translate(0%, 0%) scale(0.8); */
    
    
    
    /* position: fixed;
    width: 100vw;
    height: 100vh;
    opacity: 1;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center; */
}

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

.background-image,
.background-image-drop {
    position: absolute;
    max-width: 80%;
    max-height: 80%;
}

.background-image {
    z-index: 1;
}

.background-image-drop {
    z-index: 2;
    opacity: 0.5;
}

.background-image-top {
    position: absolute;
    max-width: 80%;
    max-height: 80%;
    z-index: 3;
}

/*----------------------------------------------------------------------- Page Content */



.page-content {
    display: flex;
    width: 100%;
    margin-top: 100px;;
    /* height: calc(100vh - 140px); */
    /* justify-self: center; */
    /* top: 100px; */
    color: white;
    /* background-color: rgba(255, 0, 0, 0.2); */
    /* position: fixed; */
    padding: 4px;
    z-index: 1000;
    justify-content: left;
    padding-left: 40px;
    /* overflow-x: hidden; */
    /* margin-right: 100px; */
    /* margin-top: 200px; */
    /* margin-left: 100px; */
}

.page-container {
    position: absolute;
    display: none;
    width: 74%;
}

.page-header-container {
    display: flex;
    /* flex-direction: column; */
    margin-bottom: 20px;
}

.page-text-container {
    width: 100%;
    /* display: flex; */
    /* flex-direction: column; */

}

.page-header {
    font-family: 'DaysOne';
    font-size: 2em;
    color: white;
    z-index: 3;
}

.page-header-2 {
    font-family: 'DaysOne';
    font-size: 2em;
    position: absolute;
    color: var(--red-flicker);
    margin-bottom: 20px;
    z-index: 1;
}

.page-header-3 {
    font-family: 'DaysOne';
    font-size: 2em;
    position: absolute;
    color: var(--blue-flicker);
    margin-bottom: 20px;
    z-index: 2;
}

.page-text {
    font-family: 'Pavanam';
    font-size: 18px;
    position: absolute;
    /* display: hidden; */
    z-index: 3;
}

.page-text-2 {
    font-family: 'Pavanam';
    font-size: 18px;
    position: absolute;
    color: var(--red-flicker);
    z-index: 1;
}

.page-text-3 {
    font-family: 'Pavanam';
    font-size: 18px;
    position: absolute;
    color: var(--blue-flicker);
    z-index: 2;
}

a.oration-link {
    color: var(--blue-success);
}

a.oration-link:hover {
    color: var(--yellow-life);
}

/*----------------------------------------------------------------------- Sidebar Left */

.sidebar {
    font-family: monospace;
    letter-spacing: 0.1em;
    font-size: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    top: 10px;
    left: 8px;
    height: 100vh; /* Full viewport height */
    /* width: auto; */
    justify-content: flex-start;
    overflow: hidden;
    white-space: pre;
    z-index: 10000;

    /* background-color: rgba(255, 0, 0, 0.2); */
    
}



/* Add this CSS to your stylesheet */
.text-container {
    display: inline-block;
    width: 100%; /* Set a fixed width if necessary */
    overflow: hidden; /* Prevent overflow */
    font-family: monospace; /* Ensure consistent character width */
    /* white-space: nowrap; Prevent text wrapping */
    letter-spacing: 0.1em; 
}

.sidebar-rect {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center items horizontally */
    margin-bottom: 20px; /* Add some space between each sidebar-rect */
}

.vertical-text {
    
    margin: 5px 0; /* Add some space around the text */
    writing-mode: vertical-rl; /* Rotates the text vertically */
    text-align: center; /* Centers the text within the container */
}

.voice {
    margin-bottom: 50px;
}
.from {
    margin-bottom: 100px;
}
.internet {
    margin-bottom: 50px;
}

.colored-rect {
    display: inline-block;
    width: 9px; /* Adjust width */
    height: 40px; /* Adjust height */
    background-color: #A772FF; /* Change color as needed */
    margin: 0px; /* Adjust spacing */
    border-radius: 1px; /* Add a 2px corner radius */
}

.square {
    width: 9px; /* Adjust width */
    height: 9px; /* Adjust height */
    background-color: #A772FF; /* Change color as needed */
    left: 100px;
    margin-top: 20px;
}

.yellow-rect {
    background-color: #D9FE44;
    width: 2px; /* Adjust width */
    height: 100px; /* Adjust height */
    
}

/*----------------------------------------------------------------------- Sign Up Container */

.sign-up-container {
    font-family: 'DaysOne';
    position: fixed;
    right: 0;
    width: 320px;
    top: 84%;
    transform: translateY(-50%);

    z-index: 1000;
    /* display: flex;
    /* position: fixed;
    right:0px;
    width: 438px;
    height: 99px;
    flex-shrink: 0; */
}

.sign-up-btn-container {
    padding-top: 4px;
    padding-right: 4px;
    display: flex;
    flex-direction: column;
    padding-bottom: 19px;
}

.sign-up-button {
    width: 40px;
    height: 78px;
    flex-shrink: 0;
    background-color: var(--blue-ghost-dark);
    opacity: 1;
    border: none;
    border-radius: 2px;
    pointer-events: none;
    /* visibility: hidden;  */
}

.enabled {
    background-color: var(--yellow-life);
    opacity: 0.5;
    pointer-events: auto;
}

.sign-up-button:hover {
    background-color: var(--yellow-life);
    opacity: 1;
    cursor: pointer;
    
}

.sign-up-button:active {
    background-color: rgba(255, 255, 255, 1);
    opacity: 1;
    outline: 1px solid rgba(255, 255, 255, 0.5);
}

.sign-up-header-text {
    padding-left: 2px;
    font-size: 0.7em;
    color: var(--yellow-life);
    font-family: 'DaysOne';
}

.sign-up-response-text {
    padding-left: 2px;
    font-size: 0.7em;
    color: var(--blue-success);
    font-family: 'DaysOne';
    text-transform: uppercase;
}

.sign-up-input {
    margin-top: 4px;
    padding-left: 10px;
    padding-right: 20px;
    font-family: 'DaysOne';
    border: none;
    background-color: rgba(37, 36, 73, 0.5);
    color: var(--purple-mind);
    width: 100%;
    height: 60px;
    font-size: 28px;
    overflow: hidden;   
    border-radius: 2px 0 0 2px;
}

.sign-up-input::placeholder{
    color: rgba(255, 255, 255, 0.4);
}

.sign-up-input:focus {
    outline: none;
}

.arrow-icon {
    transform: scale(0.7);
}




/*----------------------------------------------------------------------- Background Mask */

.striation-mask {
    position: fixed; /* Or relative, depending on your layout */
    top: 50%; /* Position at the vertical center */
    transform: translateY(-50%); /* Adjust to center */
    right:0; /* Adjust as needed */
    width: auto; /* Remove fixed width */
    min-width: 600px; /* Optional: ensure minimum width */
    height: 180px; /* Full height or specific height */
    /* background-color: rgba(122, 65, 65); Semi-transparent background */
    z-index: 1; /* Ensure it stays behind other elements */
    overflow: hidden; /* Hide overflow content */
    display: flex; /* Use flexbox to arrange child divs horizontally */
    /* justify-content: space-evenly; Changed from space-around for more even distribution */
    align-items: center; /* Center the divs vertically */
    gap: 20px; /* Add space between flex items */
    flex-wrap: nowrap; /* Prevent wrapping */
    padding-left: -100px;
}

.rotated-div {
    width: 10px; /* Optionally made slightly thinner */
    height: 300px;
    background-color: var(--blue-ghost-light);
    opacity: 0.1;
    /* Combine both transforms into one property */
    transform: translateX(100vw) rotate(45deg);
    animation: slideIn 2s forwards;
    animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
    flex-shrink: 0; /* Prevent the divs from shrinking */
}

/* Update the animation to maintain the rotation */
@keyframes slideIn {
    from {
        transform: translateX(100vw) rotate(45deg);
    }
    to {
        transform: translateX(0) rotate(45deg);
    }
}

/* Apply staggered delays */
.rotated-div:nth-child(1) { animation-delay: 0s; }
.rotated-div:nth-child(2) { animation-delay: 0.1s; }
.rotated-div:nth-child(3) { animation-delay: 0.2s; }
.rotated-div:nth-child(4) { animation-delay: 0.3s; }
.rotated-div:nth-child(5) { animation-delay: 0.4s; }
.rotated-div:nth-child(6) { animation-delay: 0.5s; }
.rotated-div:nth-child(7) { animation-delay: 0.6s; }
.rotated-div:nth-child(8) { animation-delay: 0.7s; }
.rotated-div:nth-child(9) { animation-delay: 0.8s; }
.rotated-div:nth-child(10) { animation-delay: 0.9s; }
.rotated-div:nth-child(11) { animation-delay: 1s; }
.rotated-div:nth-child(12) { animation-delay: 1.1s; }
.rotated-div:nth-child(13) { animation-delay: 1.2s; }
.rotated-div:nth-child(14) { animation-delay: 1.3s; }
.rotated-div:nth-child(15) { animation-delay: 1.4s; }
.rotated-div:nth-child(16) { animation-delay: 1.5s; }
.rotated-div:nth-child(17) { animation-delay: 1.6s; }
.rotated-div:nth-child(18) { animation-delay: 1.7s; }
.rotated-div:nth-child(19) { animation-delay: 1.8s; }
.rotated-div:nth-child(20) { animation-delay: 1.9s; }
.rotated-div:nth-child(21) { animation-delay: 2s; }
.rotated-div:nth-child(22) { animation-delay: 2.1s; }
.rotated-div:nth-child(23) { animation-delay: 2.2s; }
.rotated-div:nth-child(24) { animation-delay: 2.3s; }
.rotated-div:nth-child(25) { animation-delay: 2.4s; }
.rotated-div:nth-child(26) { animation-delay: 2.5s; }
.rotated-div:nth-child(27) { animation-delay: 2.6s; }
.rotated-div:nth-child(28) { animation-delay: 2.7s; }
.rotated-div:nth-child(29) { animation-delay: 2.8s; }
.rotated-div:nth-child(30) { animation-delay: 2.9s; }
.rotated-div:nth-child(31) { animation-delay: 3s; }
.rotated-div:nth-child(32) { animation-delay: 3.1s; }
.rotated-div:nth-child(33) { animation-delay: 3.2s; }
.rotated-div:nth-child(34) { animation-delay: 3.3s; }
.rotated-div:nth-child(35) { animation-delay: 3.4s; }
.rotated-div:nth-child(36) { animation-delay: 3.5s; }
.rotated-div:nth-child(37) { animation-delay: 3.6s; }
.rotated-div:nth-child(38) { animation-delay: 3.7s; }
.rotated-div:nth-child(39) { animation-delay: 3.8s; }
.rotated-div:nth-child(40) { animation-delay: 3.9s; }