/*

STYLEGUIDES:
DARK GREY: 		#818181
DEFAULT GREY: 	#c0c0c0
WHITE: 			#fdffff
BLUE:			#010081
CYAN:			#008080
BLACK:			#000000
PINK:			#ff0081

REF:		https://colorswall.com/palette/102495

*/

html, body {
	margin: 0;
	padding: 0;
	font-family: W95FA, serif;
	font-size: 15px;
}

body {
	background-color: #008080;
	position: absolute;
	height: 100vh;
	width: 100vw;
	overflow: hidden;
}

a {
	color: #0000EEFF;
}

.window {
	position: absolute;
	background-color: #c0c0c0;
	padding: 2px;
}

.window.minimized {
	opacity: 0;
	pointer-events: none;
}

.window.minimized * {
	display: none !important;
}

.window.resizing * {
	user-select: none;
}

.default-border {
	border-top: solid 2px #ffffff;
	border-left: solid 2px #ffffff;
	border-right: solid 2px #808080;
	border-bottom: solid 2px #808080;
	box-shadow:
			-1px 0 0 0 #808080,
			0 -1px 0 0 #808080,
			1px 1px 0 0 #000000,
			0 1px 0 0 #000000;
}

.top-bar {
	padding: 3px;
	max-width: 100%;
}

.window-bar.top-bar {
	display: flex;
	justify-content: space-between;
	cursor: grab;
	z-index: 1001;
}

.window-bar.top-bar.grabbing {
	cursor: grabbing;
}

.top-bar .window-title {
	justify-content: left;
}

.top-bar .window-buttons {
	z-index: 1002;
}

.top-bar .window-title,
.top-bar .window-buttons {
	display: block;
}

.button {
	background-color: #c0c0c0;
	border-top: solid 2px #ffffff;
	border-left: solid 2px #ffffff;
	border-right: solid 2px #808080;
	border-bottom: solid 2px #808080;
	box-shadow:
			-1px 0 0 0 #808080,
			0 -1px 0 0 #808080,
			1px 1px 0 0 #000000,
			0 1px 0 0 #000000;

	cursor: pointer;
}

.dd-divider.button {
	display: inline-block;
	height: 8px;
	cursor: auto;
	margin: 0 8px 0 0;
}

.window-bar {
	/* gradient from #000076 to #1084d0 */
	background: linear-gradient(90deg, #7b7b7b, 50%, #adadad 100%);
	color: white;
}

.active .window-bar {
	/* gradient from #000076 to #1084d0 */
	background: linear-gradient(90deg, #000076, 50%, #1084d0 100%);
	color: white;
}

.dd-bar {
	background-color: #c0c0c0;
	height: 15px;
	border: solid 1px #c0c0c0;
	padding-top: 5px;
	padding-bottom: 5px;
}

.dd-bar .dd-link {
	display: inline-block;
	margin-right: 20px;
	cursor: pointer;
}

.window-content {
	background-color: #fdffff;
	padding: 5px;
	bottom: 27px;
	position: absolute;
	top: 50px;
	left: 2px;
	right: 2px;
	overflow: hidden;
}

.window-bar .window-buttons .button {
	color: black;
	display: inline-block;
	height: 11px;
	width: 11px;
	z-index: 1001 !important;
}

.window .bottom-bar {
	background-color: #c0c0c0;
	height: 15px;
	border: solid 1px #c0c0c0;
	padding-top: 5px;
	padding-bottom: 3px;
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	overflow: hidden;
}

.window .resize-anchor {
	position: absolute;

	&.tr,
	&.br,
	&.bl,
	&.tl {
		width: 10px;
		height: 10px;
		z-index: 100000;
	}

	&.tr {
		right: -5px;
		top: -5px;
		cursor: ne-resize;
	}

	&.br {
		right: -5px;
		bottom: -5px;
		cursor: nw-resize;
	}

	&.bl {
		bottom: -5px;
		left: -5px;
		cursor: ne-resize;
	}

	&.tl {
		top: -5px;
		left: -5px;
		cursor: nw-resize;
	}

	&.t,
	&.b {
		width: 100%;
		height: 6px;
		cursor: n-resize;
	}

	&.t {
		top: -5px;
	}

	&.b {
		bottom: -5px;
	}

	&.l,
	&.r {
		width: 6px;
		height: 100%;
		cursor: e-resize;
	}

	&.l {
		top: 0;
		left: -5px;
	}

	&.r {
		top: 0;
		right: -5px;
	}
}

#taskbar {
	height: 40px;
	position: absolute;
	padding: 2px;
	bottom: 0;
	width: 100%;
	background-color: #c0c0c0;
	border-top: solid 2px #ffffff;
	display: flex;
}

#taskbar #start {
	cursor: pointer;
	font-size: 18px;
	padding: 10px 15px 10px 15px;
}

#taskbar .task {
	margin-left: 15px;
	cursor: pointer;
	padding: 10px 15px 10px 15px;
	display: inline-block;
}

.prevent-select {
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none; /* Standard syntax */
}

#background-overlay {
	position: absolute;
	background-image: none;
	background-repeat: no-repeat;
	background-size: 150px;
	background-position: center;
	height: 100%;
	width: 100%;
}

.silly-mode #background-overlay {
	background-image: url("../assets/images/pepe-dance-pepe-break.gif");
}

#taskbar #start img{
	height: 14px;
	transform: scale(3) translateX(-2px);
	pointer-events: none;
}

#taskbar .icons {
	position: absolute;
	right: 6px;
}

#taskbar .icons img {
	height: 33px;
	pointer-events: none;
}

#taskbar .task.active {
	border-bottom: solid 2px #ffffff;
	border-right: solid 2px #ffffff;
	border-left: solid 2px #808080;
	border-top: solid 2px #808080;
	box-shadow:
			1px 0 0 0 #808080,
			0 1px 0 0 #808080,
			-1px -1px 0 0 #000000,
			0 -1px 0 0 #000000;
}

#audio-tooltip {
	position: fixed;
	bottom: 230px;
	right: -30px;
	font-size: 25px;
	transform: rotate(45deg);
	color: white;
	filter: drop-shadow(2px 2px 1px #ff0081);
	pointer-events: none;
	cursor: auto;
	transition: opacity 2s ease;
}

#audio-tooltip.hidden {
	opacity: 0;
	transition: opacity 2s ease;
}

.credits {
	text-align: center;
	width: 100%;
}

.window-content img {
	position: absolute;
	bottom: 2px;
	right: 2px;
	max-height: 200px;
}