body {
	background: url(media/write040.gif);
}

.page-container {
    display: flex;
    gap: 20px;
    max-width: 900px;
    margin: auto;
	margin-top: 80px;
	margin-bottom: 50px;
	margin-left: 350px;
	color: green;
}

.window-content {
    background: black;
    border: 2px inset #808080;
    padding: 10px;
    min-height: 300px; width: 600px;
	box-shadow: 10px 10px 0 green, 20px 20px 0 black, 30px 30px 0 green, 40px 40px 0 black;
}

div.gallery {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-left: 30px; margin-right: 40px; margin-top: 80px;
}

div.gallery-item {
  margin: auto;
  width: 100px; height: 100px;
  transition: 0.5s;
}

div.gallery-item:hover {
	transform: scale(1.5);
	z-index: 2;
}

div.gallery-item img {
  width: 100px;
  height: 100px;
}

div.gallery-item div.desc {
  padding: 10px;
  text-align: center;
}

button,input,label,option,select,table,textarea,ul.tree-view{-webkit-font-smoothing:none;font-family:"Pixelated MS Sans Serif",Arial;font-size:11px}h1{font-size:5rem}h2{font-size:2.5rem}h3{font-size:2rem}h4{font-size:1.5rem}u{border-bottom:.5px solid #222;text-decoration:none}button,input[type=reset],input[type=submit]{border:none;border-radius:0;box-sizing:border-box;color:transparent;min-height:23px;min-width:75px;padding:0 12px;text-shadow:0 0 #222}.vertical-bar,button,input[type=reset],input[type=submit]{background:silver;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px grey,inset 2px 2px #dfdfdf}.vertical-bar{height:20px;width:4px}button:not(:disabled):active,input[type=reset]:not(:disabled):active,input[type=submit]:not(:disabled):active{box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px #dfdfdf,inset 2px 2px grey;text-shadow:1px 1px #222}@media (not(hover)){button:not(:disabled):hover,input[type=reset]:not(:disabled):hover,input[type=submit]:not(:disabled):hover{box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px #dfdfdf,inset 2px 2px grey}}button:focus,input[type=reset]:focus,input[type=submit]:focus{outline:1px dotted #000;outline-offset:-4px}button::-moz-focus-inner,input[type=reset]::-moz-focus-inner,input[type=submit]::-moz-focus-inner{border:0}:disabled,:disabled+label,input[readonly],input[readonly]+label{color:grey}:disabled+label,button:disabled,input[type=reset]:disabled,input[type=submit]:disabled{text-shadow:1px 1px 0 #fff}}
 
.title-bar-controls button {border:none;border-radius:0;box-sizing:border-box;color:transparent;min-height:23px;min-width:75px;padding:0 12px;text-shadow:0 0 #222}
 
.title-bar-controls button {background:silver;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px grey,inset 2px 2px #dfdfdf}
 
.title-bar-controls button:not(:disabled):active {box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px #dfdfdf,inset 2px 2px grey;text-shadow:1px 1px #222}
 
@media (not(hover)){
	button:not(:disabled):hover {
    box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px #dfdfdf,inset 2px 2px grey}
}
 
@font-face {
	font-family: "Pixelated MS Sans Serif";
	src: url("https://files.catbox.moe/1za99g.woff") format("woff");
	src: url("https://files.catbox.moe/8fwbkl.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
}

.title-bar {
	background: black; 
	padding: 3px 2px 3px 3px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: white;
	height: 20px; width: 620px;
	border: #808080;
	margin-top: 10px;
}

.title-bar-controls {
	display: flex;
	gap: 0;
}

.title-bar-controls button {
	padding: 0;
	display: block;
	min-width: 16px;
	min-height: 14px;
	cursor: pointer;
}
 
.title-bar-controls button:active {
	padding: 0;
}
 
.title-bar-controls button:focus {
	outline: none;
}
 
.title-bar-controls button[aria-label=Minimize]{
	background-image:url("https://raw.githubusercontent.com/jdan/98.css/main/icon/minimize.svg");
	background-position:bottom 3px left 4px;
	background-repeat:no-repeat}
 
.title-bar-controls button[aria-label=Maximize]{
	background-image:url("https://raw.githubusercontent.com/jdan/98.css/4a2282dd9170cabf730fb5803d1153d86b2e94e3/icon/maximize.svg");
	background-position:top 2px left 3px;
	background-repeat:no-repeat}
 
.title-bar-controls button[aria-label=Close]{
	background-image:url("https://raw.githubusercontent.com/jdan/98.css/main/icon/close.svg");
	background-position:top 3px left 4px;
	background-repeat:no-repeat;
	margin-left:2px}
 
button {
	min-width:40px;
}
	
/* Scrollable Windows */
.scrollable {
	max-height: 200px; /* or fixed height */
	overflow-y: scroll;  /* enables vertical scroll */
	overflow-x: hidden; /* prevents sideways scroll */
}

.scroll::-webkit-scrollbar {
	width: 16px;
	height: 16px;
}

.scroll::-webkit-scrollbar-track {
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAFElEQVQIW2M4fPz0////GYAYyAIASnoKpV3w4kgAAAAASUVORK5CYII=");
	image-rendering: pixelated;
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: grayscale(100%);
}

.scroll::-webkit-scrollbar-track:active {
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAEElEQVQIW2No6+pjgAAgCwAWogM9VKrgGQAAAABJRU5ErkJggg==");
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: grayscale(100%);
}

.scroll::-webkit-scrollbar-thumb {
	border-top: 1px solid #cccccc;
	border-left: 1px solid #cccccc;
	border-right: 1px solid black;
	border-bottom: 1px solid black;
	box-shadow: inset 1px 1px 0 0 white, inset -1px -1px 0 0 #868a8e;
	width: 16px;
	height: 16px;
	background-color: #cccccc;
	z-index: 1;
}

.scroll::-webkit-scrollbar-corner {
	background-color: #cccccc;
}

.scroll::-webkit-resizer {
	width: 16px;
	height: 16px;
	background-color: #cccccc;
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAN0lEQVR4Ae3MgQUAMBRDwU5fFF05lb/CARTBw2Ulof0DxPtcwp3hNuEYnjbcEW4TjuFpwx3h9gMWGgZ2Y/PT2gAAAABJRU5ErkJggg==");
	background-position: bottom right;
	background-repeat: no-repeat;
	image-rendering: pixelated;
}

::-webkit-scrollbar-button,
.scroll::-webkit-scrollbar-button {
	border-top: 1px solid #cccccc;
	border-left: 1px solid #cccccc;
	border-right: 1px solid black;
	border-bottom: 1px solid black;
	box-shadow: inset 1px 1px 0 0 white, inset -1px -1px 0 0 #868a8e;
	display: block;
	width: 16px;
	height: 16px;
	background-color: #cccccc;
	image-rendering: pixelated;
	background-repeat: no-repeat;
	background-position: center center;
}

::-webkit-scrollbar-button:active,
.scroll::-webkit-scrollbar-button:active {
	background-position: 2px 2px;
}

::-webkit-scrollbar-button:horizontal:decrement,
.scroll::-webkit-scrollbar-button:horizontal:decrement {
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAHklEQVQY02NgoBT8xyX8H5fwf1zCpOjAYwceV1EEAAO2D/HsQ4vsAAAAAElFTkSuQmCC");
}

::-webkit-scrollbar-button:horizontal:increment,
.scroll::-webkit-scrollbar-button:horizontal:increment {
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAHUlEQVQY02NgIB/8xy3xH7fEf9wS/0nUQZqrKAYAK44P8ZRmzLQAAAAASUVORK5CYII=");
}

::-webkit-scrollbar-button:vertical:decrement,
.scroll::-webkit-scrollbar-button:vertical:decrement {
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAGklEQVR4AWMYxuA/SYphmETFhDX9x4mHGQAAcL4P8dQiMq8AAAAASUVORK5CYII=");
}

::-webkit-scrollbar-button:vertical:increment,
.scroll::-webkit-scrollbar-button:vertical:increment {
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAF0lEQVQY02NgoBf4jwJxSOHQhcNAOgMAWWAP8Rv2U3UAAAAASUVORK5CYII=");
}

::-webkit-scrollbar-button:horizontal:increment:start,
.scroll::-webkit-scrollbar-button:horizontal:increment:start {
	display: none;
}

::-webkit-scrollbar-button:horizontal:decrement:end,
.scroll::-webkit-scrollbar-button:horizontal:decrement:end {
	display: none;
}

::-webkit-scrollbar-button:vertical:increment:start,
.scroll::-webkit-scrollbar-button:vertical:increment:start {
	display: none;
}

::-webkit-scrollbar-button:vertical:decrement:end,
.scroll::-webkit-scrollbar-button:vertical:decrement:end {
	display: none;
}

::-webkit-scrollbar-button:active,
.scroll::-webkit-scrollbar-button:active {
	border-top: 1px solid #868a8e;
	border-left: 1px solid #868a8e;
	border-bottom: 1px solid #868a8e;
	border-right: 1px solid #868a8e;
	box-shadow: none;
}

footer {
	color: white;
}