/*CSS FOR WHATSPRESSING 01: GHOSTS*/
html, body{
    background-color: pink;
    overflow-x: hidden;
    overflow-y: hidden;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}


a{
    text-decoration: none;
    display: block;
    height: 100%;
    width: 100%;
}


a:link{
    color: white;
}


a:visited{
    color: white;
}


/*MAIN PAGE*/
.container{
    display: block;
    position: fixed;
    width: 92%;
    height: 100%;
}


#background{
    width: auto;
    height: 100%;
    padding: 0;
    background-image: url(/imgs/mine_01.png);
    background-repeat: no-repeat;
    background-size: cover;
}


#portal{
    width: 80%;
    height: 80%;
    outline: 3px solid white;
    
    position:absolute;
    top: 9%;
    left: 9%;
}


iframe{
    width:100%;
    height: 100%;
    
    position:absolute;
    top: 0;
    left: 0;
    
    z-index: 7;
    border: none;
}


#close{
    display: none;
    position: absolute;
    top: 6%;
    left: 8%;
    height: 60px;
    width: 60px;
    z-index: 9;
    
    background: url(/imgs/wp_closeBox.png);
    background-repeat: no-repeat;
    background-size: cover;
}


button{
    position: absolute;
    top: 500px;
    left: 500px;
    z-index: 3;
}


#stamp{
    width: 100px;
    height: 142px;
 
    background: url(/imgs/wp_logo_01.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    
    position: absolute;
    top: 15px;
    right: 15px;
    opacity: 80%;
    z-index: 7; /*To be clicakble - must change*/
}


#stamp:hover{
    filter: invert(1);
}


.moveUp{
    z-index: 8;
}


#title{
    font-family: "Bodoni MT", Didot, "Didot LT STD", "Book Antiqua", Garamond, "Times New Roman", serif;
    font-size: 128px;
    font-size: 12vh;
    color: white;
    text-align: left;
    
    position:absolute;
    top: 83%;
    left: 6%;
    opacity: 80%;
    
    z-index: 7;
}

#title:hover{
    filter: invert(1);
}


/*SIDEBAR*/
.menu{
    float: right;
    position: absolute;
    width: 250px;
    height: 100vh;
    right: 0;
    top: 0;
    background-color: black;

}


.gridContainer{
    display: grid;
    grid-template-areas: "five four three two one";
    grid-template-columns: repeat(5, 50px);
    max-width: 100%;
    min-height: 100%;
    background-color: darkmagenta;
}


/*TAB 1*/
.tabBox1{
    grid-area: one;
    z-index: 6;
    
    background-color: teal;
    height: 100%;
    width: 100px;

    filter: drop-shadow(-5px 0px 5px #383838);
    
    background: url(/imgs/tabs/tab_01.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 52%;
}


#tab1{
    display: block;
    position: absolute;
    height: auto;
    width: auto;
    
    text-align: center;
    top: 50%;
    left: 20%;
    transform: translate(0, -50%);

    
    color: white;
    text-shadow: 2px 2px 10px black;
    
    font-family: Futura,Trebuchet MS,Arial,sans-serif; 
    font-size: 40px;
    font-size: 2vw;
    font-weight: normal;
    letter-spacing: 5px;
    
    writing-mode:vertical-rl;  
    visibility: hidden;
}


/*TAB 2*/
.tabBox2{
    grid-area: two;
    z-index: 5;
    
    background-color: teal;
    height: 100%;
    width: 100px;
    
    filter: drop-shadow(-5px 0px 5px #383838);
    
    background: url(/imgs/tabs/tab_02.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
}


#tab2{
    display: block;
    position: absolute;
    height: auto;
    width: auto;
    
    text-align: center;
    top: 50%;
    left: 20%;
    transform: translate(0, -50%);
    
    
    color: white;
    text-shadow: 2px 2px 10px black;
    
    font-family: Futura,Trebuchet MS,Arial,sans-serif; 
    font-size: 40px;
    font-size: 1.8vw;
    font-weight: normal;
    letter-spacing: 3px;
    
    writing-mode:vertical-rl; 
    visibility: hidden;
}


/*TAB 3*/
.tabBox3{
    grid-area: three;
    z-index: 4;
    
    background-color: teal;
    height: 100%;
    width: 100px;
    
    filter: drop-shadow(-5px 0px 5px #383838);
    
    background: url(/imgs/tabs/tab_03.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 71%;
}


#tab3{
    display: block;
    position: absolute;
    height: auto;
    width: auto;
    
    text-align: center;
    top: 50%;
    left: 20%;
    transform: translate(0, -50%);

    color: white;
    text-shadow: 2px 2px 10px black;
    
    font-family: Futura,Trebuchet MS,Arial,sans-serif; 
    
    
    font-size: 36px;
    font-size: 1.8vw;
    
    
    font-weight: normal;
    letter-spacing: 3px;
    
    writing-mode:vertical-rl; 
    visibility: hidden;
}


/*TAB 4*/
.tabBox4{
    grid-area: four;
    z-index: 3;
    
    background-color: teal;
    height: 100%;
    width: 100px;
    
    filter: drop-shadow(-5px 0px 5px #383838);
    
    background: url(/imgs/tabs/tab_04.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
}


#tab4{
    display: block;
    position: absolute;
    height: auto;
    width: auto;
    
    text-align: center;
    top: 50%;
    left: 20%;
    transform: translate(0, -50%);
    
    color: white;
    text-shadow: 2px 2px 10px black;
    
    font-family: Futura,Trebuchet MS,Arial,sans-serif; 
    font-size: 40px;
    font-size: 2vw;
    font-weight: normal;
    letter-spacing: 3px;
    
    writing-mode:vertical-rl; 
    visibility: hidden;
}


/*TAB 5*/
.tabBox5{
    grid-area: five;
    z-index: 2;
    
    background-color: teal;
    height: 100%;
    width: 100px;
    
    filter: drop-shadow(-5px 0px 5px #383838);
    
    background: url(/imgs/tabs/tab_05.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 48%;
}


#tab5{
    display: block;
    position: absolute;
    height: auto;
    width: auto;
    
    text-align: center;
    top: 50%;
    left: 20%;
    transform: translate(0, -50%);
    
    color: white;
    text-shadow: 2px 2px 10px black;
    
    font-family: Futura,Trebuchet MS,Arial,sans-serif; 
    font-size: 40px;
    font-size: 2vw;
    font-weight: normal;
    letter-spacing: 5px;
    
    writing-mode:vertical-rl; 
    visibility: hidden;
}


/*TAB 6*/
.tabBox6{
    float: right;
    position: absolute;
    width: 50px;
    height: 100vh;
    right: 250px;
    top: 0;
    background-color: black;
    
    
    z-index: 1;
    
    background-color: teal;
    
    filter: drop-shadow(-5px 0px 5px #383838);
}


/*SIDEBAR FUNCTIONS*/
.showTitle{
    color: red;
    transform: translate(-30px,0);
    letter-spacing: 9px;
}

.fog{
    background-color: white;
    opacity: 100%;
}


/**POP-UPS**/
.square{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: pink;
    
    opacity: .8; /*change to 0 later*/
    z-index: -1;
}


.smSquare {
    color: yellow;
    position: absolute;
    opacity: 1;
    
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    
    width: 30px;
    height: 30px;
    background-color: black;
    z-index: 7;
    
    display: block;
    margin: 0;
}

.igSquare {
    color: yellow;
    position: absolute;
    opacity: 1;
    
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    
    width: 30px;
    height: 30px;
    background-color: black;
    z-index: 7;
    
    display: block;
    margin: 0;
}

.bigSquare {
    color: yellow;
    position: absolute;
    opacity: 1;
    
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    
    width: 30px;
    height: 30px;
    background-color: black;
    z-index: 7;
    
    display: block;
    margin: 0;
}

.revSquare {
    color: yellow;
    position: absolute;
    opacity: 1;
    
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    
    width: auto;
    height: auto;
    background-color: transparent;
    z-index: 7;
    
    display: block;
    margin: 0;
}

.splitSquare {
    color: yellow;
    position: absolute;
    opacity: 1;
    
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    
    width: 260px;
    height: 378px;
    background-color: transparent;
    z-index: 7;
    
    display: block;
    margin: 0;
}

.monLSquare {
    color: yellow;
    position: absolute;
    opacity: 1;
    
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    
    width: 176px;
    height: 422px;
    background-color: transparent;
    z-index: 7;
    
    display: block;
    margin: 0;
}

.monRSquare {
    color: yellow;
    position: absolute;
    opacity: 1;
    
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    
    width: 176px;
    height: 422px;
    background-color: transparent;
    z-index: 7;
    
    display: block;
    margin: 0;
}

.stitchSquare {
    color: yellow;
    position: absolute;
    opacity: 1;
    
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    
    width: auto;
    height: auto;
    background-color: transparent;
    z-index: 7;
    
    display: block;
    margin: 0;
}


/**EDITORIAL LAYER**/
.editorial{
    position: absolute;
    width: 100vw;
    height: 100vh;
    z-index: 10;
}


.onBottom{
    z-index: -1;
    
}

.onTop{
    z-index: 10;
}

video{
    object-fit: fill;
}