@font-face { /* Loads the font that the entire website uses */
	font-family:				'Windows'; /* Defines the name you'll call when you wanna use this font */
	src:					url('../font/windows.ttf') format('truetype'); /* Finds font file and tells the CSS interpreter it's a .ttf file */
}

:root { /* Sets page-wide shit; :root applies CSS to the <html> element but it has different priority for CSS parsers. Point is it's a good place to set variables and be able to reference them from anywhere in the document */
	/* Colors */ /* I like to set theme colors as CSS variables so I don't have to remember their specific codes */
	--teal:					#dba800; /* The desktop background; iconic w98 teal. I just realize I could've just said "teal" bc it's a web-safe color but hindsight is 2020*/
	--bg:					#fc922f; /* Window backgrounds */
	--error-bg: 			url('404.png');
	--highlight:				#dfdfdf; /* The highlight part of window borders */
	--shadow:				#4b2222; /* The shadow part of window borders */
	/* Variables */ /* CSS Variables are super useful; you can set them to anything with --variablename and then recall them with var(--ariablename), so I made some code I knew I'd reuse many times into variables here */
	--gradient:				linear-gradient( /* Gradient for the window titlebar. CSS gradients are messy as shit, so check documentation before making your own */
							to right, /* Gradient is horizontal and goes left to right (default is top to bottom iirc */
							#803100, /* Gradient's start color */
							#d08a10); /* Gradient's end color */
	--gradientinactive:			linear-gradient( /* Gradient for inactive titlebars */
							to right,
							#7a6161,
							#c98f8f);
	--outborder:				white rgb(101, 255, 45) rgb(101, 255, 45) white; /* Border for elements that are, like, convex. CSS shorthand usually goes TOP RIGHT BOTTOM LEFT, so these borders are white on the left and top, and black on the right and bottom */
	--outshadow:
						inset -1px -1px 0 var(--shadow), /* box-shadows to finish the convex look; inset makes the shadow go inside the element instead of outside, then it's their displacement in the X axis, their displacement in the Y axis, their blur and their color */
						inset 1px 1px 0 var(--highlight); /* 2nd component of the shadow for convex elements */
	--inborder:				black white white black; /* Same as above but for concave elements */
	--inshadow:
						inset 1px 1px 0 var(--shadow),
						inset -1px -1px 0 var(--highlight);
	/* Stuff */
	font:					14px Windows, monospace; /* Make the document's font default to the font size 14px, and the system's default monospace font as a fallback in case the custom one doesn't load */
}

body { /* the <body> element, so most of the page */
	position:				relative; /* position:relative lets you both move THIS element relative to its initial position and makes elements with position:absolute use this element's limits instead of the entire screen's */
	width:					100vw; /* makes the document's body be as wide as the screen (100% View Width = 100vw) */
	height:					100vh; /* same as above but w height */
	margin:					0; /* makes <body> use the entire screen instead of leaving some space in the edges, usually you don't want this but since we're imitating the w98 UI it makes sense */
	background:     var(--teal); /* calls for the --teal variable we set earlier as the page's background */
	overflow:       hidden; /* makes it non-scrollable in case the element goes bigger than the screen for some reason */
	display:				grid; /* Turns body into a CSS grid */
	grid-template-columns:			calc(4 * 8ch) 1fr; /* The grid has two columns: one is 4 times 8 characters wide (so it can fit about 4 columns of desktop icons, which I set to be 8ch wide later), and the other uses the remaining screen space (1 Frame of Reference = 1fr) */
}
body.error-page {
    background: var(--error-bg) center/cover no-repeat;
	color: rgb(0, 255, 0)
}

h1, h2, h3, h4, h5, h6 { /* Makes all heading elements align to the center by default. I like doing this but I don't think I actually use it here lmao */
	text-align:				center;
}

.window,
.button { /* Both windows and buttons have the same "convex" borders, so I apply this styling to both of them. It'd have been better to make a .convex class, but hindsight is 2020. in CSS, you style classes with .classname{styling} */
	background:				var(--bg); /* Sets the background of these elements to the background color using the variable we set earlier */
	border:					1px solid; /* Sets the border's line type and thickness */
	border-color:				var(--outborder); /* Uses the variables from earlier to set border colors */
	box-shadow:				var(--outshadow); /* Uses the variables from earlier to set box-shadows and finish the look */
	padding:				2px; /* Padding is how much bigger an element is than its defined width-height. That is, if something is 10px by 10px and has a 2px padding, it ends up being 12px by 12px but those two outer pixels don't get content in them. Look into the CSS box model to understand this I don't think I can explain the box model via code comments only */
}

.button {
	text-decoration:			none; /* Since buttons are usually links, this makes their text not be underlined (which is HTML's default) */
}

.button:is(:active, :focus) { /* Makes the buttons appear pressed when clicked (:active) or focused via keyboard (:focus) */
	border:					1px solid;
	border-color:				var(--inborder);
	box-shadow:				var(--inshadow);
}

/* Desktop Icons */
	.desktopshortcuts { /* Container for the desktop icons, uses the left column in <body>'s grid */
		max-height:			50vh; /* Makes it as tall as half the screen's height */
		display:			flex; /* Makes it into a flexbox element (dynamically resizing container for many items, essentially; flexbox is v powerful! flex and grid being added to CSs in 2013 did WONDERS for web design */
		flex-wrap:			wrap; /* Sets the flex's contents to wrap around into new lines when there's too many elements for its set width/height (50vh, in this case( */
		gap:				5px; /* 5px gap between flex elements */
		flex-direction:			column; /* default flex direction is to make shit go in horizontal rows left to right; this makes it into columns */
		text-align:			center; /* Centers text in all elements inside the flex */
		margin:				10px 5px; /* 10px margin on top and bottom, 5px margin on left and right. Shorthand for margin (if you only say two numbers) is VERTICALMARGIN HORIZONTALMARGIN */
		align-content:			start; /* Elements inside the flex have their contents aligned to the top; idk how to explain this but it helps align the desktop icons */
	}

	.shortcut { /* Each individual desktop icon */
		width:				8ch; /* The 8 characters width I mentioned earlier! */
		height:				calc(36px + 2.5em); /* Each shortcut is 36px plus 2.5 character heights tall */
		text-decoration:		none; /* No underline on links */
		display:			flex; /* Each shortcut itself is a flex */
		flex-direction:			column; /* Each shortcut's flex items stack vertically */
		color:				white; /* Text color is white */
	}

	.shortcut:where(:active, :focus, :hover) { /* Styling for when it's clicked (:active), keyboard focused (:focus) or hovered w the mouse (:hover) */
		width:				calc(8ch - 2px); /* takes 2px away from the width to account for the extra width from the borders */
		height:				calc(36px + 2.5em - 2px); /* same but for the height */
		border:				1px dashed var(--bg); /* sets a lil border so it's clear when you're hovering an item */
	}

	.shortcut img { /* in css if you do "selector1 selector2" with a space inbetween it applies to selector2 elements that are inside a selector1; in this case, images inside elements with class="shortcut" */
		width:				32px; /* 32px by 32px */
		height:				32px;
		image-rendering:		pixelated; /* Makes it so that it's not blurry even if you zoom the browser in or out; good for pixelart */
		margin:				0 auto; /* no vertical margin; centered horizontally */
	}

/* Taskbar */
	.taskbar { /* Container for the taskbar */
		position:			fixed; /* position:fixed places the element in specific screen coordinates regardless of zoom level, scroll level or anything */
		bottom:				0; /* element is at the bottom of the screen */
		left:				0; /* element is right at the left edge of the screen */
		width:				100vw; /* element is as wide as the screen */
		height:				24px;
		background:			var(--bg);
		border-top:			1px solid var(--highlight);
		box-shadow:			inset 0 1px 0 white; /* To finish off the convex look */
		padding:			2px 2px 0; /* 2px padding on top and sides; 0 on bottom */
		display:			flex;
		gap:				2px;
		z-index:			10; /* items with z-index:X display on top of elements with no z-index or lower z-indexes. z-index requires you to gie the element position:fixed, position:relative or position:absolute or your browser ignores it */
	}

	.taskbar a.button { /* in css Selector1Selector2 w no spaces inbetween mean items with selector1 that also have selector2, so in this case links that have class="button" AND that they're inside .taskbar elements */
		text-decoration:		none;
		color:				black;
		font-weight:			bold; /* Makes taskbar button text bold without having to manually define this in the HTML with <b> o <strong> */
	}

	.taskbar .button {
		height:				calc(100% - 8px);
		display:			flex;
		gap:				2px;
	}

	.separator { /* styling for the empty separator divs I mentioned in the html comments */
		width:				0;
		height:				20px;
		border:				1px solid;
		border-color:			transparent white transparent var(--shadow);
		margin:				0 2px;
	}

	.appswitcher { /* The container for taskbar buttons */
		display:			flex;
		flex:				1;
		gap:				2px;
	}

		.appswitcher .button { /* sets width for buttons inside the container; idr why I didn't set this in ".taskbar .button" above */
			width:			150px;
		}

	.notifarea { /* container for the notification area */
		box-shadow:			var(--inshadow);
		width:				fit-content;
		height:				calc(100% - 10px);
		margin-right:			6px;
		padding:			4px;
		display:			flex;
		gap:				2px;
	}

/* Windows */
	.windowscontainer { /* container for windows; the one that uses the right column in <body>'s grid */
		width:				100%;
		height:				100%;
		position:			relative; /* so that when I set windows' position:absolute positions they are constrained by the container's dimensions instead of using the entire screen. This is necessary for reasons I can't really explain with words, it's just the way my brain worked when making this */
	}

	.window {
		position:			absolute; /* position: absolute makes an element be at certain coordinates, but it stays there if you scroll, for instance. if it's inside a position:relative element it's positioned in relation to that one instead of the entire screen */
	}

	.titlebar {
		width:				calc(100% - 5px);
		height:				18px;
		background:			var(--gradient); /* The gradient I defined all the way up there! */
		color:				white;
		padding:			0 2px;
		display:			flex;
		gap:				2px;
	}

		.window.inactive .titlebar { /* I already defined all the styling for .window .titlebar above, so I just need to do the inactive-specific styling here. This is the Cascading part of Cascading StyleSheets y'know? The shit you set higher in the code cascades down so you don't need to be redundant. This applies to titlebars inside elements that have both the "window" and "inactive" classes. I could've applied the .inactive class to individual titlebars instead of windows, but applying it to the windows felt more natural to me */
			background:			var(--gradientinactive); /* So here's the inactive gradient and nothing else, bc all the other styling was done in the previous block */
		}

		.titlebar img {
			width:			16px;
			height:			16px;
			margin-top:		2px;
		}

		.titlebar h1 { /* Styling for titlebar text */
			font:			14px Windows, monospace;
			color:			white;
			font-weight:		normal;
			flex:			1;
			padding:		0;
			margin:			0;
			text-align:		left;
		}

	.titlebarbuttons { /* The titlebars' buttons container */
		display:			flex;
		gap:				2px;
	}

	.titlebar .button {
		width:				calc(16px - 4px - 2px); /* not sure why they're these dimensions in particular, but I remember I did a lot of testing */
		height:				calc(16px - 4px - 2px);
		margin-top:			1px;
		line-height:			0.7;
		font-size:			12px;
		color:				black;
	}

	.content {
		height:				calc(100% - 22px); /* X% lengths mean "X% of the element that contains this one's height/width", so this is the full height of the space .content can take minus 2*10px for the padding minus 2px for the 2px top-margin I define in the following lines */
		width:				calc(100% - 23px); /* Same here, except one extra px to account for .window's padding */
		max-height:			calc(100% - 31px); /* Height can't go above the .window's full height minus 31px, to account for what I said above AND the titlebar */
		margin-top:			2px;
		padding:			5px 10px;
		background:			var(--bg); /* no background, just the window's color */
		border:				1px solid;
		border-color:		var(--inborder);
		box-shadow:			var(--inshadow);
		overflow:			scroll; /* Anything in this element's contents that goes beyond the height-width we set will add a scrollbar instead of jutting out of the box or, like, being lost */
	}

/* Index */ /* Styling specific to index.html; I could've placed this in index.html's <style> element but I was lazy and this way all the CSS is centralized */
	.window.welcome { /* The bienvenidos window */
		width:			60ch; /* According to accessibility guidelines, text shouldn't be over 80 characters wide to remain easy to read. 80 was too wide here, so I made it a bit smaller */
		height:			fit-content; /* The window is as tall as its containing elements, that is: the titlebar and .content */
		top:			40%; /* all .window elements have position:absolute, so this says it's 40% of the screen's height away from the top */
		left:			25%; /* same but for the left */
		transform:		translate(-50%, -50%); /* makes the window centered in the coords we just set instead of having its top left corner there */
		z-index:		1; /* makes this window display above the other windows in the page */
	}

	.window.aboutme {
		width:			40ch; /* thinner than .window.welcome */
		height:			fit-content;
		top:			50%;
		left:			calc(25% + 50ch - 1ch); /* 30% (same as .window.welcome) minus a little so they overlap */
		transform:		translate(-50%, -50%);
	}

	.window.stream {
		width:			320px; /* the twitch embed is this size so *shrugs* */
		height:			fit-content;
		top:			70%;
		left:			20%;
		transform:		translate(-50%, -50%);
	}

	.window.webring {
		width:			fit-content;
		height:			fit-content;
		bottom:			calc(30px + 10px); /* i think the 30px here are supposed to be the taskbar? */
		right:			10px;
	}

		#vtubers-on-neocities { /* fixing the webring widget's shit, this entire section is hacky as SHIT and I won't comment it much bc like, it's messy but that's just how it is when fixing someone else's code w/o being able to change it */
			margin:		0 !important; /* rules with !important override anything defined below them or in other files; it's bad practice, but I was fixing their CSS so it was necessary */
			padding:	1px !important;
		}

		#vtubers-on-neocities :where(table, tr, td) {
			overflow:	hidden !important; /* the widget doesn't have a .content element, so its table kinda passes for one. overflow:hidden so it doesn't have scrollbars */
		}

		.webring-prev, .webring-next, .webring-info a { /* turns the widget's links into w98-like buttons */
			background:	var(--bg) !important;
			border:		1px solid !important;
			border-color:	var(--outborder) !important;
			box-shadow:	var(--outshadow) !important;
			padding:	2px !important;
		}

		.webring-prev:where(:hover, :focus), .webring-next:where(:hover, :focus), .webring-info a:where(:hover, :focus) { /* Styles the buttons on hover or focus */
			border-color:	var(--inborder) !important;
			box-shadow:	var(--inshadow) !important;
		}

		:where(.webring-next, .webring-prev, .webring-info) a { /* maxes links text fit the font and be black instead of orange */
			font:		14px Windows, monospace !important;
			color:		black !important;
		}

		:where(.webring-next, .webring-prev, .webring-info) a:where(:hover, :focus) { /* THEY FUCKING DID THE LINKS' UNDERLINES WITH BORDER-BOTTOM INSTEAD OF ACTUAL UNDERLINES WHAT THE FUCK */
			border:		none !important;
		}

		.webring-info a {
			height:		100%;
			display:	inline-block; /* I don't fully get how inline-block works but it made the buttons display properly */
		}

		.webring-info span { /* they had | characters without fucking css elements as separators so I made them transparent and tiny bc I couldn't just make them not render */
			color:		transparent;
			font-size:	3px !important;
		}

		.webring table { /* removes the background for the entire widget */
			background:	none !important;
		}

		.webring tr:first-child td { /* makes the widget's logo have w98 styling and applies the same background they had for the entire widget to, like, it exclusively */
			border: 1px solid !important;
			border-color: var(--inborder) !important;
			box-shadow: var(--inshadow) !important;
			background: linear-gradient(#0005, #0005), radial-gradient( ellipse at 22% 31%, rgb(65, 53, 98), transparent 55%), radial-gradient( ellipse at 97% 87%, rgb(81, 82, 132), transparent 55%), radial-gradient( ellipse at 61% 12%, rgb(209, 61, 58), transparent 45%), radial-gradient( ellipse at 53% 57%, rgb(180, 65, 113), transparent 55%), radial-gradient( ellipse at 17% 79%, rgb(219, 187, 77), transparent 55%), rgb(0, 0, 0)
		}

/* Portfolio */ /* Code for stuff that's only in portfolio.html */
	.window.portfolio {
		width:				95%; /* Main window is 80% as wide as .windowscontainer */
		height:				90%; /* Main window is 80% as tall as .windowscontainer */
		top:				48%; /* centered */
		left:				50%; /* centered */
		transform:			translate(-50%, -50%); /* centered */
	}

	.content.portfolio {
		width:				calc(100% - 22px); /* idk why I set this here, like, it's already there for .content above what */
		height:				90vh;
		background:			var(--bg); /* no background, just the window's color */
		border:				none; /* no border */
		box-shadow:			unset; /* no shadow; idk why I used "unset" instead of "none" ("unset" essentially means "default", and "none" means "none") */
		display: 			grid;
    	grid-template-columns: repeat(4, minmax(0, 1fr));
    	gap: 				12px;
    	padding: 			10px;
	}

	.portfolioitem {
		border:				1px solid;
		border-color:		var(--shadow) white white var(--shadow);
		box-shadow:
						inset -1px -1px 0 var(--shadow),
						inset 1px 1px 0 white;
		padding:				5px 10px;
		margin-bottom:			8px;
		display: block;
    	margin-bottom: 5px;
    	width: 100%;
	}

	.portfolioitem h2 {
		margin:				auto; /* because of Reasons I think this was necessary? the text-align:center from above seems to have died */
	}

	.portfolioitem .imagescontainer {
		display:			grid;
		grid-template-rows:       auto auto;
		grid-template-columns:		auto auto; /* each column is as wide as its contents p much */
		gap:				2px;
		border:				1px solid;
		border-color:		var(--inborder);
		box-shadow:			var(--inshadow);
		padding:			2px;
		position:			relative;
		overflow:     scroll;
	}

	.imagescontainer a {
		height:				auto auto; /* makes the link as tall as its container; I explain this in line 394 */
		margin:				0; /* makes them fill the entire space */
	}

	.imagescontainer img {
		width:			100%;
		height:			auto auto;
		display:			block; /* images are inline by default, and I needed them to behave like regular block items; my brain is being slow atm I swear the comments will get better soon */
	}

	.portfoliotext {
		padding:			5px 10px;
		background:			white;
		border:				1px solid;
		border-color:			var(--inborder);
		box-shadow:			var(--inshadow);
		overflow:			scroll;
	}
		.portfoliotext p:first-child { /* first <p> element inside .portfoliotext */
			margin-top:		0; /* makes it not have a top margin, mostly to make the text container look neater and not as big */
		}
		.portfoliotext p:last-child { /* last <p> element inside .portfoliotext */
			margin-bottom:		5px;
		}

	.portfolioitem .button {
		margin:				2px 0 2px auto;
		grid-column:			1/3;
		justify-self:			flex-end; /* aligns the button to the right */
		color:				black;
	}

/* Fanart */
	.window.fanart { /* same dimensions as the .portfolio window actually */
		width:				80%;
		height:				80%;
		top:				50%;
		left:				50%;
		transform:			translate(-50%, -50%);
	}

	.content.fanart { /* container for all the fanart items */
		display:			grid;
		grid-template-columns:		1fr 1fr 1fr 1fr 1fr 1fr; /* 6 equally sized columns */
		grid-gap:			2px;
		background:			var(--bg);
		border:				1px solid;
		border-color:			var(--shadow) white white var(--shadow);
		box-shadow:
						inset -1px -1px 0 var(--shadow),
						inset 1px 1px 0 white;
	}

	.content.fanart img { /* images inside the fanart content element */
		width:				100%; /* as wide as their column */
		margin:				auto; /* centered */
	}

	.content.fanart a {
		margin:				auto; /* centered (why is this necessary? idr) */
		text-decoration:		none; /* no underline */
		color:				black; /* makes the link text black instead of the default blue/purple */
	}

	.fanartcredit a:last-child { /* specifically the link inside the fanart credit I have NO IDEA why I defined it like this */
		text-decoration:		underline dashed;
		color:				blue;
	}

	article.fanart { /* each fanart item */
		height:				calc(100% - 6px); /* idk what those -6px are for */
		border:				1px solid;
		border-color:			var(--inborder);
		box-shadow:			var(--inshadow);
		padding:			2px;
		position:			relative;
		display:			flex;
		flex-direction:			column;
	}

	.fanartcredit { /* the fanart credit thingy */
		width:				calc(100% - 3px);
		background:			var(--bg);
		opacity:			0; /* fully transparent by default */
		border-top:			1px solid;
		border-color:			white;
		box-shadow:			0 -1px 0 0 var(--shadow);
		position:			absolute;
		transition:			.2s ease all; /* makes all animations based on :hover or whatever take 0.2s and ease in/out instead of being fully linear */
		bottom:				0;
	}

	.fanart article:where(:hover, :focus) .fanartcredit { /* fanartcredit when you're hovering the containing element */
		display:			block; /* forgot to delete this line; ignore */
		opacity:			1; /* makes it 100% opaque when you hover its corresponding fanart */
	}

/* Error */ /* stuff exclusive to not_found.html */
	.window.error { /* the 404 error window */
		width:				40ch;
		top:				50%;
		left:				50%;
		transform:			translate(-50%, -50%);
	}

	.content.error {
		background:			var(--error-bg);
		text-align:			center;
		border:				none;
		box-shadow:			none;
		display:			grid;
		grid-template-columns:		auto 1fr;
		gap:				4px;
		overflow:			hidden;
	}

	.content.error :where(.button, h2, p) {
		grid-column:			2;
		margin:				0;
	}

	.content.error img {
		grid-column:			1;
		grid-row:			1/3;
		margin:				auto;
	}

	.content.error .button {
		width:				fit-content;
		margin:				auto;
	}

/* Accessibility */
	.skipnav { /* the thingy to skip the navigation. this doesn't need to be visible by default bc it's for screenreaders and keyboard browsers (press tab instantly after the page loads to check it */
		position:			absolute;
		left:				0;
		top:				-3em; /* -3 character heights from the top of the screen, so it's ofscreen and not visible by default */
		border:				var(--outborder);
		box-shadow:			var(--outshadow);
		background:			var(--bg);
		transition:			ease-out .3s top; /* eases-out changes in the "top" parameter */
		z-index:			100; /* displays on top of everything no matter what */
	}
		.skipnav:focus {
			top:			0px; /* on focus with tab or screenreader, make it stick to the top of the screen. Since its original "top" was offscreen, this makes it slide onscreen all nicely */
		}

/* Theme Credit */
	.themecredit {
		width:				16px;
		height:				16px;
		background:			url(../img/taskbaricons/lensdeer.png); /* idk why I did it like this instead of an <img> element */
		text-decoration:		none;
		color:				black;
	}

	.themeinfobox {
		width:				30ch;
		height:				4rem;
		display:			none; /* Invisible by default */
		background:			#ffffe1;
		border-radius:			5px;
		border:				1px solid black;
		padding:			1em 1ch;
	}

	.themeinfobox .infoline {
		font-weight:			bold;
		display:			flex;
		gap:				4px;
	}
		.infoline img {
			width:			16px;
			height:			16px;
		}

		.infoline span {
			flex:			1;
		}

		.themeinfobox::after { /* ::after appends something after an element's content but still inside it. Here I'm using it to make the lil triangle coming out of the info bubble */
			content:		"";
			position:		absolute;
			display:		block;
			bottom:			-19px; /* it's gonna be a 20px by 20px square, so this makes it fall outside the bubble but still overlap by 1px */
			right:			32px; /* 32px from the right, which is roughly the width of the clock */
			border:			10px solid; /* border is 10px wide */
			border-color:		#ffffe1 #ffffe1 transparent transparent; /* ok so here's the fun part. to get it to be a triangle using only CSS, I made a 10px thick border that's, like, transparent in the bottom and left, and because of the way css borders are rendered this ends up rendering like a triangle */
			filter:			drop-shadow(0 2px 1px black); /* renders a 1px thick black shadow around this lil triangle to make it look like a continuation of the bubble's border */
		}

	.themecredit:where(:hover, :focus) .themeinfobox {
		display:			block; /* since the default is display:none, this makes it spawn into existence when you hover over my lil deer image */
		position:			fixed; /* position:fixed to make it relative to the whole screen, and the right coords to make it look like a speech bubble coming out of my fursona */
		bottom:				38px;
		right:				16px;
	}

/* Responsive design */ /* @media queries to make the page reflow on smaller screens (mostly phones). these only apply when viewport size goes under the defined sizes */
@media screen and (max-width: 835px) { /* on screens less wide than 835px (that's when some stuff started breaking) */
	.windowscontainer {
		display:			flex; /* makes .windowscontainer into a vertical flex that scrolls when shit goes offscreen */
		flex-direction:			column;
		overflow:			scroll; /* adds scrollbar when shit goes offcreen */
		margin-bottom:			24px; /* to account for the taskbar */
		height: /* I guess I never set this? lmfao just ignore this line */
	}

	.window {
		left:				unset; /* undoes the windows' position and just places them into the now scrollable .windowscontainer */
		top:				unset; /* same */
		transform:			unset !important; /* undoes the centering on the windows that were centered. idk why !important was necessary */
		position:			unset; /* undoes position:absolute */
		margin:				0 auto 10px; /* no top margin, centered horizontally, and a 10px margin between windows */
	}

	body {
		display:			flex; /* turns the entire <body> element into a column flex, this makes the desktop icons render above the windows */
		flex-direction:			column;
	}

	.desktopshortcuts {
		flex-direction:			row; /* makes the desktop shortcuts align in rows instead of columns */
		max-height:			unset; /* the 50vh max-height we had set isn't necessary now; it'll just wrap when elements would start going offscreen */
		margin:				10px auto; /* 10px vertical margin; centered horizontally */
	}

	.taskbar .button {
		width:				fit-content; /* makes taskbar buttons as thin as possible isntead of iirc 150px, so that more can fit in a small screen */
	}
}

@media screen and (max-width: 1000px) { /* on screens smaller than 1000px wide */
	.imagescontainer img { /* portfolio images started breaking at this width, so I made them smaller and made them resize dinamically based on screen width */
		width: 20vw; /* original was 200px, so the proportion stays, except based in width now */
		height: 12vw; /* original was 120px, so the proportion stays */
	}

	.imagescontainer a:where(:hover, :focus) img {
		width: calc(2 * 20vw + 1px); /* adjusts the resizing code to fit the previous block of code */
		height: calc(2 * 12vw + 1px); /* same */
	}

	.portfolioitem h2 { /* ok so the next don't make sense unless you understand css grid and I can't explain it satisfactorily here, just know it makes the portfolio look good on mobile */
		grid-row: 1;
		grid-column: 1/3;
	}

	.portfolioitem .imagescontainer {
		grid-row: 2;
		grid-column: 1/3;
		width: calc(2 * 20vw + 2px);
		margin: 2px auto;
	}

	.portfolioitem .portfoliotext {
		grid-row: 3;
		grid-column: 1/3;
	}
}

@media screen and (max-width: 600px) { /* fanart was looking too small at this size */
	.content.fanart {
		grid-template-columns:		1fr 1fr 1fr; /* 3 columns instead of 6 */
	}
	
	.game {
 width: 600px;
 height: 400px;
 border: 1px solid black;
 position: relative;
}

.paddle {
 width: 10px;
 height: 80px;
 background-color: black;
 position: absolute;
}

#paddle_1 {
 left: 0;
}

#paddle_2 {
 right: 0;
}

.ball {
 width: 10px;
 height: 10px;
 background-color: black;
 position: absolute;
}
	
	
}