@media only screen and (orientation: portrait){
	.office{
		/* rotate:90deg; */
	}
}
:root {
	  --paint: drop-shadow(2px 2px 4px black);
	  --size: 6976;
	}
	
body {
	margin: 0;
	overflow: hidden;
	background-color: black;
	display: flex;
	filter:brightness(0);
	animation-name:lighton;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	animation-timing-function: linear;
	animation-play-state: paused;
	user-select:none;
	width: 100vw;
    height: 100vh;
}
.office{
	background-image: url(./images/background.webp);
	background-repeat: no-repeat;
	background-size: 100vw;
	background-color: black;
	background-position: bottom left;
	width: 100%;
	overflow: hidden;
	aspect-ratio: 16/9;
	background-attachment: fixed;
	bottom: 0;
	position: fixed;
}
.office1{
	position: fixed;
    z-index: 1;
    width: 100vw;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    bottom: 0;
    left: 0;
}
.office2{
	position: fixed;
	z-index: 20;
	width: 100vw;
	overflow: hidden;
	aspect-ratio: 16/9;
	pointer-events: none;
	bottom: 0;
	left:0;
}
.office3{
	position: fixed;
	z-index: 2000;
	width: 100%;
	overflow: hidden;
	aspect-ratio: 16/9;
	pointer-events: none;
	bottom: 0;
	background-image: url(./images/confetti.gif);
	background-size: cover;
}

#tv {
    background-image: url(./images/tv.webp);
    background-repeat: no-repeat;
    background-size: 100%;
    height: calc((100vw/3840)*305);
    width: calc((100vw/3840)*479);
    bottom: 24.71355vw;
    left: 33.047vw;
    z-index: 2;
}
#pinboard {
    background-image: url(./images/corkboard.webp);
    background-repeat: no-repeat;
    background-size: 100%;
    width: calc((100vw/3840)*727);
    height: calc((100vw/3840)*481);
    bottom: 28.724vw;
    left: 63.724vw;
    z-index: 3;
}
#drawers {
    background-image: url(./images/drawers.webp);
    background-repeat: no-repeat;
    background-size: 100%;
    width: calc((100vw/3840)*826);
    height: calc((100vw/3840)*630);
    bottom: 13.28125vw;
    left: 72.526vw;
    z-index: 4;
}
#credits {
    background-image: url(./images/credits.webp);
    background-repeat: no-repeat;
    background-size: 100%;
    width: calc((100vw/3840)*593);
    height: calc((100vw/3840)*213);
    bottom: 7.29166vw;
    left: 35.3385vw;
    z-index: 22;
}
#songs {
    background-image: url(./images/radio.webp);
    background-repeat: no-repeat;
    background-size: 100%;
    width: calc((100vw/12600)*1382);
    height: calc((100vw/12600)*653);
    bottom: 4.59166vw;
    left: 57.7385vw;
    z-index: 21;
}
#paint {
    background-image: url(./images/paint.webp);
    background-repeat: no-repeat;
    background-size: 100%;
    width: calc((100vw/1920)*116);
    height: calc((100vw/1920)*128);
    bottom: 1vw;
    left: 1vw;
    filter: opacity(0);
    animation-delay:10s;
    animation-name: fadein;
    animation-duration: 20s;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
    z-index: 50;
}
#cake {
    background-image: url(./images/cake.webp);
    background-repeat: no-repeat;
    background-size: 100%;
    width: calc((100vw/4600)*582);
    height: calc((100vw/4600)*600);
    bottom: -0.40834vw;
    left: 74.7385vw;
    z-index: 21;
}
#banner {
    background-image: url(./images/banner.webp);
    background-repeat: no-repeat;
    background-size: 100%;
    width: calc((100vw/2500)*773);
    height: calc((100vw/2500)*208);
    left: calc(50vw - ((100vw/2500)*773)/2);
    z-index: 21;
    position: fixed;
    top: 0;
}
#courage {
    background-image: url(./images/courage.webp);
    background-repeat: no-repeat;
    background-size: 100%;
    width: calc((100vw/1920)*144);
    height: calc((100vw/1920)*168);
    bottom: 43.22916vw;
    left: 89.89583vw;
    z-index: 25;
}
#squeak {
    background-image: url(./images/squeaker.webp);
    background-repeat: no-repeat;
    background-size: 100%;
    width: calc((100vw/11000)*1080);
    height: calc((100vw/11000)*1080);
    bottom: 6.49166vw;
    left: 19.6385vw;
    z-index: 22;
}
#squeak2 {
    background-image: url(./images/ghoulieburn.gif);
    background-repeat: no-repeat;
    background-size: 100%;
    width: calc((100vw/ var(--size))*1080);
    height: calc((100vw/var(--size))*1080);
    bottom: 6.59166vw;
    left: 16.9385vw;
    z-index: 22;
	display: none;
	pointer-events:none;
	filter: none!important;
}
.navbutton {
    position: absolute;
    filter: var(--paint);
	cursor: pointer;
}
.notbutton {
    position: absolute;
}
.navbutton:hover {
    filter: brightness(1.20) var(--paint);
	transform: scale(1.05);
}
@keyframes lighton{
	0% {filter:brightness(0);}
	100% {filter:brightness(1);}
}
@keyframes fadein{
	0% {filter:opacity(0);}
	100% {filter:opacity(1);}
}
#audioPlayer {
    width: 0;
    height: 0;
}