/*
 * o~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~o
 * |  DISEÑO WEB HECHO POR LENSDEER   |
 * |     lensdeer.neocities.org       |
 * |       lensdeer.tumblr.com        |
 * |        Discord: Lens#0292        |
 * |                                  |
 * |       (             )            |
 * |        `--(_   _)--'             |
 * |             Y-Y                  |
 * |            /uu \                 |
 * |           /     \                |
 * |           `--'.  \        ,      |
 * |               |   `._____/)      |
 * |                                  |
 * |Comisiones de diseño web abiertas!|
 * o~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~o
 */
@font-face {
	font-family: 'Windows';
	src: url('../font/windows.ttf') format('truetype');
}

:root {--teal: #008080;
	--bg: #c0c0c0;
	--highlight: #dfdfdf;
	--shadow: #808080;
	/* Variables */
	--gradient: linear-gradient(
		to right,
		#000080,
		#1084d0);
	--gradientinactive: linear-gradient(
		to right,
		#808080,
		#b5b5b5);
	--outborder: white black black white;
	--outshadow:
		inset -1px -1px 0 var(--shadow),
		inset 1px 1px 0 var(--highlight);
	--inborder: black white white black;
	--inshadow:
		inset 1px 1px 0 var(--shadow),
		inset -1px -1px 0 var(--highlight);
	/* Stuff */
	font: 14px Windows, monospace;
}

body {
	position: relative;
	width: 100vw;
	height: 100vh;
	margin: 0;
	background: var(--teal);
	overflow: hidden;
	display: grid;
	grid-template-columns: calc(4 * 8ch) 1fr;
	}

h1, h2, h3, h4, h5, h6 {
	text-align: center;
}

.window,
.button {
	background: var(--bg);
	border: 1px solid;
	border-color: var(--outborder);
	box-shadow: var(--outshadow);
	padding: 2px;
	}

.button {
	text-decoration: none;
	}

.button:is(:active, :focus) {
	border: 1px solid;
	border-color: var(--inborder);
	box-shadow: var(--inshadow);
}

/* Desktop Icons */
	.desktopshortcuts {
		max-height: 50vh;
		display: flex;
		flex-wrap: wrap;
		gap: 5px;
		flex-direction: column;
		text-align: center;
		margin: 10px 5px;
		align-content: start;
	}

	.shortcut {
		width: 8ch;
		height: calc(36px + 2.5em);
		text-decoration: none;
		display: flex;
		flex-direction: column;
		color: white;
	}

	.shortcut:where(:active, :focus, :hover) {
		width: calc(8ch - 2px);
		height: calc(36px + 2.5em - 2px);
		border: 1px dashed var(--bg);
	}

	.shortcut img {
		width: 32px;
		height: 32px;
		image-rendering: pixelated;
		margin: 0 auto;
	}

/* Taskbar */
	.taskbar {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		height: 24px;
		background: var(--bg);
		border-top: 1px solid var(--highlight);
		box-shadow: inset 0 1px 0 white;
		padding: 2px 2px 0;
		display: flex;
		gap: 2px;
		z-index: 10;
	}

	.taskbar a.button {
		text-decoration: none;
		color: black;
		font-weight: bold;
	}

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

	.separator {
		width: 0;
		height: 20px;
		border: 1px solid;
		border-color: transparent white transparent var(--shadow);
		margin: 0 2px;
	}

	.appswitcher {
		display: flex;
		flex: 1;
		gap: 2px;
	}

		.appswitcher .button {
			width: 150px;
		}

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

/* Windows */
	.windowscontainer {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.window {
		position: absolute;
	}

	.window.active {
		z-index: 1;
	}

	.titlebar {
		width: calc(100% - 5px);
		height: 18px;
		color: white;
		padding: 0 2px;
		display: flex;
		gap: 2px;
	}

	.titlebar:hover {
		cursor: grab;
	}

	.titlebar:active {
		cursor: move;
	}

		.window.active .titlebar {
			background: var(--gradient);
		}

		.window.inactive .titlebar {
			background: var(--gradientinactive);
		}

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

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

	.titlebarbuttons {
		display: flex;
		gap: 2px;
	}

	.titlebar .button {
		width: calc(16px - 4px - 2px);
		height: calc(16px - 4px - 2px);
		margin-top: 1px;
		line-height: 0.7;
		font-size: 12px;
		color: black;
	}

	:where(.titlebar, .taskbar) .button:hover {
		cursor: pointer;
	}

	.content {
		height: calc(100% - 22px);
		width: calc(100% - 23px);
		max-height: calc(100% - 31px);
		margin-top: 2px;
		padding: 5px 10px;
		background: white;
		border: 1px solid;
		border-color: var(--inborder);
		box-shadow: var(--inshadow);
		overflow: scroll;
	}

/* Index */
	.window.welcome {
		width: 50ch;
		height: fit-content;
		top: 40%;
		left: 30%;
		transform: translate(-50%, -50%);
		z-index: 1;
	}

	.window.aboutme {
		width: 40ch;
		height: fit-content;
		top: 50%;
		left: calc(30% + 45ch - 1ch);
		transform: translate(-50%, -50%);
	}

	.window.stream {
		width: 320px;
		height: fit-content;
		top: 70%;
		left: 20%;
		transform: translate(-50%, -50%);
	}

	.window.webring {
		width: fit-content;
		height: fit-content;
		bottom: calc(30px + 10px);
		right: 10px;
	}

		#vtubers-on-neocities {
			margin: 0 !important;
			padding: 1px !important;
		}

		#vtubers-on-neocities :where(table, tr, td) {
			overflow: hidden !important;
		}

		.webring-prev, .webring-next, .webring-info a {
			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) {
			border-color: var(--inborder) !important;
			box-shadow: var(--inshadow) !important;
		}

		:where(.webring-next, .webring-prev, .webring-info) a {
			font: 14px Windows, monospace !important;
			color: black !important;
		}

		:where(.webring-next, .webring-prev, .webring-info) a:where(:hover, :focus) {
			border: none !important;
		}

		.webring-info a {
			height: 100%;
			display: inline-block;
		}

		.webring-info span {
				color: transparent;
			font-size: 3px !important;
		}

		.webring table {
			background: none !important;
		}

		.webring tr:first-child td {
			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 */
	.window.portfolio {
		width: 80%;
		height: 80%;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.content.portfolio {
		width: calc(100% - 22px);
		height: 90vh;
		background: var(--bg);
		border: none;
		box-shadow: unset;
	}

	.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: grid;
		grid-template-columns: 1fr 2fr;
		grid-column-gap: 2px;
	}

	.portfolioitem h2 {
		margin: auto;
	}

	.portfolioitem .imagescontainer {
		max-height: calc(2 * 120px + 2px);
		grid-row: 1/3;
		align-self: end;
		display: grid;
		grid-template-columns: auto auto;
		gap: 2px;
		border: 1px solid;
		border-color: var(--inborder);
		box-shadow: var(--inshadow);
		padding: 2px;
		position: relative;
	}

	.imagescontainer a {
		height: 100%;
		margin: 0;
	}

	.imagescontainer img {
		width: 200px;
		height: 120px;
		aspect-ratio: 16/9;
		display: block;
	}

	.imagescontainer a:where(:hover, :focus) img {
		width: calc(2 * 200px + 1px);
		height: calc(2 * 120px + 1px);
		max-width: unset;
		max-height: unset;
		position: absolute;
		pointer-events: none;
	}

		.imagescontainer a:where(:hover, :focus) img.row2 {
			transform: translateY(calc(-50% - 1px));
		}

		.imagescontainer a:where(:hover, :focus) img.col2 {
			transform: translateX(calc(-50% - 1px));
		}

		.imagescontainer a:where(:hover, :focus) img.row2.col2 {
			transform: translate(calc(-50% - 1px), calc(-50% - 1px));
		}

	.portfoliotext {
		padding: 5px 10px;
		background: white;
		border: 1px solid;
		border-color: var(--inborder);
		box-shadow: var(--inshadow);
		overflow: scroll;
	}

		.portfoliotext p:first-child {
			margin-top: 0;
		}

		.portfoliotext p:last-child {
			margin-bottom: 0;
		}

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

/* Fanart */
	.window.fanart {
		width: 80%;
		height: 80%;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.content.fanart {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
		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 {
		width: 100%;
		margin: auto;
	}

	.content.fanart a {
		margin: auto;
		text-decoration: none;
		color: black;
	}

	.fanartcredit a:last-child {
		text-decoration: underline dashed;
		color: blue;
	}

	article.fanart {
		height: calc(100% - 6px);
		border: 1px solid;
		border-color: var(--inborder);
		box-shadow: var(--inshadow);
		padding: 2px;
		position: relative;
		display: flex;
		flex-direction: column;
	}

	.fanartcredit {
		width: calc(100% - 3px);
		background: var(--bg);
		opacity: 0;
		border-top: 1px solid;
		border-color: white;
		box-shadow: 0 -1px 0 0 var(--shadow);
		position: absolute;
		transition: .2s ease all;
		bottom: 0;
	}

	.fanart article:where(:hover, :focus) .fanartcredit {
		display: block;
		opacity: 1;
	}

/* Error */
	.window.error {
		width: 40ch;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.content.error {
		background: var(--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;
		color: black;
	}

/* Accessibility */
	.skipnav {
		position: absolute;
		left: 0;
		top: -3em;
		border: var(--outborder);
		box-shadow: var(--outshadow);
		background: var(--bg);
		transition: ease-out .3s top;
		z-index: 100;
	}

		.skipnav:focus {
			top: 0px;
		}

/* Theme Credit */
	.themecredit {
		width: 16px;
		height: 16px;
		background: url(../img/taskbaricons/lensdeer.png);
		text-decoration: none;
		color: black;
	}

	.themeinfobox {
		width: 30ch;
		height: 4rem;
		display: none;
		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 {
			content: "";
			position: absolute;
			display: block;
			bottom: -19px;
			right: 32px;
			border: 10px solid;
			border-color: #ffffe1 #ffffe1 transparent transparent;
			filter: drop-shadow(0 2px 1px black);
		}

	.themecredit:where(:hover, :focus) .themeinfobox {
		display: block;
		position: fixed;
		bottom: 38px;
		right: 16px;
	}

/* Pong */
	.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;
	}

/* Responsive design */
@media screen and (max-width: 835px) {
	.windowscontainer {
		display: flex;
		flex-direction: column;
		overflow: scroll;
		margin-bottom: 24px;
	}

	.window {
		left: unset;
		top: unset;
		transform: unset !important;
		position: unset;
		margin: 0 auto 10px;
	}

	body {
		display: flex;
		flex-direction: column;
	}

	.desktopshortcuts {
		flex-direction: row;
		max-height: unset;
		margin: 10px auto;
	}

	.taskbar .button {
		width: fit-content;
	}
}

@media screen and (max-width: 1000px) {
	.imagescontainer img {
		width: 20vw;
		height: 12vw;
	}

	.imagescontainer a:where(:hover, :focus) img {
		width: calc(2 * 20vw + 1px);
		height: calc(2 * 12vw + 1px);
	}

	.portfolioitem h2 {
		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) {
	.content.fanart {
		grid-template-columns: 1fr 1fr 1fr;
	}
}