body{
	margin:0;
	filter:brightness(0);
	animation-name:lighton;
	animation-delay: 0.5s;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	animation-timing-function: linear;
	animation-play-state: paused;
	overflow:hidden;
	user-select:none;
	width: 100vw;
	height: 100vh;
}
.returnbutton {
	background-image: url(../global/images/back.webp);
	background-size: contain;
	background-repeat: no-repeat;
	width: calc(11vw/3);
	height: calc(11vw/3);
	position: fixed;
	top: 0;
	left: 0;
	filter: brightness(0.8);
	z-index:5000;
	transform-origin: top left;
}
.main{
	width:100%;
	height:100%;
}

.tapedeck {
	width: calc(73.2vw/2.5);
	height: calc(138.8vw / 2.5);
	bottom: 0;
	right: calc((100vw - (73.2vw / 2.5))/2);
	position: fixed;
	pointer-events: none;
	filter: drop-shadow(4px 4px 16px black);
}
.overlay{
	background-image: url(./images/tapedeck.webp);
	background-repeat: no-repeat;
	background-size: contain;
	width:100%;
	height:100%;
	position: absolute;
	bottom: 0;
	pointer-events: none;
}
.buttoncase {
	background: #000000;
	width: 88.95%;
	height: 15.86%;
	position: absolute;
	bottom: 15.24%;
	right: 6.15%;
	z-index: 49;
	pointer-events: none;
}
.buttoncover {
	background-image: url(./images/buttoncover.webp);
	background-repeat: no-repeat;
	background-size: contain;
	width: 100%;
	height: 100%;
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 10;
	pointer-events: none;
}
.buttoncase2 {
	width: 89.2%;
	height: 75.1%;
	position: absolute;
	top: 20.9%;
	left: 6.6%;
	pointer-events: none;
}


.audioholder {
	background-image: url(./images/tapecase.webp);
	background-repeat: repeat;
	background-size: contain;
	width: 100%;
	height: 100%;
	position: absolute;
	bottom: 0;
	z-index: 30;
	pointer-events: none;
}










.rbutton {
    background-repeat: no-repeat;
    pointer-events: all;
}

.rbutton:hover {
	filter: brightness(1.2);
}

.rbutton:active {
	transform: translateY(-0.3vw);
	filter: brightness(0.8);
}

.audioslide {
    background-image: url(./images/tape.webp);
    background-repeat: repeat;
    background-size: contain;
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    pointer-events: none;
    z-index: 12;
}
.audiodoor {
    background-image: url(./images/tapedoor.webp);
    background-repeat: repeat;
    background-size: contain;
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    z-index: 40;
    filter: opacity(0.8);
    pointer-events: none;
}
.desk{
	background-image: url(./images/table.webp);
	background-repeat: repeat;
	width: 100%;
	height: 100%;
	background-size: 40vw;
	pointer-events: none;
}
#button1 {
    background-image: url(./images/button1.webp);
    background-position: top left;
    background-size: contain;
    width: 17.2016%;
    height: 99.13%;
    position: absolute;
    top: -0.03%;
    left: -0.398%;
}
#button2 {
    background-image: url(./images/button2.webp);
    background-position: top left;
    background-size: contain;
    width: 17.1%;
    height: 99.16%;
    position: absolute;
    z-index: 5;
    top: -0.023%;
    left: 16.601%;
}
#button3 {
    background-image: url(./images/button3.webp);
    background-position: top left;
    background-size: contain;
    width: 16.799%;
    height: 99.16%;
    position: absolute;
    z-index: 5;
    top: -0.023%;
    left: 33.501%;
}
#button4 {
    background-image: url(./images/button4.webp);
    background-position: top left;
    background-size: contain;
    width: 17.2%;
    height: 98.36%;
    position: absolute;
    z-index: 5;
    top: -0.023%;
    left: 50.001%;
}
#button5 {
    background-image: url(./images/button5.webp);
    background-position: top left;
    background-size: contain;
    width: 17.3%;
    height: 98.36%;
    position: absolute;
    z-index: 5;
    top: -0.023%;
    left: 66.901%;
}
#button6 {
    background-image: url(./images/button6.webp);
    background-position: top left;
    background-size: contain;
    width: 16.5%;
    height: 98.36%;
    position: absolute;
    z-index: 5;
    top: -0.023%;
    left: 83.901%;
}

.margarine {
  font-family: "Margarine", sans-serif;
  font-weight: 400;
  font-style: normal;
}


#clickPlayer {
    width: 0;
    height: 0;
}
@keyframes lighton{
	0% {filter:brightness(0);}
	100% {filter:brightness(1);}
}
.audionum {
    position: absolute;
    top: 38.7%;
    left: 29.1%;
    width: 44%;
    height: 4.5%;
}
#tapespool{
	position: absolute;
	top: 41.2%;
	left: 39.4%;
	width: 31%;
	height: 13vh;
	color: 261B17;
	z-index: 11;
	display: flex;
	justify-content: center;
	font-size: 24vh;
	overflow: hidden;
	align-items: center;
}
@keyframes tapeplay{
	0% {left: 39.4%;}
	100% {left:31.4%;}
}