#fullpage{
    background-image: url('nightsky.jpg');
    background-size: 100%;
}
#navitable{
    position: absolute;
    left:17%;
    top:11%;
    background-color: darkcyan;
}
#button1{
    cursor: pointer;
    animation-name: rotateanime;
    animation-duration: 1s;
}
#navigationbar{
    display: none;
    position: relative;
    width:80%;
    height:80%;
    top:8vh;
    left:15vw;
    animation-name: anime;
    animation-duration: 1s;
}
.container{
 position: relative;
 top:40px
}
.toppleft{
position: absolute;
background-color: white;
top:0px;
left:0px
}
#bad_jokes{
    background-color: black;
    color:white;
    text-align: center;
  position:absolute;
  top:30%;
  left:20%;
   width:60%;
   height:50%;
  
   padding-bottom:10px;
  
    
}

#lastline{
    text-align: left;
    color:lightblue;
    padding-left: 10px;
}

@keyframes anime {
    from {width:40%}
    to {width:80%}
}
@keyframes rotateanime {
    from{rotate:0deg;}
    to{rotate:360deg;}
}
@keyframes rotateanime2 {
    from{rotate:0deg;}
    to{rotate:90deg;}
}
#doorupper{
    position: absolute;
    top:0%;
    left:0%;
    width:100%;
    height:54%
}
#doorlower{
    position: absolute;
    bottom:0%;
    left:0%;
    width:100%;
    height: 46%;
    
    
}

#doorupper2{
    display: none;
    position: absolute;
    top:-54%;
    left:0%;
    width:100%;
    height:54%;
    animation-name: dooropenup;
    animation-duration: 4s;
}
#doorlower2{
    display: none;
    position: absolute;
    bottom:-46%;
    left:0%;
    width:100%;
    height: 46%;
    animation-name: dooropendown;
    animation-duration: 4s;
}
@keyframes dooropenup {
    from {top:0%}
    to {top:-54%}
}
@keyframes dooropendown {
    from {bottom:0%}
    to {bottom:-46%}
}
#creampaper{
    display: none;
    animation-name: openpaper;
    animation-duration: 3s;
}
@keyframes openpaper {
    from{height:0%;}
    to{height:60%}
}

#doorright{
    position: absolute;
    top:0%;
    right:0%;
    width:50%;
    height:100%
}
#doorleft{
    position: absolute;
    top:0%;
    left:0%;
    width:50%;
    height: 100%;
    
    
}
#doorcenter{
    position:absolute;
    left:41%;
    top:37%;
    width:19vw;
    height:33vh;

}
#doorcenter2{
    position:absolute;
    left:41%;
    top:37%;
    width:19vw;
    height:33vh;
    animation-name: rotateanime2;
    animation-duration: 3s;
}
#doorright2{
    display: none;
    position: absolute;
    top:0%;
    right:-50%;
    width:50%;
    height:100%;
    animation-name: dooropenright;
    animation-duration: 3s;
}
#doorleft2{
    display: none;
    position: absolute;
    top:0%;
    left:-50%;
    width:50%;
    height: 100%;
    animation-name: dooropenleft;
    animation-duration: 3s;
}


@keyframes dooropenright {
    from {right:0%}
    to {right:-50%}
}
@keyframes dooropenleft {
    from {left:0%}
    to {left:-50%}
}