/* bg img is set in js after entry img is loaded*/
/* #main-container
{
    background-image: url("../img/lain_extended_3k.jpg");
} */

/*mobile / portrait display*/
/*bg lain pic, entry frame, and icon dock*/
@media (max-aspect-ratio: 4/3) 
{
	#entry-img 
	{
		width: 50vw; height: auto;
	}
	@keyframes zoom 
	{
		from {width: 5vw; height: auto;}
		to {width: 50vw; height: auto;}
	}
	@keyframes enter
	{
		from {width: 50vw; height: auto;}
		to {width: 150vw; height: 150vw;}
	}
	/* #lain-os-text {font-size: 16vw;} */
	/* #version-text {font-size: 4vw;} */

	#entry-bottom-text {bottom: 9%;}
	#login-click-area {width: 40vw; height: 40vw;}

	/*dock at the bottom*/
	#dock-container {bottom: 7%; width: 100%; height: 55px;}
	#dock-bg 
	{
		width: 400px; height: 90px; bottom: 0; 
		background-image: url("../img/test-dock50.png"); 
	}
	#icons-container 
	{
		width: 60%; height: 90%; bottom: 0;
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	}
	.icon {margin: 2px;}

	#credits-btn {top: 0; left: 0;}
}

/*narrow screens*/
@media (max-aspect-ratio: 4/5) 
{
	#entry-img 
	{
		width: 70vw; height: auto;
	}
	@keyframes zoom 
	{
		from {width: 5vw; height: auto;}
		to {width: 70vw; height: auto;}
	}
	@keyframes enter
	{
		from {width: 70vw; height: auto;}
		to {width: 170vw; height: 170vw;}
	}
	/* #lain-os-text {font-size: 20vw;} */
	/* #version-text {font-size: 5vw;} */
}

/*desktop / landscape display*/
@media (min-aspect-ratio: 4/3) 
{
	#entry-img	
	{
		height: 55vh; width: auto;
	}
	/*zoom into view*/
	@keyframes zoom 
	{
		from {height: 5vh; width: auto;}
		to {height: 55vh; width: auto;}
	}
	/*zoom in to fill the whole page*/
	@keyframes enter
	{
		from {height: 55vh; width: auto;}
		to {height: 155vh; width: 155vh;}
	}
	/* #lain-os-text {font-size: 10vw;} */
	/* #version-text {font-size: 2vw;} */

	#entry-bottom-text {bottom: 3.3%;}
	#login-click-area {height: 33vh; width: 33vh;}

	/*dock at the left*/
	#dock-container {left: 0; top: 0; bottom: 0; width: 60px; height: 100%;}
	#dock-bg 
	{
		width: 150px; height: 100%; left: 0; 
		/*background-image: url("../img/test-dock50-vertical.png"); */
		background-image: none;
	}
	#icons-container 
	{
		width: 55%; height: 40%; left: 6%; top: 23%;
		grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
	}
	.icon {width: 55px; height: 55px; margin: 5px;}
	#dock-bg-color 
	{
		position: absolute; left: 0; height: 100%; width: 55%; 
		backdrop-filter: blur(20px) brightness(95%);
		-webkit-backdrop-filter: blur(20px) brightness(95%); /*safari*/
	}

	#credits-btn {right: 5%; bottom: 2%;}
}

/* mobile mini window sizes (screens with width < 500px)*/
@media screen and (max-width: 500px)
{
	#entry-texts {font-size: 14px;}
	#lain-os-text {font-size: 27px;}
	#entry-bottom-text {font-size: 12px;}
	.entry-bottom-text-loaded
	{
		font-family: var(--lain-font) !important;
		font-size: 14px !important;
	}

	.mini-window-header {height: 30px; font-size: 12px;}
	.mini-window-close {height: 24px; width: 24px;}

	#music-player{width: 100vw; height: 136vw; top: 14%; left: 0;}/*147x200*/ 
	#terminal {width: 352px; height: 264px; top: 3%; left: 20%;}  /*640x480 x0.55*/
	#chat-window {width: 240px; height: 320px;} 				  /*480x640 x0.5*/
	#version-history-window {width: 320px; height: 240px;} 		  /*640x480 x0.5*/

	/*music player*/
	#cur-track-state {width: 18px;}
	.cur-time {font-size: 14px;} 
	#now-playing-marquee, #now-playing-marquee-clone {font-size: 12px;}
	#now-playing-static {font-size: 12px;}
	#changing-volume {font-size: 12px;} /*same as now-playing-static*/
	#cur-track-bitrate, #mono-stereo {font-size: 9px;}
	#artist-link-container {font-size: 12px;}

/*	#playback-controls button {width: 29px !important;}
*/
	.playlist-entry {font-size: 12px; margin: 1px;}
	#mini-total-time, #mini-cur-time {font-size: 9px;}
	/*music player end*/

	#terminal-ascii-art {transform: scale(0.22) translate(-190%, 170%);}
	#credits-btn {width: 150px; height: 150px;}
}

/* desktop n tablets mini window sizes (screens with width > 500px)*/
@media screen and (min-width: 500px)
{
	#entry-texts {font-size: 17px;}
	#lain-os-text {font-size: 34px;}
	#entry-bottom-text {font-size: 15px;}
	.entry-bottom-text-loaded
	{
		font-family: var(--lain-font) !important;
		font-size: 17px !important;
	}

	.mini-window-header {height: 40px; font-size: 13px;}
	.mini-window-close {height: 30px; width: 30px;}

	#music-player {width: 500px; height: 680px; top: 6%; left: 30%;} /*147x200 x3.4*/ 
	#terminal {width: 493px; height: 369px; top: 3%; left: 7%;}	 	 /*640x480 x0.77*/
	#chat-window {width: 317px; height: 422px;} 					 /*480x640 x0.66*/
	#version-history-window {width: 422px; height: 317px;} 		 	 /*640x480 x0.66*/

	/*music player*/
	#cur-track-state {width: 22px;}
	.cur-time {font-size: 18px;} 
	#now-playing-marquee, #now-playing-marquee-clone {font-size: 13px;}
	#now-playing-static {font-size: 13px;}
	#changing-volume {font-size: 13px;} /*same as now-playing-static*/
	#cur-track-bitrate, #mono-stereo {font-size: 11px;}
	#artist-link-container {font-size: 13px;}

/*	#playback-controls button {width: 12vw;}
*/
	.playlist-entry {font-size: 13px; margin: 4px;}
	#mini-total-time, #mini-cur-time {font-size: 12px;}
	/*music player end*/

	#terminal-ascii-art {transform: scale(0.30) translate(-120%, 110%);}
	#credits-btn {width: 200px; height: 200px;}
}

p, label, button, option, ul
{
	font-family: var(--mono-font);
	color: black;
}

#entry-page
{
	width: 100vw; height: 100vh; position: fixed;
	display: flex; justify-content: center; align-items: center;
	transition: var(--fade-in);
	z-index: 1111; 
	top: 0; left: 0; bottom: 0; right: 0;
	background-color: whitesmoke;
	font-family: var(--lain-font); 
}

#entry-texts-container {position: fixed; width: 0; height: 0;}
#entry-texts {position: absolute; color: black; white-space: nowrap;}
.entry-text-bg {text-shadow: 0 0 20px var(--purple-highlight-color), 0 0 20px var(--purple-highlight-color);}

.zoom-into-view
{
	animation: zoom 2.5s linear 1;
}

.zoom-fill-screen
{
	animation: enter 0.7s linear 1;;
}

#login-click-area 
{
	position: absolute; cursor: pointer;
	/* background-color: violet; opacity: 0.3; */
}

#lain-os-text 
{
	position: absolute; text-align: center;
	color: var(--bg-color); 
	/* color: #e1e4eb; */
	text-shadow: rgb(187, 187, 187) 7px 7px;
}

#entry-bottom-text 
{
	position: absolute; white-space: nowrap; text-align: center;
	font-family: var(--mono-font); /*font is changed later in js*/
	color: dimgray;
}

#main-container
{
	position: fixed; width: 100vw; height: 100vh;
	display: flex; justify-content: center; align-items: center;
	top: 0;	left: 0; bottom: 0;	right: 0;
	font-family: var(--mono-font);
}

.mini-window { user-select: none; }
#terminal-inner-container { user-select: text !important; }
/***************** mini windows /*****************/
.mini-window
{
	position: absolute;
	background-color: gainsboro;
	border-radius: 10px;
	box-shadow:  -3px -3px 6px dimgray inset, 3px 3px 6px dimgray inset;

	--inner-container-shadow: -1px -1px 1px dimgray, 1px 1px 1px dimgray;
}

/*mini windows initial position & z-index*/
#music-player {z-index: 7;} /*pos set in media tags*/
#terminal {z-index: 6;} /*pos set in media tags*/
#chat-window {top: 15%; right: 17%; z-index: 4;}
#version-history-window {top: 37%; right: 4%; z-index: 5;}

.mini-window-draggable
{
	position: absolute;
	width: 100%; height: 100%;
	cursor: grab;
}

.mini-window-header
{
	position: absolute;
	top: 0; left: 0; right: 0;
	display: flex; justify-content: center; align-items: center;
	color: dimgray;
}

.mini-window-close 
{
	position: absolute;	z-index: 11111;
	right: 3%; top: 13%;
	background: center/85% url("../img/music-player-components/minimise4.png") no-repeat;
	opacity: 0.3;
}
.mini-window-close:hover {opacity: 0.5;}

/******* music player *******/
#music-player
{
	color: black; 
	background-color: transparent;
	box-shadow: none;
	/* bg img is set in js*/
	/* background-image: url("../img/player-final77-small.png"); */
	background-repeat: no-repeat;
	background-size: 100%; 
	/*width n height are set separately, responsive to screen size*/
	text-shadow: var(--text-glow-shadow); 
}

#music-player .mini-window-draggable {width: 93%; right: 0;}
#music-player .mini-window-header {left: 13%;}
#music-player .mini-window-close 
{
	top: 21%; right: 4%;
	background: center/90% url("../img/music-player-components/player-minimise3.png") no-repeat;
	opacity: 0.7;
}
#music-player .mini-window-close:hover {opacity: 1;}
#now-playing-container
{
	position: absolute;
	left: 42%; right: 11%; top: 6%; bottom: 88%;
	width: auto; height: auto;
	overflow: hidden;
	/* background-color: var(--music-player-bg); 
	opacity: var(--music-player-bg-opacity); */
}

#now-playing-static {position: absolute; margin: 0; margin-top: 3px; z-index: 33;}
#changing-volume {position: absolute; margin: 0; margin-top: 3px; z-index: 33; opacity: 0;} /*exact same pos as now-playing-static*/

#now-playing
{
	position: absolute;
	display: flex;
	margin-top: 3px;
	width: auto; height: 100%;

	animation: scrollText 7s linear infinite;
	/* -webkit-animation: webkitScrollText 7s linear infinite;*/
} 
/* 
 #now-playing-clone 
 {
 	position: absolute;
	display: flex;
	margin-top: 3px;
	width: auto; height: 100%;
	animation: scrollText 7s linear infinite;
 } */

#now-playing-marquee
{
	position: relative;
	width: auto; height: 100%; margin: 0;
	margin-left: -100%; left: 0;
	white-space: nowrap;
	background-color: transparent;

	animation: scrollText 7s linear infinite;
	/* -webkit-animation: webkitScrollText 7s linear infinite; */
}

/* #now-playing-marquee-clone
{
	position: relative;
	width: auto; height: 100%; margin: 0;
	margin: 0; left: 0;
	white-space: nowrap;
	background-color: transparent;
	color: violet;
	animation: scrollText 7s linear infinite;
} */

/*animate the two elements at same time 
so that texts of variable lengths can be scrolled*/
@keyframes scrollText
{
	/*translate() doesn't work on safari - 
	the animated element only shows up on window resize.
	change "left" instead of using translateX()*/

	/* from {transform: translateX(100%);}
	to {transform: translateX(0);} */
	from {left: 100%;}
    to {left: 0%;}
}

/* @-webkit-keyframes webkitScrollText
{
	0% 	{-webkit-transform: translateX(100%);}
	50%	{-webkit-transform: translateX(50%);}
	100% {-webkit-transform: translateX(0);}
	from {left: 100%;}
    to {left: 0%;}
} */

/* @-webkit-keyframes scrollText
{
	from {-webkit-transform: translateX(100%);}
	to {-webkit-transform: translateX(0);}
} */
/* @keyframes scrollTextDelayed
{
	from {transform: translateX(0);}
	to {transform: translateX(-100%);}
} */

#cur-time-container
{
	position: absolute;
	left: 18%; right: 59%; top: 6%; bottom: 84%;
	width: auto; height: auto;
	/* background-color: var(--music-player-bg); 
	opacity: var(--music-player-bg-opacity); */
}

/*play/pause/stop icons*/
#cur-track-state {position: absolute; margin: 0; margin-left: 5px; margin-top: 3px;} 

.cur-time
{
	font-family: var(--mono-font);
	margin: 0; margin-left: 25%; margin-top: 3px; 
}

#visualiser-container
{
	position: absolute;
	margin: 0; 
	bottom: 0; top: 33%; left: 2%; right: 2%;
}

#visualiser 
{
	width: 100%; height: 100%;
}

/*responsive font size*/
#cur-track-bitrate {position: absolute; margin: 0; left: 1%; bottom: 0;}
#mono-stereo {position: absolute; margin: 0; right: 6%; bottom: 0;}

#volume-slider-container
{
	position: absolute; margin: 0;
	left: 46%; right: 29%; top: 15%; bottom: 82%;
	background-image: url("../img/music-player-components/volume_bar_c.png");
	background-repeat: no-repeat;
	background-size: 90% auto;
}

#volume-slider
{
	all: unset; 
	width: 100%; height: 100%; cursor: pointer;
}

#volume-slider::-webkit-slider-thumb 
{
	-webkit-appearance: none;
	appearance: none; width: 23px; height: 23px;
	background: url("../img/music-player-components/volume_slider_thumb.png") no-repeat;
	background-size: auto 100%;
	cursor: pointer;
}

#volume-slider::-moz-range-thumb {
	width: 25px;
	height: 25px;
	background: url("../img/music-player-components/volume_slider_thumb.png") no-repeat;
	background-size: auto 100%;
	cursor: pointer;
}

#progress-bar-container
{
	position: absolute;
	left:14%; right:6%; top: 19%; bottom: 78%;
	cursor: pointer;
}

#progress-bar-fill
{
	position: absolute; width: 100%; z-index: -1;
	overflow: hidden; 
}

#shuffle-loop-container
{
	position: absolute;
	left: 14%; right: 77%; top: 22%; bottom: 70%; 
}

#shuffle-loop-container button 
{
	background: transparent; border: none; 
	margin: 0; padding: 0; border: 0;
	width: 100%; height: 52%; 
	cursor: pointer; 
}

#shuffle-loop-container img {width: auto; height: 100%;}

#playback-controls
{
	position: absolute; 
	left:29%; right:20%; top: 23%; bottom: 68%;
	display: flex; justify-content: center; 
	align-items: flex-end; /*align vertically at the bottom line*/
	flex-direction: row;
}

#playback-controls button 
{
	background: transparent; border: none; 
	margin: 1%; padding: 0; border: 0; margin-bottom: 2%;
	border-radius: 11px;
	cursor: pointer;
}

#playback-controls button img, #dl-button-container img
{width: 100%; height: auto;}

/*pressed down animation*/
#playback-controls button:active,
#shuffle-loop-container button:active,
#dl-button-container button:active
{
	transform: translate(1px, 2px);
	/*box-shadow:  -1px -2px 2px dimgray;*/
}

#dl-button-container
{
	position: absolute;
	left: 85%; right: 7%; top: 22%; bottom: 69%; /*nice*/
}

#dl-button-container a, #dl-button-container button
{
	width: 100%; height: 100%;
}

#dl-button-container button 
{
	background: transparent;border: none; 
	margin: 0; padding: 0; border: 0; cursor: pointer;
}

#artist-link-container
{
	position: absolute;
	left: 28%; right: 22%; top: 41%; bottom: 53%;
	/* background-color: #e1e4eb; border-radius: 10px; */
	display: flex; align-items: center; justify-content: center; text-align: center;
}
#artist-link-container p, #artist-link-container a {word-break: break-all; color: black;}

#playlist-container
{
	position: absolute;
	left: 19%; right: 8%; bottom: 14%; top: 58%;
	/* background-color: var(--music-player-bg); 
	opacity: var(--music-player-bg-opacity); */
/*	backdrop-filter: blur(13px) brightness(120%) contrast(80%);
	-webkit-backdrop-filter: blur(13px) brightness(120%) contrast(80%); /*safari*/

	overflow-y: scroll; overflow-x: hidden;
}
#playlist-container::-webkit-scrollbar {width: 10px; background-color: transparent;}
#playlist-container::-webkit-scrollbar-thumb 
{
	border-radius: 10px;
	background-color: gainsboro;
	box-shadow:  -2px -2px 2px dimgray inset, 2px 2px 2px dimgray inset;
}

#playlist-content 
{
	list-style-type: none; 
	padding: 0; 
}

.playlist-entry 
{
	cursor: pointer; padding: 2px;
	background-color: transparent;
}

.playlist-entry:hover{
	/* background-color: white !important;
	color: black; */
	box-shadow: 4px 3px 3px black;
}

#mini-display-container
{
	position: absolute;
	left: 59%; right: 11%; bottom: 5%; top: 88%;
	/* background-color: var(--music-player-bg); 
	opacity: var(--music-player-bg-opacity); */
}

#mini-total-time
{
	position: absolute; top: 4%; left: 6%; margin: 0; 
	color: black;
}

#mini-controls 
{
	position: absolute; 
	top: 66%; bottom: 1%; left: 4%; right: 31%;
}

#mini-controls img {position: absolute; left: 0; top: 0; width: 100%; height: auto;}

#mini-controls-btns-container
{
	position: absolute;
	width: 100%; height: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr; 
	gap: 2%;
}

#mini-controls-btns-container button 
{
	background: transparent; border: none; 
	margin: 0; padding: 0; border: 0;
	cursor: pointer;
	/* background-color: violet; */
}

#mini-cur-time
{
	position: absolute;
	color: black;
	bottom: 0; right: 5%;
}
/******* music player end *******/

/******* chat *******/
#chat-wrapper
{
	display: flex; justify-content: center; align-items: center;
	/*width n height are set separately, responsive to screen size*/
}

#chat-container
{
	font-size: 13px; 
	position: absolute;
	width: 90%;
	top: 9%; bottom: 4%;
	box-shadow: var(--inner-container-shadow);
}
/******* chat *******/

/******* terminallllllll *******/
#terminal
{
	font-size: 13px; color: whitesmoke !important;  
}

#terminal-inner-container
{
	position: absolute;
	width: 94%; height: 85%;
	left: 3%; right: 3%; top: 11%;
	background-color: black;

	box-shadow: var(--inner-container-shadow);
}

#terminal-txt-container
{
	position: absolute;
	left: 1%; right: 1%; top: 0; bottom: 7%;
	width: 98%;
	background-color: black;
	overflow-y: scroll;
	z-index: 7; /*in case it gets occluded by input are*/

	-ms-overflow-style: none;  /* hide scroll bar in IE and edge */
  	scrollbar-width: none;  /* hide scroll bar in firefox */
}
/*hide scroll bar inside terminal but still scrollable*/
#terminal-txt-container::-webkit-scrollbar {display: none;}

#terminal-input-container
{
	position: absolute; 
	width: 98%;
	left: 1%; right: 1%; bottom: 1%;
	background-color: transparent; /*in case it gets occluded by input are*/
}

/*todoooooo hide the scrollable blank space above the ascii art*/
/*#terminal-ascii-art-container
{
	top: 0; left: 0;
	width: 100%;
}*/

#terminal-ascii-art
{
	font-size: 12px;
	font-family: Consolas, monospace; 
	/*line-height: normal !important; */
	padding: 0; margin: 0; border: 0;	

	/*when browser's preferred language is set to chinese, */
	/*the min font-size is restricted to 12px. */
	/*transform:scale() can be used to counter this browser limitation*/
	/* transform: scale(0.30) translate(-120%, 110%); */ /*moved to media tag*/
}

#terminal-display /*shows submitted texts*/
{
	color: whitesmoke;
	font-size: 13px; 
	margin: 0px;	
}

#terminal-prompt 
{
	font-size: 13px; 
	position: absolute; 
	margin-top: 4px; /*so it aligns with the fake caret*/
	/*margin-left: 4px;*/
}

#fake-caret 
{
	position: absolute;
	margin-left: 111px; /* prompt length */
	width: 11px;
	animation: blink 1s step-end infinite;
  	border-bottom: 2px solid whitesmoke;
}

@keyframes blink {
	from,
	to {border-color: transparent;}
  	50% {border-color: whitesmoke;}
}

#terminal-input
{
	font-family: var(--mono-font);
	font-size: 13px; 
	color: whitesmoke;
	background-color: black; width: 100%;
	padding: 0px;
	border-width: 0px;
	text-indent: 111px; /* prompt length + prompt left margin */
	margin-top: 4px; /*so it aligns with the fake caret*/
	caret-color: transparent;
}

/*hide input box border when selected*/
#terminal-input:focus {outline: none !important;}
/******* terminallllllll end *******/

#dock-container
{
	position: absolute;
	display: flex;
	justify-content: center; align-items: center;
}

#dock-bg 
{
	position: absolute;	display: flex; 
	justify-content: center; align-items: center;
	background-size: 100%; background-position: 0;
	background-repeat: no-repeat;
}

#icons-container 
{
	position: absolute; 
	display: grid;
}
.icon 
{
	visibility: hidden;
	cursor: pointer;
}

.icon img {width: 100%;}

/******* version history *******/
#version-history-container
{
	position: absolute;
	display: flex;
	justify-content: center; align-items: center;
	width: 92%; height: 83%;
	left: 4%; right: 4%; top: 12%;
	background-color: whitesmoke;

	box-shadow: var(--inner-container-shadow);
}

#version-history-texts
{
	font-family: var(--mono-font); font-size: 13px;
	width: 100%; height: 100%; 
	margin: 0; padding: 0;
	overflow-y: scroll;
	white-space: pre-wrap; 
}

/*dates to the right of each version number*/
#version-history-texts span {float: right;}
/******* version history *******/

/***************** mini windows /*****************/

/***************** old music player *****************/

#temp-toggle
{
	position: absolute;
	right: 5%; top: 0;
	width: 50px; height: 110px;
	font-size: small; color: white; text-align: center;
	writing-mode: vertical-rl; text-orientation: mixed;
	background-color: var(--purple-highlight-color);
	z-index: 1000;
	cursor: pointer;
}

#biquad-prompt:hover #biquad-tips{opacity: 1;}

#biquad-tips {
	position: absolute; right: 120%;
	margin: 7px; padding: 5px; width: 200px;
	font-size: small; word-wrap:break-word;
	background-color: darkgray; color: black; 
	opacity: 0;
}

#old-playlist-container
{
	position: absolute;
	top: 0;
	right: 0;
	width: 444px;
	height: 400px;
	background-color: darkgray;
	overflow: auto;
}

#old-playlist-content{list-style-type: none;}

#old-player-container 
{
	position: absolute; top: 0; display: none; color: black !important;
	font-size: 13px;
}

#old-play-pause-btn {width: 150px;}

.long-slider {width: 330px;}

#old-progress-bar-container
{
	position: relative;
	margin-left: 9px; margin-right: 9px; 
	width: 240px;
	height: 10px;
	background-color: lightgrey;
}

#old-progress-bar-fill
{
	position: absolute;
	max-width: 240px;
	width: 0px;
	height: 10px;
	background-color: dimgray;
}

hr /*temp*/
{
   display: block; position: relative; padding: 0; margin: 8px auto; height: 0;
   width: 100%; max-height: 0; font-size: 1px; line-height: 0; clear: both;
   border: none;
   border-top: 1px solid darkgray;
   border-bottom: 1px solid darkgray;
}
/***************** old music player *****************/

/***************** credits *****************/

#credits-btn {position: absolute;}

#credits-btn img {position: absolute; top: 0; right: 0; width: 100%; height: auto;}

/***************** credits end *****************/