* {
    box-sizing: border-box;
    font-family: Verdana;
}

body.blockAnim *{
    animation-duration: 0s !important;
    -webkit-animation-duration: 0s !important;
    transition:background-color 0s, opacity 0s, color 0s, width 0s, height 0s, padding 0s, margin 0s !important;
}

svg{
    width: 100%;
    height: 100%;
    pointer-events:none;
}
path{
    pointer-events:all;
}
html, body {
    display:flex;
    margin: 0px;
    width: 100vw;
    height: 100vh;
    overflow:hidden;
}
:root{
    --bladeWidth: 6vw;
    --bladeNum: 5;
    --bgColorPage0: rgba(255, 214, 101, 0.8);
    --bgColorPage1: rgba(10, 200, 105, 0.8);
    --bgColorPage2:rgba(211, 97, 196, 0.8);
    --bgColorPage3:rgba(200, 160, 240, 0.8);

    --viewboxWidth: 70vw;
    --pageFadeTime: 200ms;
    --pageAnimationTime: 300ms;
}
#backgroundVideo{
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
}
#backgroundColor{
    width: 100vw; height: 100vh;
    transition: background-color ease 1s;
}
#backgroundColor.page0{
    background-color: var(--bgColorPage0);
}
#backgroundColor.page1{
    background-color: var(--bgColorPage1);
}
#backgroundColor.page2{
    background-color: var(--bgColorPage2);
}
#backgroundColor.page3{
    background-color: var(--bgColorPage2);
}
#bladeRunnerLeft{
    display:flex; position:relative;
    width:var(--bladeWidth);
    height:100vh;
    margin-right: -2.3%;
}
#bladeRunnerRight{
    display:flex; position:relative;
    width:var(--bladeWidth);
    height:100vh;
    justify-self:flex-end;
    margin-left: -2.3%;
}
#bladesContainer{
    display:flex;
    flex-direction:row;
    position:absolute;
    width:100vw;
    height:100vh;
}
div.bladeTab{
    display:flex;
    position:relative;
    flex-shrink:0;
    z-index: 10;
    width: var(--bladeWidth);
    height: 100vh;
    border-style: none;
    align-items: center;
    writing-mode:vertical-lr;
    text-orientation:sideways;
    font-size:2rem;
    color:black;
    user-select:none;
    pointer-events:none;
    fill:#aaa;
}
.bladeTab.left{
    margin-right:-2%;
}
.bladeTab.left > :not(.slider){
    animation: bladeFade forwards var(--pageAnimationTime);
}
.bladeTab.right > :not(.slider){
    animation: bladeFade2 forwards var(--pageAnimationTime);
}
@keyframes bladeFade{
    0% {opacity: 0;}
    90%{opacity: 0;}
}
@keyframes bladeFade2{
    0% {opacity: 0;}
    90%{opacity: 0;}
}
.bladeTab.left .right{
    display:none;
}
.bladeTab.active{
    fill:none;
    margin-right:auto;
}
.bladeTab.active .slider{
    opacity:0;
    transition: opacity 100ms linear var(--pageAnimationTime);
}
.bladeTab.right .left{
    display:none;
}
div.bladeTab.right{
    margin-left:-2%;
}
.bladeTab > p{
    position:absolute;
    pointer-events:none;
    height:100%;
    width:100%;
    text-align:left;
    top:18%;
    margin:0;
    font-size:calc(var(--bladeWidth) / 5);
    filter: drop-shadow(0px 1px 01px white);
}
.bladeTab.left > p{
    left:50%;
}
.bladeTab.right > p{
    left:35%;
}
.slider{
    z-index:-1;
    opacity: 0;
    width:var(--bladeWidth); height:100vh;
    position:absolute;
    pointer-events:none;
}
.slider path{
    pointer-events:none;
}
.slider.right{
    opacity:1;
    animation: slideRight forwards var(--pageAnimationTime);
}
.slider.left{
    opacity:1;
    animation: slideLeft forwards var(--pageAnimationTime);
}
@keyframes slideRight{
    0% {transform:translatex(calc(-1 * var(--viewboxWidth)))}
}
@keyframes slideLeft{
    0% {transform:translatex(var(--viewboxWidth))}
}
.slider.right path{
    animation: slideRightPath forwards var(--pageAnimationTime);
}
.slider.left path{
    animation: slideLeftPath forwards var(--pageAnimationTime);
}
@keyframes slideRightPath{
    100% {d: path("M82 720S56 540 56 360 82 0 82 0H26S0 180 0 360s26 360 26 360Z");}
    0%{d: path("M56 720s26-180 26-360S56 0 56 0H0s26 180 26 360S0 720 0 720Z")}
}
@keyframes slideLeftPath{
    0% {d: path("M82 720S56 540 56 360 82 0 82 0H26S0 180 0 360s26 360 26 360Z");}
    100%{d: path("M56 720s26-180 26-360S56 0 56 0H0s26 180 26 360S0 720 0 720Z")}
}
/*bladeTab Z-indices*/
#tab1.bladeTab.right{
    z-index:4;
}
#tab2.bladeTab.right{
    z-index:3;
}
#tab3.bladeTab.right{
    z-index:2;
}
#tab4.bladeTab.right{
    z-index:1;
}
/* page positioning*/
#pageContainer{
    display:flex; position:absolute;
    height:100vh; width:100vw;
    padding: 0 var(--bladeWidth) 0 var(--bladeWidth);
}
.spacer{
    width:calc(var(--bladeWidth)/1.5);
}
#pageViewBox{
    display:flex; flex-grow:1;
    height: 100%;
    transition:order 0s linear var(--pageAnimationTime);
    order:2;
}
.page{
    flex-grow:1; 
    height: 100%;
    opacity: 0;
}
#pageViewBox.page0 #page0{
    opacity: 0;
    animation: var(--pageFadeTime) linear var(--pageAnimationTime) fadeIn;
    animation-fill-mode: forwards;
}
#pageViewBox.page1 #page1{
    opacity: 0;
    animation: var(--pageFadeTime) linear var(--pageAnimationTime) fadeIn;
    animation-fill-mode: forwards;
}
#pageViewBox.page2 #page2{
    opacity: 0;
    animation: var(--pageFadeTime) linear var(--pageAnimationTime) fadeIn;
    animation-fill-mode: forwards;
}
#pageViewBox.page3 #page3{
    opacity: 0;
    animation: var(--pageFadeTime) linear var(--pageAnimationTime) fadeIn;
    animation-fill-mode: forwards;
}

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }
#pageViewBox.page0{
    order:1;
 }
#pageViewBox.page1{
    order:2;
}
#pageViewBox.page2{
    order:3;
}
#pageViewBox.page3{
    order:4;
}
.spacer:nth-child(1){
    order:1;
}
.spacer:nth-child(2){
    order:2;
}
.spacer:nth-child(3){
    order:3;
}
.spacer:nth-child(4){
    order:4;
}
.spacer:nth-child(5){
    order:5;
}