@import url('https://fonts.googleapis.com/css2?family=Ubuntu+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Workbench&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Doto:wght@100..900&display=swap');

:root {

	--icon-width:64px;
	--icon-font: 'Ubuntu Mono';

	--toolbar-height: 32px;
	--toolbar-font: 'Ubuntu Mono';
	--toolbar-font-size: 24px;
	--toolbar-padding:8px;

	/* --textwindow-width: 600px;
	--textwindow-height: 340px; */
	--textwindow-width: 50vw;
	--textwindow-height: 50vh;
	--credits-padding: 8px;
	/* --header-height: 256px; */
	--gallerycontentitem-width:128px;
	--gallerycontentitem-height:96px;


	--imagedisplay-width: 576px;
	--imagedisplay-height: 324px;

	--blinkies-opacity: 100%;

	--sillymogus-width: 32px;
}

* {
	margin: 0;
	padding: 0;
}

body {
	margin: 0;
	padding: 0;
	/* background-color: black; */
	overflow: hidden;
}

#main {
	width: 100vw;
	height: 100vh;
	background-image: url("https://upload.wikimedia.org/wikipedia/commons/4/4d/Bubble_galaxy.png");
	background-size: cover;
	background-position-y: center;
	background-position-x: center;
}

.absolute {
	position:absolute;
}


/* .header { */
	/* height:; */
/* } */


.toolbar {
	display: flex;
	flex-direction: row;
	height: var(--toolbar-height);
	background-color: violet;
	/* user-select: none; */
	/* -webkit-user-drag: element; */
	/* font-family: 'Courier New', Courier, monospace; */
	font-family: var(--toolbar-font);
	font-size: var(--toolbar-font-size);
	font-weight: bold;
	align-content: center;
	/* padding-left: var(--toolbar-padding); */
}
.toolbar img {
	width:var(--toolbar-height);
	image-rendering: pixelated;

}

.toolbartitle {
	
	/* align-content: center; */
	line-height: var(--toolbar-height);
	text-align: center;

	/* vertical-align: middle; */
}

.toolbarutils {
	/* width: 100vmax; */
	flex-grow: 1;
	display: flex;
	flex-direction: row-reverse;
	/* justify-items: ;	 */
	right: 0;
}

.icon {
	display: flex;
	flex-direction: column;
	align-items: center;
	color: white;
	font-family: var(--icon-font);
	font-weight: bold;
	user-select: none;
}

.icon img {
	width: var(--icon-width);
	image-rendering: pixelated;
}


.textwindow {
	width: var(--textwindow-width);
	height: var(--textwindow-height);
	/* scrollbar-width: 0; */
	/* scrollbar-gutter: stable; */
	background-color: white;
	font-family: "Ubuntu";
	/* scrollbar-width: 0; */
}

.credits {
	overflow-y: scroll;
	padding: var(--credits-padding);
}

.bottom {
	bottom: 0;
}

.gallerycontent {
	display: flex;
	flex-direction: column;
	width: 60vw;
	height: 60vh;
	background-color: rebeccapurple;
	user-select: none;
}

.gallerycontentrow {
	display: flex;
	flex-direction: row;
}

#activegallerypage {
	margin-top: 16px;
}

.galleryfolder {
	display: flex;
	flex-direction: column;
	align-items: center;
	color: white;
	font-family: var(--icon-font);
	width: var(--gallerycontentitem-width);
	height: var(--gallerycontentitem-width);
}

.galleryfolder img{
	width: var(--gallerycontentitem-height);
	height: var(--gallerycontentitem-height);
	padding-left: calc((var(--gallerycontentitem-width) - var(--gallerycontentitem-height)) / 2);
	padding-right: calc((var(--gallerycontentitem-width) - var(--gallerycontentitem-height)) / 2);
	image-rendering: pixelated;
}

.gallerycontentitem {
	display: flex;
	flex-direction: column;
	align-items: center;
	color: white;
	font-family: var(--icon-font);
	font-weight: bold;
}

.gallerycontentitem img {
	width: calc(var(--gallerycontentitem-width) - 2*(8px));
	height: calc(var(--gallerycontentitem-height) - 2*(8px));
	padding: 8px;
	object-fit: contain;
}

.imagedisplay img {
	width: var(--imagedisplay-width);
	/* height: var(--imagedisplay-height); */
	/* width: auto; */
	height: auto;
	object-fit: contain;
}

/* .terminalcontainer {
	display: flex;
	flex-direction: column;
}

#terminalstdoutcontainer {
	display: flex;
	flex-direction: column-reverse;
	width: var(--imagedisplay-width);
	height: var(--imagedisplay-height);
	background-color: black;
	overflow-y: scroll;
	overflow-x: hidden;
}

.terminalstdout {
	color: greenyellow;
	font-family: "Workbench";
	font-size: 16px;
	line-height: 32px;
}
#terminalinput {
	background-color: black;
	width: 100%;
	border: 2px;
	border-color: white;
	border-style: solid;
	color:white;
	font-family: "Doto";
	font-weight: bold;
	font-size: 16px;
	line-height: 32px;
	height: 32px;
} */

.foot {
	display: flex;
	flex-direction: column;
	width:100vw;
}

.blinkiecollection {
	/* width: 100%; */
	
	/* width:100vw; */
	height: 40px;
	right:0;
	display: flex;
	flex-direction: row-reverse;
	/* overflow-y: hidden; */
	flex-shrink: 0;
	overflow-x: scroll;
}


.hidescrollbar {
	scrollbar-width: none;
}

/* .hidescrollbar::-webkit-scrollbar { */
	/* display: none; */
	/* height: 0; */
	/* width: 0; */
/* } */

img.s200{
	width: 300px;
	height: 40px;
	opacity: var(--blinkies-opacity);
}

.blinkie {
	image-rendering: pixelated;
	user-select: none;
}

/* @keyframes sillymogus-walk{
	0% {
		transform: translateX(calc(var(--sillymogus-width) * 0));
	}
	25% {
		transform: translateX(calc(var(--sillymogus-width) * 0.5));
	}
	50% {
		transform: translateX(calc(var(--sillymogus-width) * 0.5));
	}
	100% {
		transform: translateX(calc(var(--sillymogus-width) * 1));
	}
} */

img.sillymogus{
	position:absolute;
	/* width: var(--sillymogus-width); */
	image-rendering: pixelated;
	/* animation: sillymogus-walk 0.5s; */
}