html {
    height: 100%;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
body {
    background-color: black;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: "Courier", monospace; 
}
.link {
    position: absolute;
    color: white;
    z-index: 20;
}
img { 
    image-rendering: optimizeSpeed;             /*                     */
    image-rendering: -moz-crisp-edges;          /* Firefox             */
    image-rendering: -o-crisp-edges;            /* Opera               */
    image-rendering: -webkit-optimize-contrast; /* Chrome (and Safari) */
    image-rendering: optimize-contrast;         /* CSS3 Proposed       */
    -ms-interpolation-mode: nearest-neighbor;   /* IE8+                */
}
#main{
    height: 100%;
    width: 100%;
    overflow: hidden;
}
#title {
    margin-top: 8%;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    display: block;
    width: 450px;
    z-index: 6;
    opacity: 1;
}
#forest{
    margin-top: 15%;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    display: block;
    width: 970px;
    z-index: 5;
}
.hidden {
    display: none;	
}
#progress {
    margin-top: 43%;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    z-index: 100;
    background-color: white;
    height: 1px;
    width: 0px;
}
#bkg {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 3;
}
#psychopomp-container {
    position: relative;
    width: 1600px;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    z-index: 2;
}
#psychopomp {
    height: 110%;
    width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    top: -4%
}

#warningContainer {
    position: absolute;
    opacity: 0;
    color: white;
    z-index: 10;
    font-size: 14px;
}
#colonyContainer {
    position: absolute;
    opacity: 0;
    color: white;
    z-index: 12;
    font-size: 20px;
}
#psychoLink {
    font-size: 15px;
    letter-spacing: 5px;
    font-weight: 100;
    opacity: 0;
}
#emailLink {
    opacity: 0;
    font-size: 20px;
    letter-spacing: 5px;
    top: 67%;
    left: 43%;
    font-weight: 100;
}
#symbol {
    width: 255px;
    height: auto;
    position: absolute;
    top: 38%;
    left: 41%;
}

#symbolText {
    width: 255px;
    height: auto;
    position: absolute;
    top: 38%;
    left: 41%;
    opacity: 0;
}

.zone {
    height: 100%;
    width: 35%;
}
#rightZone{
    float: right;
}

#leftZone {
    float: left;
}
.name{
    opacity: 0;
    font-size: 20px;
    letter-spacing: 5px;
    font-weight: 100;
    position: absolute;
    color: white;
    z-index: 20; 
}

#workers {
    opacity: 0;
    font-size: 15px;
    letter-spacing: 5px;
    font-weight: 100;
    position: absolute;
    color: white;
    z-index: 20; 
    cursor: pointer;
}

#info {
    opacity: 0;
}

.button {
    opacity: 0;
    font-size: 15px;
    letter-spacing: 5px;
    font-weight: 100;
    color: white;
    z-index: 20;
    cursor: pointer;
    padding: 20px; 
}

#back{
    float: left;
    height: 35px;
    width: auto;
}

#mail {
    float: right;
    height: 35px;
    width: auto;  
}

.name2{
    color: white;
    font-size: 15px;
    letter-spacing: 5px;
    position: absolute;
    visibility: hidden;
}

#mobile-area{
    display: none;
}

#mobile-area-psychopomp {
    display: none;
}

 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
    #symbol, #symbolText, #warningContainer, .zone {
        display: none;
        position: absolute;
        top: -80%;
    }
    #mobile-area{
        display: inline;
    }
    #symbolTextMobile {
        width: 50%;
        height: auto;
        position: absolute;
        top: 25%;
        left: 25%;
    }
    #psychoMobile {
        font-size: 35px;
        top: 80%;
        left: 35%;
        text-decoration: none;
        letter-spacing: 10px;
    }
 
    #mobile-area-psychopomp {
        display: inline;
        color: white;
        z-index: 100;
        position: absolute;
        top: 75%;
        font-size: 20px;
        left: 37%;
    }
    #forest{
        left: 0%
    }
    #title{
        left: 29%
    }

}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
    #symbol, #symbolText, #warningContainer, .zone {
        display: none;
        position: absolute;
        top: -80%;
    }
    #mobile-area{
        display: inline;
    }
    #symbolTextMobile {
        width: 40%;
        height: auto;
        position: absolute;
        top: 15%;
        left: 30%;
    }   
    #psychoMobile {
        font-size: 25px;
        top: 85%;
        left: 38%;
        text-decoration: none;
        letter-spacing: 10px;
    } 
    #mobile-area-psychopomp {
        display: inline;
        color: white;
        z-index: 100;
        position: absolute;
        top: 95%;
        left: 37%;

    }
    #forest{
        left: 0%;
        top: 29%;
    }
    #title{
        left: 29%;
        top: 10%;
    }
    

}

@media only screen 
and (max-device-width: 480px) {
    #symbol, #symbolText, #warningContainer, .zone {
        display: none;
        position: absolute;
        top: -80%;
    }
    #mobile-area{
        display: inline;
    }
    #symbolTextMobile {
        width: 50%;
        height: auto;
        position: absolute;
        top: 25%;
        left: 25%;
    }
    #psychoMobile {
        font-size: 40px;
        top: 70%;
        left: 33%;
        text-decoration: none;
        letter-spacing: 10px;
    }
 
    #mobile-area-psychopomp {
        display: inline;
        color: white;
        z-index: 100;
        position: absolute;
        top: 75%;
        font-size: 40px;
        left: 24%;
    }
    #forest{
        left: 0%;
        top: 15%;
    }
    #title{
        left: 5%;
        top: 15%;
    }
}

@media only screen 
and (max-device-width: 480px)
and (orientation : landscape) {
    #symbol, #symbolText, #warningContainer, .zone {
        display: none;
        position: absolute;
        top: -80%;
    }
    #mobile-area{
        display: inline;
    }
    #symbolTextMobile {
        width: 50%;
        height: auto;
        position: absolute;
        top: 25%;
        left: 25%;
    }
    #psychoMobile {
        font-size: 40px;
        top: 160%;
        left: 33%;
        text-decoration: none;
        letter-spacing: 10px;
    }
 
    #mobile-area-psychopomp {
        display: inline;
        color: white;
        z-index: 100;
        position: absolute;
        top: 160%;
        font-size: 40px;
        left: 24%;
    }
    #forest{
        left: 0%;
        top: 15%;
    }
    #title{
        left: 5%;
        top: 15%;
    }
}