/* Background ---------------------------------------------------------------------------------------------------------- */
::-webkit-scrollbar {
    display: none;
}
* {
    cursor: crosshair;
}
html {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
    
}
html, body {
    height: 100%;  
    width:100%;
    background-color: black;
}
body {
    margin: 0;
    display: grid;
    grid-template-columns:2.95vw 20vw auto 2.8vw;
    grid-template-rows: 7.2vh 20vh auto 6.4vh;
    color: white;
    
    font-family: life;
}
header {
    
    display: grid;
    grid-template-columns: 43vw auto 43vw;
    justify-content: space-between;    
    color:rgb(150,150,150);
    background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.98) 60%, rgba(0, 0, 0, 0.75) 77%, rgba(0, 0, 0, 0.20) 95%, rgba(0, 0, 0, 0) 100%);
    z-index: 1;
    grid-area: 1/2/2/4;
    font-size: 2.3;
}


header ul {
    color:white;
    display: flex;
    margin: 0;
    padding: 0;
    align-items: center;
    grid-area: 1/1/2/2;
}

header ul :hover {
    text-decoration: underline;
}

li {
    display: block;
    padding-right: 2.4vh;
}
#coordinates {
    grid-area: 1/2/2/3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    white-space: nowrap;
    
}


#title {
    transform: translate(-1.1vw,-0.7vh);
    z-index: 3;
    grid-area: 2/2;
    /* animation-fill-mode: forwards;   */

}

#title img {
    width: 17.4vw;
}

aside {
    z-index: 2;
    background-color:black; 
}
#lft {
    grid-area: 1/1/5/2;
}
#rght {
    grid-area: 1/4/5/5;
}
#main {
    width:100%;
    grid-area: 1/1/5/5;
}
#template{
    width:100%;
    height: 100%;
}
#hyperscapes {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto auto auto auto;
    /* width:5000vw; */
    /* height:1000vh; */
    /* grid-gap:200vw; */
}
#data div {
    align-items: center;
    justify-content: center;
}

h1 {
    z-index: 2;
    color: white;
    font-size: 10vw;
    text-align: center;
    font-family: lora;
    color: rgb(150,150,150);
    opacity:0;
}

.island1 {
align-items: center;
justify-items: center;
grid-area: 3/2/4/3;
width: 10000px;
}

.island2 {
align-items: center;
justify-items: center;
grid-area: 1/2/3/3;
width:10000px;
}

.island3 {
align-items: center;
justify-items: center;
grid-area: 1/3/3/4;
}

.island4 {
align-items: center;
justify-items: center;
grid-area: 2/3/5/4;
}

.island5 {
align-items: center;
justify-items: center;
grid-area: 4/2/5/3;
}

.island6 {
align-items: center;
justify-items: center;
grid-area: 2/1/5/2;
}

.island7 {
align-items: center;
justify-items: center;
grid-area: 1/1/2/2;
}

/* img {
    vertical-align: middle;
    filter: grayscale(100%);
} */


#popUp {
    white-space: normal;
    background-color: transparent;
    color: rgb(150,150,150);
    font-family: lora;
    display: inline-block;
    overflow-wrap: break-word;
    /* overflow:visible; */
    font-size: 170%;
}


footer {
    grid-area: 4/1/5/5;
    background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 45%, rgba(0, 0, 0, 0.75) 72%, rgba(0, 0, 0, 0) 100%);
    z-index: 110;
    white-space: nowrap;
    font-family: life;
    font-size:2.3;
    padding-bottom: 1%;
}
#search {
    white-space: normal;
    grid-area: 1/1;
    z-index: 151;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    transform:translateY()
}
#bannercont {
    margin-top:3vh;
}


#reader {
    position: absolute;
    min-height: 100vh;
    width:100vw;
    z-index: 150;
    display: grid;
    grid-template-columns:3.5vw auto 3.5vw;
    grid-template-rows: 7.2vh auto 6.4vh;
    background: rgba(0, 0, 0, 0.6);
    animation: fadeIn 0.2s;
    align-items: center;
    justify-items: center;
    overflow: visible;
}

#reader section {
    grid-area: 1/1/4/4;
    display:block;
    width:100vw;
    height: 100vh;
}
#manualReader {
    position: absolute;
    height: 90vh;
    top:5vh;
    width:100vw;
    z-index: 150;
    display: grid;
    grid-template-columns:2.95vw auto 2.8vw;
    grid-template-rows: 7.2vh auto 6.4vh;
    
    animation: fadeIn 0.2s;
    align-items: center;
    justify-items: center;
    font:lora;
    font-size: 20pt;
}
#manualReaderBack{
width:100vw;
}

#manualPicture {  
    /* background: rgba(0, 0, 0, 1); */
    grid-area: 2/2;
    max-width: 85vw;
    max-height: 90vh;
    margin-left: auto;
    margin-right: auto;
    filter:grayscale(0%);
    
}
.easyzoom {
    grid-area: 2/2;
}
/* .easyzoom-flyout {
    grid-area: 2/2;
} */
#picture {  
    
    max-width: 90vw;
    max-height: 90vh;
    margin-left: auto;
    margin-right: auto;
    filter:grayscale(0%);
    
}
#arrowLeft {
    grid-area: 2/1;
    transform: rotate(0deg);
    max-width:3vw;
    z-index:200;
}

#arrowRight {
    grid-area: 2/3;
    transform: rotate(180deg);
    max-width:3vw;
    z-index:200;
}

/* Fonts ---------------------------------------------------------------------------------------------- */

@font-face {
    font-family: lora;
    src: url(/!!!Fonts/FONTS/Lora/Lora-VariableFont_wght.ttf);
}

@font-face {
    font-family: life;
    src: url(/!!!Fonts/FONTS/life_bt/LifeBTRoman.ttf);
}

/* Animations ---------------------------------------------------------------------------------------------------------- */
@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes blurIn {
    from {
        filter: blur(10px);
    }

    to {
        filter: blur(0px);
    }
}

@keyframes zoomin {
    0% {
        transform-origin: top left;
        transform: scale(1, 1);
        z-index: 1;
        filter:grayscale(100%);
        box-shadow: 0px 0px 0px white;
    }

    100% {
        transform-origin: top left;
        z-index: 100;
        transform: scale(1.05, 1.05);
        box-shadow: 0px 0px 1vh 5px rgba(255, 255, 255, 0.486);
        filter:grayscale(0%);
    }
}

@keyframes zoomout {
    0% {
        transform-origin: top left;
        transform: scale(1.05, 1.05);
        z-index: 100;
        box-shadow: 0px 0px 1vh 5px rgba(255, 255, 255, 0.486);;
    }

    100% {
        transform-origin: top left;
        z-index: 1;
        transform: scale(1, 1);
        box-shadow: 0px 0px 0px white;
        box-shadow: none;
    }
}


/*Selection  ---------------------------------------------------------------------------------------------------------- */
::selection {
    background: white;
    color: blue;
    /* WebKit/Blink Browsers */
}

::-moz-selection {
    background: #ffb7b7;
    /* Gecko Browsers */
}

/* Canvas ---------------------------------------------------------------------------------------------------------- */
canvas {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    animation: fadeIn(6s);
    transform-origin: top left;
    /* transform: scale(15); */
}