body {
    background-color: black;
}

@font-face {
    font-family: 'Favorit';
    src: url('/labprojs/Project1/part1/Typeface/abcfavoritmonovariable-trial-webfont.woff');
}

@font-face {
    font-family: 'Monument';
    src: url('/labprojs/Project1-copy/ABCMonumentGroteskMono-Bold-Trial.woff2');
}

@font-face {
    font-family: 'Eiko';
    src: url('/labprojs/Project1-copy/PPEiko-Regular.woff');
}

p{
    position: absolute;
    font-family: 'Eiko';
    color: #F8F5F0;
    font-size: 11px;
    margin: 2vw;
    bottom: 1vh;
    width: 20vw;
    -webkit-user-select: none; 
  -ms-user-select: none; 
  user-select: none; 

}

div{
    background-color:black;
}

#container{
    border: 1px solid #F8F5F0;
    width: 89vw;
    height: 85vh;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-46%);
    overflow-x: hidden;
    overflow-y: hidden;

    
}

.door{
    position:absolute;
    background-color: black;
    width: 30vw;
    height: 80vh;
    border: 1px solid #F8F5F0;

    
}

#door1{
    position: absolute;
    top: 5%;
    left: 16.2%;
    width: 30vw;
    height: 81vh;
    border: 1px solid #F8F5F0;
    opacity: 1;
    z-index:10;
    
}

#door2{
    position: absolute;
    top:5%;
    right: 16.2%;
    width: 30vw;
    height: 81vh;
    border: 1px solid #F8F5F0;
    opacity: 1;
    z-index:10;
    
}

#door3{
    position: absolute;
    top: 5%;
    left: 16.2%;
    width: 30vw;
    height: 72vh;
    border: 1px solid #F8F5F0;
    opacity: 1;
    z-index:9;
    
}

#door4{
    position: absolute;
    top:5%;
    right: 16.2%;
    width: 30vw;
    height: 72vh;
    border: 1px solid #F8F5F0;
    opacity: 1;
    z-index:9;
    
}
#door5{
    position: absolute;
    top: 5%;
    left: 16.2%;
    width: 30vw;
    height: 66vh;
    border: 1px solid #F8F5F0;
    opacity: 1;
    z-index:8;
    
}

#door6{
    position: absolute;
    top:5%;
    right: 16.2%;
    width: 30vw;
    height: 66vh;
    border: 1px solid #F8F5F0;
    opacity: 1;
    z-index:8;
    
}

#door7{
    position: absolute;
    top: 5%;
    left: 16.2%;
    width: 30vw;
    height: 62vh;
    border: 1px solid #F8F5F0;
    opacity: 1;
    z-index:7;
    
}

#door8{
    position: absolute;
    top:5%;
    right: 16.2%;
    width: 30vw;
    height: 62vh;
    border: 1px solid #F8F5F0;
    opacity: 1;
    z-index:7;
    
}

#door9{
    position: absolute;
    top: 5%;
    left: 16.2%;
    width: 30vw;
    height: 60vh;
    border: 1px solid #F8F5F0;
    opacity: 1;
    z-index:6;
    
}

#door10{
    position: absolute;
    top:5%;
    right: 16.2%;
    width: 30vw;
    height: 60vh;
    border: 1px solid #F8F5F0;
    opacity: 1;
    z-index:6;
    
}
#door11{
    position: absolute;
    top: 5%;
    left: 16.2%;
    width: 30vw;
    height: 59vh;
    border: 1px solid #F8F5F0;
    opacity: 1;
    z-index:5;
    
}

#door12{
    position: absolute;
    top:5%;
    right: 16.2%;
    width: 30vw;
    height: 59vh;
    border: 1px solid #F8F5F0;
    opacity: 1;
    z-index:5;
    
}

#end{
    position: absolute;
    top:5%;
    left:22%;
    width: 50vw;
    height: 59vh;
    background-color: #F8F5F0;
   
    

}

#text1, #text2 {
    color: #686868;
    width: 18vw;
}

#text3, #text4 {
    color:#888888;
    width: 16vw;
}

#text5, #text6 {
    color:#BEBEBE;
    width: 14vw;
}

#text7, #text8 {
    color:	#E0E0E0;
    width: 12vw;
}

#text9, #text10 {
    color:#F0F0F0;
    width: 10vw;
}

#text11, #text12 {
    width: 8vw;
}


.leftdoor > p {
text-align:right;
right: 2%;
}

#text13{
    text-align:center;
    position: absolute;
    top: 5%;
    left:30%;
    color: black;
    width: 15vw;

}

#text14{
    text-align:center;
    position: absolute;
    left:30%;
    color: black;
    width: 15vw;
}

#instructions{
    position: relative;
    top: 1.5vh;
    text-align: center;
    width: 40vw;
    margin: auto;
    color: #F8F5F0;
    font-size: 13px;
    font-family: Monument;
}

#returnbutton {
    position: absolute;
     border: 1px solid #F8F5F0;
     font-family: 'Favorit';
     width: 30px;
     height:30px;
     display: block;
     right: 5.3%;
     top:5%;
     text-align: center;
    
    
    }
    
    #cross {
    position:relative;
    margin-top: 5px;
    color: #F8F5F0;
    font-size: 100%;
    left: -2vw;
    bottom: 0vh;
    width: 100%;
    font-family: Helvetica;
    }
    
    #returnbutton:hover{
        background-color:#F8F5F0;
    }
    
    #cross:hover{
         color:black;
    }