/* Section 1 - Body Structure */	


body {
background-color:black;
}	
	
#wall {
position:absolute;
left:0; top:0;
width: 100%; height: 85%;
background-image:url('HOFSpaceWallsm2.jpg');
background-size: auto 100%;
font-size: calc(var(--content-height)*0.1);
box-shadow: 0em -0.5em 0.5em rgba(0,0,0,0.75) inset;
}

.greentheme #wall {
background-image:url('HOFSpaceWallGreensm.png');
}

#floor {
position:absolute;
left:0; top:85%;
width: 100%; height: 15%;
background-image:url('HOFWallTexture3sm.png');
background-size: calc(var(--content-height)*0.5) 25%;
font-size: calc(var(--content-height)*0.1);
box-shadow: 0em 0.5em 0.5em rgba(0,0,0,0.75) inset;
}

.greentheme #floor {
background-image:url('HOFWallTexture3GreenAltsm.png');
}

/* Section 2 - Intro & Outro*/


.bcladder { 
width: calc(var(--content-height)*0.7);
}

.bcgap {
width: calc(var(--content-height)*0.15);
}

.bcgapr {
width: calc(var(--content-height)*0.45);
}



/* Section 2a - Ladder */


.ladder {
position:absolute;
top:-54.3%;
width: 34.55%; height:91.39%;
background-image:url('SpaceLadder5csm.png');
background-size:auto 100%;
transition:transform 2s;
cursor:pointer;
}

.greentheme .ladder {
background-image:url('SpaceLadder5cGreensm.png');
}

.ladder:hover {
transform:translateY(20%);
}

.ladderl {
left:20%;
}

.ladderr {
right:20%;
}



/* Section 2d - Windows */


.window {
position:absolute;
top: 17%;
width: 71.43%; height:50%;
}

.windowframe {
background-image:url('HOFWindowFrameBluesm.png');
background-size:auto 100%;
}

.windowbg {
background-size:auto 100%;
}

.greentheme .windowframe {
background-image:url('HOFWindowFrameGreensm.png');
}

.windowl {
left:50%; 
}

.windowr {
right:50%;
}

/* Section 3 - Figures */	


.bcholo {
width:calc(var(--content-height)*1);
}

.holofigcon {
position:absolute;
left:0; top:-3%;
width: 125%; height: 100%;
}


.holofigure {
position:absolute;
left:0; right:0; margin:auto; top:20%;
width: 40%; height: 50%;
background-size: contain;
background-repeat:no-repeat;
background-position:center;
filter:brightness(1.25);
opacity:0.7;
cursor:pointer;
}

.holoflash {
position:absolute;
left:0; top:0;
width:100%; height:100%;
background-image:url('HOFHoloFlashsm.png');
background-size: 100% 100%;
opacity:1;
pointer-events:none;
z-index:1;
}


.holobase {
pointer-events:none;
background-image:url('HOFHoloBaseBluesm.png');
}

.greentheme .holobase {
background-image:url('HOFHoloBaseGreensm.png');
}

.holofigcon:hover {
animation:flicker 0.5s linear infinite;
}

.holofigcon:hover .holofigure, .holowindowcon:hover .holoflash {
opacity:1;
}



@keyframes flicker {
0% {opacity: 1;}
10% {opacity: 0.2;}
12% {opacity: 0.6;}
22% {opacity: 0.8;}
34% {opacity: 0.6;}
36% {opacity: 1;}
48% {opacity: 0.4;}
50% {opacity: 1;}
60% {opacity: 0.5;}
80% {opacity: 0.75;}
90% {opacity: 0.25;}
100% {opacity: 1;}
}


/* Section 4 - Mobile & Small Screens */


@media screen and (max-height: 650px) {
#wall {background-image:url('HOFSpaceWallsm2M.jpg');}
#floor {background-image:url('HOFWallTexture3smM.png');}
.ladder {background-image:url('SpaceLadder5csmM.png');}
.holoflash {background-image:url('HOFHoloFlashsmM.png');}
.holobase {background-image:url('HOFHoloBaseBluesmM.png');}
.greentheme #wall {background-image:url('HOFSpaceWallGreensmM.jpg');}
.greentheme #floor {background-image:url('HOFWallTexture3GreenAltsmM.png');}
.greentheme .ladder {background-image:url('SpaceLadder5cGreensmM.png');}
.greentheme .holobase {background-image:url('HOFHoloBaseGreensmM.png');}
.windowframe {background-image:url('HOFWindowFrameBluesmM.png');}
.greentheme .windowframe {background-image:url('HOFWindowFrameGreensmM.png');}
}