:root {
	--text: rgb(197, 184, 255);
	--border: #3fa1a8;
	--accent: #936cff;
	--bg: rgba(47, 75, 126, 0.8);
	--gradientBottom: rgba(71, 0, 204, 0.322);
	--gradientTop: rgb(99, 86, 145);
	/* nav link color schemes */
	--nav-bg: linear-gradient(to right, var(--bg), rgb(49, 31, 114) );
	--nav-bg-hover: linear-gradient(to right, var(--bg), rgb(49, 31, 114), var(--gradientTop));
	--nav-bg-active: linear-gradient(to right, rgb(49, 31, 114), var(--accent));
	--nav-text: var(--text);
	--nav-text-active: #ffffff;
	--filter: brightness(0) saturate(100%) invert(80%) sepia(59%) saturate(378%) hue-rotate(125deg) brightness(92%) contrast(92%);
}

html {
	font-size: 75%;
	font-family: 'the';
}

@font-face {
    font-family: 'the';
    src: url('the.woff2') format('woff2'); /* Fallback */
    font-weight: normal;
    font-style: normal;
}

@media (max-width: 768px) {
	#draggable-container {
		max-height: calc(100vh - 10px); /* keep your existing top/bottom padding in mind */
		overflow: auto;                 /* only the box scrolls, not the page */
	}
}

button {
	border-style: none;
	background: none;
	font: inherit;
	pointer-events: all;
}

header {
	background: none;
	overflow: hidden;
}

* {
	box-sizing: border-box;
}

body {
	padding: 10px;
	color: var(--text);

	/* page background pattern */
	background-color: #000000;
	opacity: 0.8;
	background-size: 50px 50px, 50px 50px, 25px 25px, 25px 25px;
	-webkit-touch-callout: none;
	/* iOS Safari */
	-webkit-user-select: none;
	/* Safari */
	-khtml-user-select: none;
	/* Konqueror HTML */
	-moz-user-select: none;
	/* Old versions of Firefox */
	-ms-user-select: none;
	/* Internet Explorer/Edge */
	user-select: none;
	/* Non-prefixed version, currently supported by all modern browsers */
	overflow: hidden;
}


.container {
	width: max(320px, min(880px, calc(100vw - 40px)));
	height: max(220px, min(638px, calc(100vh - 40px)));
	max-width: none;
	margin: 5vw auto 12px auto;
	border: 6px ridge var(--border);
	outline: 3px solid var(--gradientTop);
	outline-offset: 4px;
	border-radius: 10px;
	display: flex;
	flex-wrap: wrap;
	padding: 5px;
	gap: 5px;
	position: relative;
	min-width: 320px;
	min-height: 220px;
	overflow: auto;

	/* container background pattern */
	background-color: #42498467;
	opacity: 100%;
	background-size: 4px 4px;
	background-image: repeating-linear-gradient(45deg, #0a0036 0, #3700ff00 0.4px, #00000000 0, #42498400 50%);
}

.container::-webkit-scrollbar {
	display: none;
}

.container.animate-size-position {
	transition: width 0.25s ease-out, height 0.25s ease-out, left 0.25s ease-out, top 0.25s ease-out;
}

.header-buttons {
    position: absolute;
    top: 10px;          /* move up/down */
    right: 14px;        /* or right: 16px; for the other side */
    display: flex;
	align-items: center;
    gap: 6px;
    z-index: 3;        /* above banner + matrix + title */
}

.body-buttons {
	width: 100%;
	height: 100%;
    position: fixed;   
	margin: 0;
	padding: 0 30px 30px 0;       /* move up/down */ /* or right: 16px; for the other side */
    display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: flex-end;
    gap: 6px;
    z-index: 50;  
	pointer-events: none;      /* above banner + matrix + title */
}

.resize-handle {
	position: fixed;
	width: 14px;
	height: 14px;
	cursor: se-resize;
	background: linear-gradient(135deg, transparent 0, transparent 50%, var(--border) 50%, var(--border) 100%);
	border-radius: 3px 0 0 0;
	opacity: 0;
	z-index: 10000;
}

.some {
	display: flex;
	align-items: center;
}

.resize-handle:hover,
.resize-handle:focus {
	opacity: 1;
}

.resize-indicator {
	position: absolute;
	padding: 2px 6px;
	font-size: 11px;
	background: rgba(0, 0, 0, 0.8);
	color: #fff;
	border-radius: 3px;
	pointer-events: none;
	white-space: nowrap;
	z-index: 9999;
	display: none;
	transform: translateX(15px);
}

.resize-indicator.snap {
	background: var(--accent);
	color: #000;
}

/* these control the column widths */
.small {
	flex: 1 1 9%;
}

section.small {
	min-width: 190px;
}

.large {
	flex: 1 1 82%;
}

.full {
	flex: 1 1 100%;
}

.half {
	flex: 1 1 49%;
}


header {
	background-size: cover;
	background-position: center;
	width: 100%;
	height: 120px;
	/* change banner height here*/
	border: 2px ridge var(--border);
	border-radius: 5px;
	position: relative;
	cursor: move;
	user-select: none;
}

header span {
	font-size: 2.5rem;
	position: absolute;
	bottom: 0;
	left: 10px;
	margin: 10px;
	font-weight: bold;
	text-shadow: 1px 1px var(--text),
		-1px 1px var(--text),
		1px -1px var(--accent),
		-1px -1px var(--accent);
	color: var(--gradientTop);
	z-index: 2;
}


nav {
	border: 2px ridge var(--border);
	border-radius: 5px;
	padding: 5px;
	background: linear-gradient(var(--gradientTop), var(--gradientBottom));
	transition: 0, 2s;
}

nav div {
	text-align: center;
	font-size: 1.25rem;
	margin: 5px 5px 10px 5px;
}

nav a, button {
	display: block;
	margin: 5px;
	background: var(--nav-bg);
	border-radius: 5px;
	padding: 2px 7px;
	text-decoration: none;
	color: var(--nav-text);
	transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
	-webkit-user-drag: none;
	box-shadow: 0 0 0 1px var(--border);
}

a:link {
	color: rgb(78, 220, 255);
}

nav a:link,
nav a:visited {
	color: var(--nav-text);
}

nav a:hover,
nav a:focus-visible, button:hover {
	background: var(--nav-bg-hover);
	color: var(--nav-text-active);
	box-shadow: 0 0 0 1px var(--accent);
}

nav a.nav-link-active,
button:active {
	background: var(--nav-bg-active);
	color: var(--nav-text-active);
	box-shadow: 0 0 0 1px var(--accent);
}

/* optional button styling like in the preview */
div.small>img {
	display: block;
	margin: 5px auto;
	border: 2px ridge var(--border);
	border-radius: 5px;
	transform: translateY(5%) scale(1.15);
}


section {
	border: 2px ridge var(--border);
	border-radius: 5px;
	background: linear-gradient(var(--gradientTop), var(--gradientBottom));
	padding: 5px;
}


footer {
	text-align: center;
	margin-bottom: 5vw;
	font-size: 0.8rem;
}

footer a {
	text-decoration: none;
}


h1,
h2,
h3,
h4,
h5,
h6,
p {
	margin: 5px;
	line-height: 1.2;
}

h1 {
	font-size: 1.4rem;
	letter-spacing: 2px;
	font-weight: normal;
	text-align: center;
	border-bottom: 2px ridge var(--border);
	padding-bottom: 5px;
}

h2 {
	font-size: 1.25rem;
	font-weight: normal;
	text-align: center;
}

h3 {
	font-size: 1.1rem;
}

h4 {
	font-size: 1rem;
	color: var(--accent);
	padding-left: 12px;
}

/* prevents overflow on smaller screens */
img {
	max-width: 100%;
}

pre {
	overflow-x: auto;
}

a:visited {
	color: rgb(78, 119, 255);
	;
}


/* content pages (CSS-only navigation) */
.content-pages {
	position: relative;
	display: flex;
	flex-direction: column;
}

.content-pages .pages {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
}

.content-pages .page {
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
	transform: scale(0.8);
	transition: opacity 0.3s, transform 0.3s;
	overflow-y: auto;
}

.content-pages .page.page-exit {
	transform: scale(0.8);
	opacity: 0;
}

.content-pages .page.page-enter {
	transform: scale(1.2);
	opacity: 0;
	transition: none; /* snap to 120% instantly, then animate to 100% when .active is added */
}

.content-pages .page.page-enter.active {
	transform: scale(1);
	opacity: 1;
	transition: opacity 0.3s, transform 0.3s;
}

/* WebKit / Blink: Chrome, Edge, Safari */
::-webkit-scrollbar {
	width: 8px;              /* scrollbar width */
}


::-webkit-scrollbar-track {
	background: transparent; /* or var(--gradientBottom); */
}

::-webkit-scrollbar-thumb {
	background: var(--accent);
	border-radius: 4px;
	border: 1px solid var(--border); /* optional "ridge" vibe */
}

::-webkit-scrollbar-thumb:hover {
	background: #b98dff; /* lighter accent on hover */
}

.content-pages .page.active {
	opacity: 1;
	pointer-events: auto;
	transform: scale(1);
}

.spacetrail-overlay {
	position: fixed;
	/* detach from flex, stick to viewport */
	inset: 0;
	/* top:0; right:0; bottom:0; left:0; */
	pointer-events: none;
	/* so clicks go through to your app */
	z-index: 9999;
	/* above everything else */
}

.background-overlay {
	position: fixed;
	/* detach from flex, stick to viewport */
	inset: 0;
	/* top:0; right:0; bottom:0; left:0; */
	pointer-events: none;
	/* so clicks go through to your app */
	z-index: 0;
	/* above everything else */
	background-image: url(background.jpg);
	background-size: cover;
	background-position: center;
	opacity: 20%;
	transform: scale(1.1);
}

.finisher-header {
	position: fixed;
	/* detach from flex, stick to viewport */
	inset: 0;
	/* top:0; right:0; bottom:0; left:0; */
	pointer-events: none;
	/* so clicks go through to your app */
	z-index: 0;
	/* above everything else */
}

.boop {
	position: fixed;
	width: 2px;
	height: 2px;
	border: 2px solid #00ffaa;
	margin-top: 0;
	margin-left: 0;
	border-radius: 50%;
	z-index: 50;
	pointer-events: none;
}

.boo {
	position: fixed;
	width: 2px;
	height: 2px;
	border: 2px solid #dd6dff;
	margin-top: 0;
	margin-left: 0;
	border-radius: 50%;
	z-index: 51;
	pointer-events: none;
}

.b00 {
	position: fixed;
	width: 2px;
	height: 2px;
	background-color: #adfffb9a;
	background-size: cover;
	margin-top: 0;
	margin-left: 0;
	border-radius: 50%;
	z-index: 49;
	pointer-events: none;
}

.brah,
.brahh {
	position: fixed;
	pointer-events: none;
}

.spacetrail {
	position: fixed;
	top: 0;
	left: 0;
	pointer-events: none;
	overflow: visible;
	z-index: 99999;
}
.yuuka {
	scale: 90%;
	padding: 0;
	margin: 0;
	border-radius: 10px;
	-webkit-user-drag: none;
}

div.prog h1 {
	font-style: normal;
	border: none;
}

.prog {
	top: 0;
	position: fixed;
	top: 45%;
	left: 50%;
	transform: translate(-50%, -45%);
	z-index: 9999;
	cursor: no-drop;
	border: none;
	font-style: normal;
 }

.cover {
	top: 0%;
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 9998;
	display: flex;
	flex-direction: column-reverse;
	cursor: no-drop;
	transform: translateX(-5%);
 }
 
 .cover2 {
	top: 0%;
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 9997;
	display: flex;
	flex-direction: column-reverse;
	cursor: no-drop;
	transform: translateX(-5%);
 }

.c1 {
	width: 105vw;
	height: 10vh;
	background: #120d29;
	pointer-events: none !important;
	cursor: no-drop;
 }
 
 .c2 {
	width: 105vw;
	height: 10vh;
	background: #00ffaa4f;
	pointer-events: none !important;
	cursor: no-drop;
 }

 #mikaImage {
	width: 100px;
	height: 100px;
	transition: 0.3s;
	transform-style: flat !important;
	border-radius: 50%;
	border-style: dashed;
	z-index: inherit !important;
	pointer-events: auto;
	-webkit-user-drag: none;
}

#mikaImage:hover {
	size: 180px;
	border-radius: 5%;
	transform: scale(1.5);
	cursor: url(grab.cur), auto;
}

#kitasan {
	width: 140px;
	-webkit-user-drag: none;
}

.matrix-container {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
  }
  
  #matrix {
	width: 100%;
	height: 100%;
	opacity: 30%;
	position: relative;
	z-index: 1;
  }

  .header-banner {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 25%;
	z-index: 0;
	pointer-events: none;
	mask-image: linear-gradient(black, transparent);
  }

  .app {
	max-width: 70px;
	max-height: 70px;
	min-height: 70px;
	min-width: 70px;
	aspect-ratio: 1/1;
	margin-bottom: 10px;
	cursor: pointer;
  }
  .appicon {
	max-width: 70px;
	max-height: 70px;
	filter: var(--filter);
	-webkit-user-drag: none;
  }

/* Reusable app windows (Windows-style: drag header, close, resize) */
.app-windows {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 10;
}
.app-windows .app-window {
	pointer-events: auto;
	position: absolute;
	display: flex;
	flex-direction: column;
	min-width: 160px;
	min-height: 120px;
	max-width: 100vw;
	max-height: 100vh;
	background: linear-gradient(var(--gradientTop), var(--gradientBottom));
	border: 2px ridge var(--border);
	border-radius: 6px;
	box-shadow: 0 8px 32px rgba(0,0,0,0.4);
	overflow: hidden;
}
.app-window-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0px 0px 0px 12px;
	background: var(--bg);
	border-bottom: 2px ridge var(--border);
	cursor: move;
	user-select: none;
	flex-shrink: 0;
}
.app-window-title {
	color: var(--text);
	font-size: 1rem;
	font-weight: bold;
}
.app-window-header-buttons {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-left: auto;
}
.app-window-minimize,
.app-window-close {
	width: 30px;
	height: 18px;
	padding: 0;
	border: 1px solid var(--border);
	border-radius: 4px;
	background: rgba(80, 120, 180, 0.9);
	color: #fff;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.app-window-close {
	background: rgba(180, 60, 60, 0.8);
}
.app-window-minimize:hover {
	background: rgba(110, 150, 210, 0.95);
}
.app-window-close:hover {
	background: rgba(220, 80, 80, 0.9);
}
.app-window-content {
	flex: 1;
	overflow: hidden;
	padding: 8px;
	min-height: 0;
	color: var(--text);
}
.app-window-resize {	
	position: absolute;
	right: 0;
	bottom: 0;
	width: 16px;
	height: 16px;
	cursor: nwse-resize;
	background: linear-gradient(135deg, transparent 50%, var(--border) 50%);
	border-radius: 0 0 4px 0;
}
.app-window-resize::after {
	content: "";
	position: absolute;
	right: 2px;
	bottom: 2px;
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--border);
	border-bottom: 2px solid var(--border);
	border-radius: 0 0 2px 0;
}

.appcontainer {
	width: 100%;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	margin: 0;
}

.appdetails {
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: 250px;
	min-width: 200px;
}

/*.appcontainer > * {}*/

#music {
	transform: scale(1);
}

#icon {
	transform: translateX(-6.5px) translateY(-7px) scale(0.6);
}

.notes-area, .notes-area:focus {
	border:none;
	background: none;
	outline: none;
	width: 100%;
	height: 100%;
	color: var(--text);
	resize: none;
	box-sizing: border-box;
}

::placeholder {
color: var(--text);
}

#discord {
	aspect-ratio: 1/1;
	width: 40px;
	filter: var(--filter);
	-webkit-user-drag: none;
}

#steam {
	aspect-ratio: 1/1;
	width: 40px;
	filter: var(--filter);
	-webkit-user-drag: none;
	transform: scale(0.7);
}

#facebook {
	aspect-ratio: 1/1;
	width: 40px;
	filter: var(--filter);
	-webkit-user-drag: none;
	transform: scale(0.7);
}

#musicui {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 100%;
	height: 100%;
}

.music-player {
	font-size: 0.8rem;
	color: var(--text);
	text-shadow: 0 0 3px #000;
}

.music-main {
	display: flex;
	flex-direction: column;
	border: 2px ridge var(--border);
	border-radius: 4px;
	background:
		linear-gradient(180deg, rgba(0, 0, 0, 0.85), rgba(10, 10, 30, 0.95)),
		repeating-linear-gradient(135deg, #111 0, #111 2px, #151530 2px, #151530 4px);
	padding: 6px;
	gap: 6px;
}

.music-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 0.8rem;
	padding: 2px 4px;
	background: linear-gradient(90deg, #0c182b, #243c60);
	border: 1px solid #4aa4ff;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
}

.music-header-left {
	font-weight: bold;
	letter-spacing: 1px;
	color: var(--text);
}

.music-header-right span {
	margin-left: 8px;
	color: #9fffd0;
}

.music-display {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 4px 6px;
	background: #001010;
	border: 1px solid #00e2ff;
	box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.9);
}

.music-track {
	font-size: 0.85rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #9fffd0;
}

.music-time {
	font-family: monospace;
	font-size: 0.8rem;
	color: #8ad5ff;
	margin-top: 2px;
}

.music-progress {
	padding: 2px 0;
}

.music-progress-bar {
	position: relative;
	height: 8px;
	border-radius: 999px;
	background: linear-gradient(90deg, #50505025, #86868621);
	overflow: hidden;
	box-shadow: inset 0 0 4px #00ffea;
	cursor: pointer;
	margin: 0 5px 0 5px;
}

.music-progress-fill {
	position: absolute;
	inset: 0;
	width: 0%;
	background: linear-gradient(90deg, #00ffd5, #00aaff);
	box-shadow: 0 0 6px rgba(0, 255, 213, 0.8);
	transition: width 0.1s linear;
}

.music-controls {
	display: flex;
	align-items: center;
	gap: 4px;
}

.music-btn {
	min-width: 30px;
	height: 22px;
	padding: 0 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 2px;
	border: 1px solid var(--border);
	background: radial-gradient(circle at 30% 20%, #3a4f80, #1a2340);
	color: var(--text);
	font-size: 0.75rem;
	line-height: 1;
	cursor: pointer;
}

.music-btn.primary {
	background: radial-gradient(circle at 30% 20%, #a398ff, #0b87ff);
	color: #021020;
	font-weight: bold;
}

.music-btn.toggle.active {
	background: radial-gradient(circle at 30% 20%, #a398ff, #0b87ff);
	color: #201000;
}

/*.music-btn:hover {
}*/

.music-volume {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 4px;
}

.music-volume-label {
	font-size: 0.7rem;
	color: #b0ffea;
}

.music-volume-bar {
	position: relative;
	width: 70px;
	height: 8px;
	border-radius: 999px;
	background: linear-gradient(90deg, #50505025, #86868621);
	overflow: hidden;
	box-shadow: inset 0 0 4px #0059ff;
	cursor: pointer;
	margin: 0 5px 0 0; 
}

.music-volume-fill {
	position: absolute;
	inset: 0;
	width: 60%;
	background: linear-gradient(90deg, #aa97ff, #74e3ff);
}

.music-eq {
	padding-top: 2px;
}

.music-visualizer {
	display: block;
	width: 100%;
	height: 32px;
	background: linear-gradient(180deg, #030910, #050b18);
	border-radius: 3px;
	border: 1px solid rgba(0, 255, 213, 0.5);
}

/*.music-playing .music-visualizer {
	box-shadow:
}*/

.music-playlist {
	display: flex;
	flex-direction: column;
	border: 2px ridge var(--border);
	border-radius: 4px;
	background:
		linear-gradient(180deg, rgba(4, 8, 18, 0.96), rgba(10, 12, 25, 0.98)),
		repeating-linear-gradient(135deg, #070915 0, #070915 2px, #101325 2px, #101325 4px);
}

.music-playlist-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 3px 6px;
	font-size: 0.8rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	background: linear-gradient(90deg, #141b3a, #232f5a);
}

.music-playlist-header span {
	font-weight: bold;
	color: var(--text);
}

.music-playlist-list {
	list-style: none;
	margin: 0;
	padding: 4px;
	flex: 0 0 auto;
	max-height: 120px;
	min-height:120px;
	overflow-y: auto;
	font-size: 0.8rem;
}

.music-playlist-list::-webkit-scrollbar-thumb {
	background: rgb(43, 50, 82);
	border-radius: 0;
	border: 1px solid var(--border);
}

.music-playlist-item {
	padding: 2px 4px;
	border-radius: 2px;
	cursor: pointer;
	color: var(--text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.music-playlist-item:nth-child(odd) {
	background: rgba(255, 255, 255, 0.02);
}

.music-playlist-item:hover {
	background: rgba(0, 60, 255, 0.2);
	color: #ffffff;
}

.music-playlist-item.active {
	background: rgba(0, 170, 255, 0.55);
	color: white;
}