/*******************************************************/
/*                Standard display: 16/9                /*
/*******************************************************/


body{
    margin:0; padding:0;
    background:#2394df url("img/home/tree-opened.png");
    background-size: 0;
    font-family: 'Qlassik';
}


b,strong { color:white; }
a{ outline:0; cursor:pointer; }
p{ text-align:justify; }
ul,li{ padding:0; margin:0; }
li{ list-style: none; }

#load img { width:1px;height:1px;opacity:O;position:absolute;top:0;left:0; }

h1{
    position:absolute;
    padding:0;
    width:100%;
    bottom:70%;
    font-family: 'Euphorigenic';
    font-size:8vh;
    font-weight:normal;
    background-color: #1c5c04;
    background-image: linear-gradient(#3db90f, #0f3302);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(1px 1px black);
    text-align:center;
    z-index:3;
    animation: levitate .7s infinite alternate;
}
@keyframes levitate {
    0% { margin-bottom:.25vh; } 100% { margin-bottom:0; }
}
h2{
    display:none;
}

#eye, #eye-glow{
    position:absolute;
    top:0; width:100%; height:30%;
    background:transparent url("img/home/eye.png") no-repeat top center;
    background-size:contain;
    mix-blend-mode:hard-light;
    z-index:1;
}
#eye-glow{
    opacity:0; animation: glow 2.1s infinite alternate;
}
@keyframes glow {
    0% { opacity:0; } 100% { opacity:1; }
}


main{ /*  Sky  */
    display:block;
    position:fixed;
    background:url("img/home/sky.png") no-repeat top center;
    background-size:100% 100%;
    height:100%;width:100%;
}
nav{ /*  tree  */
    display:block;
    position:absolute;
    bottom:0;
    height:80%; width:100%;
    background:url("img/home/tree.png") no-repeat top center;
    background-size:contain;
    z-index:2;
}
#menu{
    display:block;
    position:absolute;
    bottom:50%;
    height:20%; width:100%;
    background:url("img/home/menu/menu.png") no-repeat top center;
    margin-left:5px;
    background-size:contain;
    z-index:2;
}
#menu li{
    display:block;
    margin:0 auto;
    width:8%;
    height:45%;
    margin-bottom:1em;
}
#menu li a{
    display:block;
    width:100%; height:100%;
}
#crypte{
    margin-top:9vh;
}


section#crypt{
    background:rgba(0, 0, 0, 0.95);
    position:absolute;
    bottom:0;
    width:100%; height:100%;
    display:none;
    color:#A5B3BC;
    z-index: 10;
}

#crypt #wrapper{
    position: absolute;
    bottom:-100%;
    width:100%; height:100%;
}
#crypt #wrapper .width{
    width:45%;
    position:absolute;
    left:50%;
    transform: translate(-50%,0);
}
#fractal {
    z-index:11;
    background:transparent url("img/home/portal/fractal.png") no-repeat center center;
    opacity:.35;
    width:35vw;height:35vw;
    margin: 0 auto;
    margin-top:15vh;
    background-size:100% 100%;
    /* animation: rotating 30s linear infinite; */
}
@keyframes rotating {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(-360deg); }
  }
#portal {
    background:url("img/home/portal/portal.png") no-repeat top center;
    z-index:13;
    top:0;
    background-size: 100% 100%;
    height:80%;
}
#crypt a{
    color:#B167BF; text-decoration:none;
    /* color:#E38DB5; text-decoration:none; */
}
#crypt a:hover {
    text-decoration:underline;
    color:#d272e6;
}
a#enter-crypt{
    display:block;
    padding:5vh;
    text-align:center;
    font-variant:small-caps;
}
a#enter-crypt, #crypt h3{ font-size:3.5vh;}
#crypt h3{
    color:#55a2ad;
    font-family: 'Euphorigenic';
    font-weight:normal;
    text-align:center;
}
#crypt #wrapper #content {
    background:url("img/home/portal/columns.png") repeat-y top center;
    background-size: 100%;
    height:100%;
    z-index:12;
    top:27vh;
}
#crypt #wrapper #content .text{
    padding:1em 33% 2em 33%;
    font-size:2.3vh;
    text-align:justify;
    height:50%;
    text-shadow:2px 2px 2px black;
}
#crypt #wrapper #content .text ul{
    margin:0;
    padding:.5em;
    font-size:90%;
}
#crypt #wrapper #content .text ul li{
    list-style: disc;
    margin:0;
    margin-left:1em;
    text-align:left;
}
#crypt #wrapper #content .text p{
    margin:0;
    padding:.5em 0 .5em 0;
}
#crypt #wrapper #footer{
    background:url("img/home/portal/col-bottom.png") no-repeat bottom center;
    bottom:0;
    height:15vh;
    background-size:100% 100%;
    z-index:15;
    
}


#ground{ /*  Ground  */
    position:absolute; bottom:0;
    width:100%;height:35.5%;
    background:url("img/home/ground.png") repeat-x bottom center;
    background-size:contain;
    z-index:1;
}
#landscape{
    display:block;
    height:48%;
    width:100%;
    position:absolute;
    bottom:25%;
    background:url("img/home/landscape.png") no-repeat top center;
    background-size:100% 100%;
    z-index:1;
}





/*******************************************************/
/*                    MEDIA QUERIES                     /*
/*******************************************************/


/* Smartphones display */
@media screen and (orientation: portrait){
    body{ font-size:1em; }
    main { background-size:cover; }
    nav{ background-size:110% 100%; }
    #landscape { background-size:cover; }
    #menu li { width:25%; }
    #crypt #wrapper .width{ width:133vw; }
    #crypt #wrapper #footer{ height:10vh; }
    #crypt #wrapper #portal{ height:60%; }
    #crypt #wrapper #content .text{
        font-size:4.4vw;
        margin-top:-5vh;height:60vh;
        padding:1em 30% 2em 30%;
    }
    a#enter-crypt{ padding:5vw; }
    #crypt #wrapper #content h3, a#enter-crypt{ font-size:4vh; }
    #fractal{ width:100vw; height:100vw; margin-top:30vh; }
}

/* Desktop display */
@media screen and (max-aspect-ratio:15/9) and (min-aspect-ratio:3/5){
    #crypt #wrapper .width{ width:80vw; }
    #fractal{ width:50vh; height:50vh; }
    #crypt #wrapper #content{ margin-top:2.5vh;}
    #crypt #wrapper #content .text{ font-size:2.2vh; }
    #crypt #wrapper #content h3, a#enter-crypt{ font-size:3vh; }
}
@media screen and (max-aspect-ratio:7/4) and (min-aspect-ratio:10/8){
    #crypt #wrapper .width{ width:55vw; }
    #crypt #wrapper #content{ margin-top:0;}
    #crypt #wrapper #content .text{ font-size:2.2vh; }
    #crypt #wrapper #content h3, a#enter-crypt{ font-size:3.5vh; }
}

/* Ultra wide display */
@media screen and (min-aspect-ratio:5/2) {
    #fractal{ width:80vh; height:80vh; }
    #menu li { width:5%; }
    #crypt #wrapper .width{ width:100vh; }
    #crypt #wrapper #content{ margin-top:5vh;}
    #crypt #wrapper #content .text{ font-size:2.2vh; }
    #crypt #wrapper #content h3, a#enter-crypt{ font-size:3.5vh; }
}

/* 4k display */
@media screen and (min-width: 3000px){
    #menu li { margin-bottom:2em; } 
}