@import "woff.css";

body {
	margin: 0;
	font: caption;
	font-size: 16px;
	background-size: max(100vw, 150vh);
	background-position: center top;
	overflow: hidden;
}

h1 {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100vw;
	height: 100vh;
	font-family: "Fira Code", "Inter";
	font-size: min(75px, 8.2vw);
	line-height: min(75px, 8.2vw);
	white-space: nowrap;
	text-transform: uppercase;
	text-align: center;
	opacity: 0.9;
	user-select: none;
}

.portfolio-item {
	position: absolute;
	width: 250px;
	height: 200px;
	background-image: url("../textures/paper.png"), url("../textures/rip.svg");
	background-position: bottom right;
	background-size: auto;
	border-top-left-radius: 4px 8px;
	border-top-right-radius: 4px 8px;
	text-align: center;
	filter: drop-shadow(0px 10px 5px hsla(0, 0%, 0%, 0.75) );
	cursor: grab;
}

.portfolio-item.grabbing {
	filter: drop-shadow(0px 10px 10px hsla(0, 0%, 0%, 0.75) );
	cursor: grabbing;
}

.portfolio-item .titlebar {
	min-height: 1em;
	line-height: 1em;
	padding: 0.5em;
	border-radius: 6px;
	background-position: center;
	font-family: "AquaBase";
	font-weight: bold;
	user-select: none;
}

.portfolio-item .content {
	line-height: 1.25em;
	font-family: "Handlee";
	color: hsl(42, 60%, 5%);
	height: 132px;
	background-position: bottom;
	background-repeat: no-repeat;
	user-select: none;
}

.portfolio-item .content p {
	margin: 0.5em;
}

.portfolio-item .content ul {
	margin: 0;
	padding: 0;
}

.portfolio-item .content li {
	list-style-type: none;
}

.dropbox {
	position: absolute;
	max-width: 250px;
	max-height: 250px;
	width: min(30vw, 30vh);
	height: min(30vw, 30vh);
	min-width: 120px;
	min-height: 120px;
	border-radius: 8px;
	background-size: cover;
	background-repeat: no-repeat;
	z-index: -1;
	display: flex;
	flex-direction: column;
	user-select: none;
}

.dropbox .iconbox {
	position: absolute;
	width: 100%;
	height: 100%;
	background-size: 60%;
	background-position: center 40%;
	background-repeat: no-repeat;
	font-size: max(18px, 1.5vw);
	opacity: 0.9;
}

.dropbox .textbox {
	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: end;
	justify-content: center;
	font-family: "Inter";
	font-weight: bold;
	font-size: max(18px, 1.5vw);
	line-height: 40px;
	opacity: 0.9;
}

.dropbox .fglayer {
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 1.0;
}

.dropbox-moreinfo {
	background-position: 75%;
}

.dropbox-viewsite {
	background-position: 25%;
}

.dialogbox {
	width: 50vw;
	height: 50vh;
	border: 1px solid gray;
	border-radius: 0.5em;
	box-shadow: 0 2px 6px black;
	padding: 0;
}

.dialogbox .titlebar {
	margin: 0;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	font: caption;
	font-size: 16px;
	font-weight: bold;
	user-select: none;
}

.dialogbox .content {
	padding: 0 1em;
	font-family: "Handlee";
	font-size: max(1.6vw, 20px);
	line-height: 1.25em;
	height: calc(50vh - 40px);
	overflow: auto;
}

.dialogbox .closebutton {
	position: absolute;
	right: 8px;
	top: 2px;
	outline: none;
	margin: 2px;
	border: none;
	padding: 0;
	background-color: transparent;
	font-family: "AquaBase";
	font-size: 24px;
	font-weight: bold;
	opacity: 0.8;
	user-select: none;
}
.dialogbox .closebutton:hover {
	text-shadow: 0 0 1px gray;
	opacity: 1.0;
}
.dialogbox .closebutton:active {
	padding: 1px;
	font-size: 22px;
	text-shadow: 0 0 1px gray;
	opacity: 1.0;
}

@media (prefers-color-scheme: light) {

	body {
		background-color: hsla(38, 33%, 38%, 0.5);
		background-image: url("../textures/wood-light.jpg");
	}

	h1 {
		color: hsla(38, 33%, 22.8%, 1);
		text-shadow: 0px 0.025em 0px hsla(38, 33%, 90%, 0.45);
	}

	.dropbox {
		filter: drop-shadow(0 0 25px hsla(38, 33%, 19%, 0.5)) brightness(90%);
		border: 2px solid hsla(38, 33%, 19%, 0.6);
		box-shadow: inset 0 0 min(30vw, 30vh) hsla(38, 33%, 19%, 0.25);
		background-color: hsla(38, 33%, 38%, 0.25);
		background-image: url("../textures/wood-light.jpg");
	}

	.dropbox .iconbox {
		filter: drop-shadow(0 0.065em 0 hsla(38, 33%, 90%, 0.45));
	}

	.dropbox .textbox {
		color: hsla(38, 33%, 15%, 1);
		text-shadow: 0 0.05em 0 hsla(38, 33%, 90%, 0.5);
	}

	.dropbox .fglayer {
		background: url("../textures/nailhead-light.png") no-repeat 4% 5% / 10%, url("../textures/nailhead-light.png") no-repeat 95% 4% / 10%, url("../textures/nailhead-light.png") no-repeat 98% 97% / 10%, url("../textures/nailhead-light.png") no-repeat 3% 96% / 10%;
	}

	.portfolio-item .titlebar {
		border-left: 4px solid hsl(42, 50%, 95%);
		border-right: 4px solid hsl(42, 50%, 90%);
		background-image: url("../textures/paper.png"), linear-gradient(hsl(42, 50%, 95%) 0%, hsl(42, 50%, 78%) 25%, hsl(42, 50%, 78%) 75%, hsl(42, 50%, 60%) 100%);
		color: hsl(42, 50%, 25%);
	}

	.dialogbox {
		border-left: 1px solid hsl(42, 50%, 95%);
		border-right: 1px solid hsl(42, 50%, 90%);
		background-image: url("../textures/paper.png"), linear-gradient(hsl(42, 50%, 95%) 0%, hsl(42, 50%, 78%) 25%, hsl(42, 50%, 78%) 75%, hsl(42, 50%, 60%) 100%);
		color: hsl(42, 50%, 20%);
	}

	.dialogbox .titlebar {
		border-left: 1px solid hsl(42, 50%, 95%);
		border-right: 1px solid hsl(42, 50%, 90%);
		background-image: url("../textures/paper.png"), linear-gradient(hsl(42, 50%, 95%) 0%, hsl(42, 50%, 78%) 25%, hsl(42, 50%, 78%) 75%, hsl(42, 50%, 60%) 100%);
		color: hsl(42, 50%, 25%);
	}

}

@media (prefers-color-scheme: dark) {

	body {
		background-color: hsla(36, 32%, 30%, 0.5);
		background-image: url("../textures/wood-dark.jpg");
	}

	h1 {
		color: hsla(36, 32%, 18%, 1);
		text-shadow: 0px 0.025em 0px hsla(36, 32%, 72%, 0.45);
	}

	.dropbox {
		filter: drop-shadow(0 0 25px hsla(36, 32%, 15%, 0.5)) brightness(90%);
		border: 2px solid hsla(36, 32%, 15%, 0.6);
		box-shadow: inset 0 0 min(30vw, 30vh) hsla(36, 32%, 15%, 0.25);
		background-color: hsla(36, 32%, 30%, 0.25);
		background-image: url("../textures/wood-dark.jpg");
	}

	.dropbox .iconbox {
		filter: drop-shadow(0 0.065em 0 hsla(36, 32%, 72%, 0.45));
	}

	.dropbox .textbox {
		color: hsla(38, 33%, 12%, 1);
		text-shadow: 0 0.05em 0 hsla(36, 32%, 72%, 0.5);
	}

	.dropbox .fglayer {
		background: url("../textures/nailhead-dark.png") no-repeat 4% 5% / 10%, url("../textures/nailhead-dark.png") no-repeat 95% 4% / 10%, url("../textures/nailhead-dark.png") no-repeat 98% 97% / 10%, url("../textures/nailhead-dark.png") no-repeat 3% 96% / 10%;
	}

	.portfolio-item .titlebar {
		border-left: 4px solid hsl(42, 30%, 60%);
		border-right: 4px solid hsl(42, 30%, 58%);
		background-image: url("../textures/paper.png"), linear-gradient( hsl(42, 30%, 60%) 0%, hsl(42, 30%, 50%) 25%, hsl(42, 30%, 50%) 75%, hsl(42, 30%, 40%) 100%  );
		color: hsl(42, 50%, 85%);
	}

	.dialogbox {
		border-left: 1px solid hsl(42, 30%, 60%);
		border-right: 1px solid hsl(42, 30%, 58%);
		background-image: url("../textures/paper.png"), linear-gradient( hsl(42, 30%, 60%) 0%, hsl(42, 30%, 50%) 25%, hsl(42, 30%, 50%) 75%, hsl(42, 30%, 40%) 100%  );
		color: hsl(42, 80%, 5%);
	}

	.dialogbox .titlebar {
		border-left: 1px solid hsl(42, 30%, 60%);
		border-right: 1px solid hsl(42, 30%, 58%);
		background-image: url("../textures/paper.png"), linear-gradient( hsl(42, 30%, 60%) 0%, hsl(42, 30%, 50%) 25%, hsl(42, 30%, 50%) 75%, hsl(42, 30%, 40%) 100%  );
		color: hsl(42, 40%, 75%);
	}

}