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;
	background-color: #0E1907;
    	width: 100vw;
   	 height: 100vh;
}
.crafty-girls-regular {
	font-family: "Crafty Girls", cursive;
	font-weight: 400;
	font-style: normal;
}
.tutorialcont {
		background-image: url(./images/tutorial.webp);
		background-repeat: no-repeat;
		background-size: contain;
		width: 11vw;
		height: calc((11vw / 438) * 264);
		filter: brightness(0.9);
		box-shadow: calc(11vw/42.239962) calc(11vw/42.239962) calc(11vw/21.12001) black, inset -1px -1px 0px 0px black;
		pointer-events: none;
		user-select: none;
		z-index: 300;
		position: fixed;
		bottom: 1vw;
		right: 1vw;
	}
	.tutorialtext {
		position: fixed;
		width: 100%;
		height: 100%;
		bottom: 0;
		box-sizing: border-box;
		padding: 5% 10%;
		display: flex;
		align-items: center;
		font-size: calc(11vw/13);
		color: black;
	}
.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;
	}
.returnbutton:hover, .button:hover{
		filter: brightness(1);
		z-index: 1400;
		transform: scale(1.05);
}

@keyframes lighton{
	0% {filter:brightness(0);}
	100% {filter:brightness(1);}
}
.special-elite {
  font-family: "Special Elite", system-ui;
  font-weight: 400;
  font-style: normal;
}

.shantell-sans {
  font-family: "Shantell Sans", cursive;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "BNCE" 0,
    "INFM" 0,
    "SPAC" 0;
}
.maincont {
    width: 100%;
    height: 100%;
    background-image: url(./images/drawbg.webp);
    background-position: center top;
    background-size: calc(45.3vw/1.4);
}
.drawers{
    width: calc(45.3vw/1.4);
    height: calc(81.5vw / 1.4);
    position: absolute;
    left: calc(50vw - ((45.3vw / 1.4) / 2));
    pointer-events: none;
}
.overlay{
	background-image: url(./images/drawbase.webp);
	background-size: contain;
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
	pointer-events:none;
	position: absolute;
	background-position: bottom left;
}
#door {
	background-image: url(./images/drawdoor.webp);
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	width: 90.1%;
	height: 41.55%;
	bottom: 14%;
	right: 4.9%;
	background-position: bottom right;
	z-index: 50;
	pointer-events: all;
	filter: drop-shadow(4px 4px 8px black);
}
#door:hover{
	filter: brightness(1.2);
}
.fileholder {
	background: #0E1907;
	position: absolute;
	width: 90.1%;
	height: 33.15%;
	bottom: 22.4%;
	right: 4.9%;
	background-position: bottom right;
	z-index: 10;
	pointer-events: none;
	display:flex;
	flex-direction: column;
	overflow: clip;
	overflow-clip-margin: 4vw;
}
.file{
	width:100%;
	position:absolute;
	/* top:0; */
	background-image: url(./images/folder.webp);
	background-position:top;
	background-repeat: no-repeat;
	background-size: contain;
	height: calc((45.3vw/1.4)*0.91);
	pointer-events: none;
	z-index: 0;
}
.file2{
	width:100%;
	height: 7.6923%;
	pointer-events: all;
}
.file2:hover{
	filter: brightness(1.2);
	transform: translateY(-20%);
	height: 12%;
}
.filename {
    position: relative;
    width: 27.7%;
    right: -68.8%;
    top: 0.7vw;
    height: 0.7vw;
    pointer-events: none;
    align-items: flex-start;
    display: flex;
    overflow-wrap: break-word;
    word-break: break-all;
}













#slidecont {
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	background: #0000008c;
	top: 0;
	z-index: 50;
	pointer-events: all;
}

.underlay {
    width: 100%;
    height: 100.7%;
    background-image: url(./images/file.webp);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    z-index: 1;
    justify-self: anchor-center;
	left: 50%;
	translate: -50% 0;
    top: 0;
}

.ui {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    z-index: 100;
    pointer-events: none;
}

.button {
	background-image: url(../global/images/arrow.webp);
	background-size: contain;
	background-repeat: no-repeat;
	width: calc(11vw/3);
	height: calc(11vw/3);
    pointer-events: all;
    position: absolute;
}
.up {
    rotate: 0deg;
    top: 0;
    right: 50%;
	translate: 50% 0;
}

.down {
	rotate: 180deg;
	bottom: 0;
	right: 50%;
	translate: 50% 0;
}

.left {
    rotate: -90deg;
    left: 0;
    top: 50%;
	translate: 0 -50%;
}

.right {
	rotate: 90deg;
    right: 0;
    top: 50%;
	translate: 0 -50%;
}

.outerslide {
    position: absolute;
    width: 95%;
    height: 94%;
    display: flex;
    top: 2.7%;
    flex-direction: column;
    flex-wrap: nowrap;
    z-index: 50;
    justify-self: anchor-center;
    pointer-events: all;
	left: 50%;
	translate: -50% 0;
}

#imgcont {
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    overflow: auto;
    position: absolute;
    top: 9%;
    height: 81.4%;
    width: 100%;
}

#captioncont {
    z-index: 5;
    position: absolute;
    right: 0;
    height: 8.2%;
    width: 100%;
    bottom: 0;
    /* background-color: #ffffff; */
    padding: 0.5%;
    box-sizing: border-box;
    text-align: center;
    font-size: 2.4vh;
    align-content: center;
}

#artistcont {
    z-index: 5;
    position: absolute;
    right: 2%;
    height: 5.2%;
    width: 28.7%;
    box-sizing: border-box;
    font-size: 2.1vh;
    padding: 0.3%;
}

.dispimg {
    height: stretch;
	height: -webkit-fill-available;
    width: stretch;
	width: -webkit-fill-available;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.undercont{
	width:100%;
	height:100%;
}
.hideaudio{
	width:0;
	height:0;
}
.folder {
    justify-self: anchor-center;
    /* width: 64vw; */
    height: 50.625vw;
    max-height: 89%;
    aspect-ratio: 1045/842;
    position: absolute;
    top: 3%;
    pointer-events: none;
	left: 50%;
	translate: -50% 0;
}