@font-face {
	font-family: 'CC Wild Words';
	src: url('../fonts/CCWildWordsRoman.woff2') format('woff2'),
		url('../fonts/CCWildWordsRoman.woff') format('woff');
		url('../fonts/CCWildWordsRoman.ttf') format('ttf');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

:root {
	--snack1: #0A1561;
	--snack2: #0E2096;
	--snack3: #1C2FDC;
	--snack4: #00EAFA;
	--snack5: #FFFFFF;
}

* {
	margin: 0;
	padding: 0;
	font-family: 'CC Wild Words',Arial,Helvetica,sans-serif;

	user-drag: none;
	user-select: none;
	-moz-user-select: none;
	-webkit-user-drag: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}

body {
	background: black;

	/* background-image: url('../img/halftone_sliver_2.jpg'); */
	/* background-size: 100% auto; */
	/* background-repeat: repeat-y; */

	/* transform: translateX(100%); /* Initially offscreen */ */
	transition: transform 1000ms ease; /* Animation effect */
}

.snacktoon-list {
	position: relative;
	/* background: var(--snack2); */
	text-align: center;
	width: fit-content;
	height: fit-content;
	border-radius: 20px;
	left: 50%;
	transform: translate(-50%, 0);
	margin-top: 10vh;
	padding: 5vw;
}
#main-title {
	width: 60vw;
}
.list-entry {
	display: inline-block;
	padding: 4vw;
}
.list-entry img {
	width: 30vw;
	height: calc(30vw * 1.6);
	cursor: pointer;
	transition: all 100ms ease-in-out;
}
.list-entry img:hover {
	outline: 5px solid var(--snack4);
}

.snacktoon-list h1 {
	color: var(--snack1);
	font-size: 6vw;
}

.snacktoon-list h2 {
	font-size: 3vw;
	color: var(--snack5);
	margin-top: 2vw;
}
.snacktoon-list a {
	text-decoration: none;
}
.snacktoon-list a:hover {
	cursor: pointer;
}
.snacktoon-list h3 {
	font-size: 3vw;
	color: var(--snack4);
	font-style: italic;
	margin-bottom: 6vh;
}

.snacktoon-list h4 {
	font-size: 2.2vw;
	margin-top: 1.2vw;
	opacity: 0.7;
	font-style: italic;
	transition: opacity 250ms ease;
}
.snacktoon-list h4 a {
	color: var(--snack5);
}
.snacktoon-list h4:hover {
	opacity: 1;
}

#player {
	position: relative;
	width: 100%;
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
}

.panel {
	position: relative;
	display: block;
	width: 100vw;
	/* height: calc(100vw * 1.6); */

	left: 50%;
	transform: translate(-50%, 0);

	background: black;
}

.debug {
	outline: 1px solid red;
}
.panel-marker {
	position: absolute;
	top: 5px;
	left: 5px;
	color: red;
	z-index: 1000;
}

.panel .asset {
	position: absolute;
}



.hover-highlight:hover {
	outline: 2px solid rgb(245, 142, 39);
	background: rgba(245, 142, 39, 0.3);
}



.edit-save {
	position: fixed;
	top: 0;
	left: 0;
	background: rgba(0, 255, 0, 0.5);
	border: 2px solid green;
	border-bottom-right-radius: 10px;
	color: var(--snack5);
	padding: 5px 10px;
	cursor: pointer;
	z-index: 1000;
}


/* @media only screen and (max-width: 1000px) { */
/* 	.player { */
/* 		padding: 0; */
/* 	} */
/* 	.panel { */
/* 		padding: 0; */
/* 		width: 100%; */
/* 	} */
/* } */


.loading-screen {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background: black;
	text-align: center;
	flex-direction: column;
	z-index: 2000;

}

.loading-screen .bg-texture {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	background-image: url('../img/halftone_sliver_2.jpg'); /* Replace with your image path */
	background-size: 100% auto; /* Stretch horizontally, auto scale vertically */
	background-repeat: repeat-y; /* Repeat the image only vertically */

	transform: translateX(100%); /* Initially offscreen */
	transition: transform 1000ms ease; /* Animation effect */
	z-index: 2000;
}

.loading-screen * {
	position: absolute;
	display: block;
}

.loading-screen .loading-title {
	width: 75vw;
	height: auto;
	top: 35%;

	transform: translateX(200%); /* Initially offscreen */
	transition: transform 500ms ease; /* Animation effect */
	z-index: 2001;
}


.loading-screen .loading-text {
	top: 60%;
	font-family: 'CC Wild Words';
	font-size: 7vw;
	color: var(--snack4);
	z-index: 2001;
}

.loading-screen .loading-scroll-text {
	top: 80%;
	font-family: 'CC Wild Words';
	font-size: 7vw;
	color: var(--snack4);
	opacity: 0;
	z-index: 2001;
	transition: opacity 500ms ease;
}

.loading-screen .loading-menu-text {
	top: 60%;
	font-family: 'CC Wild Words';
	font-size: 7vw;
	color: var(--snack4);
	z-index: 2001;
	cursor: pointer;
}

.loading-screen .loading-original-artwork-text {
	top: 72%;
	font-family: 'CC Wild Words';
	font-size: 7vw;
	color: var(--snack4);
	z-index: 2001;
	cursor: pointer;
	text-decoration: none;
}

.loading-screen .loading-replay-text {
	top: 85%;
	font-family: 'CC Wild Words';
	font-size: 7vw;
	color: var(--snack4);
	z-index: 2001;
	cursor: pointer;
}

.loading-screen .loading-bar-container {
	top: 64%;
	width: 40vw;
	height: 1.2vw;
	background: black;
	border-radius: 20px;
	border: 2px solid var(--snack4);
	margin-top: 4vw;
	z-index: 2001;
}
.loading-screen .loading-bar {
	height: 100%;
	background: var(--snack5);
	width: 0%;
	border-radius: 20px;
	transition: width 200ms ease-in-out;
}