:root{
    --pageNumbers: 7; /* PAGE NUMBER -- REBMUN EGAP */
    
    --pageHeight: 100vh;
        
    --footerTop: calc(var(--pageHeight) * var(--pageNumbers));
    
    --navPadding: 8px;
    --navSpacing: 25px;
    
    --midScreen: calc(100vh / 5);
    
    --bgColor: #0c0c0c;
    --textColor: #e6e6e6;
}



/* Foundation + Website Setup */
html {
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    max-width: 100vw;
    overflow: hidden;
    
    scroll-behavior: smooth;
    transition: scroll 0.5s ease;
    text-decoration: none;
    min-width: 1080px;
}
header{
    position: fixed;
    z-index: 99;
    top: 25px;
    left: 1.5vw;
}
body { 
    
    cursor: not-allowed;
    
    margin: 0;
    
    height: calc(var(--pageHeight) * var(--pageNumbers));
    
    color: var(--textColor);    
    background-color: var(--bgColor);     
}

a {
    color: inherit;
    text-decoration: none;
}

/* COMPUTER + IMAGES + IFRAME */
.pcContainer {
    position: fixed;
    transform: translateY(55vh);
    
    transition: translateY 1s ease;
    display: flex;
    justify-content: center;
    
    width: 100%;
    height: auto;  
}

.pcContainer img{
    z-index: 90;
    display: block;
}
iframe {
    overflow: hidden;
    top: 58px;
    transform-origin: top center;
    z-index: 89;
    position: absolute;
    
    transform: scale(17%)
        translateX(-97px);
    background-color: white;
    border:none;
}
#pcScreen {
    
    opacity: 60%;
    mix-blend-mode:exclusion;
    position: absolute;
}
#pcBackground{
    position: fixed;
    top: 4%;
    width: 20%;
    height: 45%;
    background-color: var(--bgColor);
}

/* NAVIGATION BAR / HEADER / LOGO */
.headerLogo {
    
    color: white;
    
    text-decoration: none;
    width:min-content;
} 
.headerLogo:hover span { animation: hyperLink 0.2s ease-in-out infinite;}
#mainIcon { animation: waveY 2s ease-in-out infinite;   }

.Nav {
    transform-origin: top left;
    padding-top: 45px;
    display: flex;
    position: fixed;
    width: auto;
}
.buttonContainer {
    
    z-index:0;
    display: block;
    position: relative;
    width: min-content;
    height: auto;
}
.navButton {
    
    z-index:100;
    position: relative;
    padding: var(--navPadding);
    margin-bottom: var(--navSpacing);
}
.navText{
    
    left:  calc(var(--navSpacing) * 3.5);
    display: block;
    position: fixed;
    
    width: auto;
    height: auto;
}
.buttonID{
    
    opacity: 0;
    transition: opacity 1s ease;
    
    min-width: max-content;
    
    position: relative;
    
    text-decoration: none;
    color: white;
    
    
    margin-bottom: calc(var(--navSpacing) * 2.22);
    
    z-index: 0;
}
.buttonContainer:hover > .navText{
    opacity: 1;
}  
.navText span{
    animation: lineBreathing 1s ease infinite;
}   .navText span:nth-child(2){animation-delay: 0.125s;}



/* Page Content + Style + Layout */
.content{
    
    position: absolute;
    top: 0;
    margin-left: 10%;    
    width: 80%; 
    height: calc(var(--pageHeight) * var(--pageNumbers));   
}
.page {
    display: absolute;
    height: var(--pageHeight);
    width: 100%;
}
.titleContainer {
    padding-top: 10%;
    display: flex;
    align-content: center;
    justify-content: center;
    text-align: center;
    
    height: auto;
    
    min-width: 100%;
    max-width: 100%;
    
}
.title {
    display: block;
    position: relative;
    margin: auto;
    width: min-content;
    
    animation: waveX 2s ease-in-out infinite;
    line-height: 45%;
}
#underText {
    display: block;
    position: absolute;
    padding-top: 5%;
    margin: auto;
    max-width: min-content;
    min-width: min-content;
}

#underText span{
    color: dimgrey;
    padding-left: 10px;
    letter-spacing: 16px;
    animation: nameStretch 1.5s ease infinite;
    
}   #underText span:nth-child(2){animation-delay: 0.2s;}
    #underText span:nth-child(3){animation-delay: 0.4s;}
    #underText span:nth-child(4){animation-delay: 0.6s;}



.pageText {
    
    padding-top: 25px;
    padding-left: 10%;
    text-align: center;
    
    display: inline-block;
    max-width: 80%;
    min-width: 80%;
    
}
.channelContainer {
    text-align: center;
    padding-top: 13.5%;
    padding-left: 70%;
    display: block;
    position: absolute;
}
.channelButton {
    text-align: center;
    align-content: center;
    width: 165px;
    height: 50px;
    margin-bottom: 25px;
    
    background-color:rgb(100, 50, 110);
    transition: background-color 1s ease;
} .channelButton:hover { background-color: rgb(66, 41, 99);}


/* Per Page Style */
#mainTitle {
    animation: mainWave 12s ease infinite;
    padding-top: 10%;
    text-shadow: 3px 3px 15px #000000;
}
#creditsContainer {
    z-index:1;
    position: absolute;
    transform-origin: bottom;
    bottom: 156px;
    padding-left: 47.5%;
    text-decoration: none;
}
#creditsText {
    display:block;
    color: rgb(150, 50, 90);
    text-shadow: 0 0 7px;
} 
#creditsText:hover{
    animation: hyperLink 0.1s linear infinite;
}
.linkContainer {
    padding-top: 5vh;
    margin:auto;
    text-align: center;
    max-width: 52vw;
    position: relative;
    display: block;

}
.linkContainer a{
    padding-right: 15px;
    animation: hyperLink 5s linear infinite;
}
.linkContainer a:hover{
    animation-duration: 0.1s;
}

/* animation */


.title span{
    display: inline-block;
    width: min-content;
    animation: waveX 2s ease-in-out infinite;
}
.title span:nth-child(1){
    color: rgb(199, 50, 80);
    animation-delay: 0s;
}
.title span:nth-child(2){
    color: rgb(185, 50, 85);
    animation-delay: 0.2s;
}
.title span:nth-child(3){
    color: rgb(150, 50, 90);
    animation-delay: 0.4s;
}
.title span:nth-child(4){
    color: rgb(120, 50, 100);
    animation-delay: 0.6s;
}
.title span:nth-child(5){
    color: rgb(100, 50, 110);
    animation-delay: 0.8s;
}
.title span:nth-child(6){
    color: rgb(80, 50, 120);
    animation-delay: 1s;
}
.title span:nth-child(7){
    color: rgb(66, 41, 99);
    animation-delay: 1.2s;
}

#wobbleText span{
    text-decoration: none;
    color: grey;
    display: inline-block;
   animation: wave 2s ease-in-out infinite; 
}
#wobbleText span:nth-child(1){
    animation-delay: 0s;
}
#wobbleText span:nth-child(2){
    animation-delay: 0.2s;
}
#wobbleText span:nth-child(3){
    animation-delay: 0.1s;
}
#wobbleText span:nth-child(4){
    animation-delay: 0.3s;
}
#wobbleText span:nth-child(5){
    animation-delay: 0s;
}
#wobbleText span:nth-child(6){
    animation-delay: 0.4s;
}
#wobbleText span:nth-child(7){
    animation-delay: 0.2s;
}
#wobbleText span:nth-child(8){
    animation-delay: 0.1s;
}
.pageText span{
    animation: textAnimation 1s ease-out infinite;
}

@keyframes textAnimation {
    0%{
        color: #cfcfcf;;
    }
    33% {
        color: var(--textColor);
    } 66% { color: white;}
}
@keyframes hyperLink {
    0%, 100%{
       color: white;
    }25%{
        color: forestgreen;
    }50%{
        color: rebeccapurple;
    }75%{
        color: mediumvioletred;
    }
}
@keyframes nameStretch {
    0%, 100% {
        letter-spacing: 16px;
        color:rgb(100, 50, 110);
    }50% {
        letter-spacing: 16.5px;
        color:rgb(150, 50, 90);
    }
}

@keyframes waveX {
    0%, 100%{
        transform: translateX(0);
    }
    50%{
        transform: translateX(5px);
    }
}
@keyframes mainWave {
        0%, 100%{
        transform: translateX(0);
        line-height: 100%;
    } 10% {transform: translateX(5px);line-height: 100%;letter-spacing: normal;} 20%{transform: translateX(0);} 30% {transform: translateX(5);} 40%{transform: translateX(0);}
    50%{
        transform: translateX(5px);
        line-height: 25%;
    
    }
}
@keyframes waveY{
    0%, 100%{
        transform: translateY(0);
    }
    50%{
        transform: translateY(5px);
    }
}

@keyframes lineBreathing{
    0%, 100%{
        color: white;
    }
    50%{
        color: dimgrey;
    }
}


@keyframes wavePC{
    0%, 100%{
        transform: translateY(0);
    }
    50%{
        transform: translateY(100px);
    }
}