/*--------------------------------------------------------*
 *    Global                                              *
 *--------------------------------------------------------*/

:Root {
	--RectBlur: 4px;

	--WindowMargin: 4px;
	--WindowPadding: 8px;
	--WindowBorderSize: 4px;

	--WindowText: #000000;
	/*--WindowLinks: #0000EE;*/
	--WindowBackground: RGBA(238,224,255,0.90); /* #EEE0FF */

	--TitleBarHeight: 32px;
	--TitleBarText: #FFFFFF;
	--TitleBarBackground: RGBA(42,10,58,0.90); /* #2A0A3A */

	--TaskBarText: #111111;
	--TaskBarLinks: #0000EE;
	--TaskBarBackground: RGBA(204,170,221,0.85); /* #CCAADD */
	--TaskBarHeight: 36px;
}

* {
    Box-Sizing: Border-Box;
}

Body {
	Margin: 0;
	Padding: 0;
	Overflow-Y: Hidden;
	Overflow-Wrap: Break-Word;
}

/*--------------------------------------------------------*/



/*--------------------------------------------------------*
 *    Window Manager                                      *
 *--------------------------------------------------------*/

.Window {
	Position: Absolute;
	Margin: Var(--WindowMargin);
	Border: Solid Var(--WindowBorderSize) Var(--TitleBarBackground);
	Color: Var(--WindowText);
	Background: Var(--WindowBackground);
	Backdrop-Filter: Blur(Var(--RectBlur));
}
.WindowContent {
	Min-Width: Calc(100% + Var(--WindowMargin)*2 + Var(--WindowBorderSize)*2);
	Padding: Calc(Var(--WindowPadding)*2);
	Padding-Top: Var(--WindowPadding);
	Overflow-Y: Auto;
	Margin-Left: Calc(0px - Var(--WindowMargin) - Var(--WindowBorderSize));
	Margin-Top: Var(--WindowBorderSize);
	Color: Var(--WindowText);
	Background: Var(--WindowBackground);
	Backdrop-Filter: Blur(Var(--RectBlur));
	Border: Solid Var(--WindowBorderSize) Var(--TitleBarBackground);
}
.Window:Hover {
	Z-Index: 192 !Important;
}
.Window A, .WindowContent A {
	/*Color: Var(--WindowLinks);*/
}

.TitleBar {
	Padding: Var(--WindowMargin);
	Color: Var(--TitleBarText);
	Background: Var(--TitleBarBackground);
	Backdrop-Filter: Blur(Var(--RectBlur));
	Vertical-Align: Top;
	Max-Height: Var(--TitleBarHeight);
}
.TitleBarContent {
	Text-Align: Center;
}

.TitleBarContent > Span:Nth-Child(1) {
	Float: Left;
}
.TitleBarContent > Span:Nth-Child(3) {
	Float: Right;
}

.TaskBar {
	Width: 100%;
	Color: Var(--TaskBarText);
	Background: Var(--TaskBarBackground);
	Backdrop-Filter: Blur(Var(--RectBlur));
	Position: Fixed;
	Bottom: 0px;
	Padding: Var(--WindowMargin);
	Min-Height: Var(--TaskBarHeight);
	Max-Height: Var(--TaskBarHeight);
	Z-Index: 256;
}
.TaskBar > Details {
	Z-Index: 296;
}
.TaskBar > Details > Div {
	Position: Fixed;
	Left: 0px;
	Bottom: Var(--TaskBarHeight);
	Padding: Calc(Var(--WindowPadding)*2);
	Color: Var(--TaskBarText);
	Background: Var(--TaskBarBackground);
	Backdrop-Filter: Blur(Var(--RectBlur));
	Max-Height: Calc(90vh - Var(--TaskBarHeight));
	Overflow-Y: Scroll;
}
.TaskBarMenu {
	Font-Size: Larger;
}
.TaskBarMenu A {
	Color: Var(--TaskBarLinks) !Important;
}
.MenuButton {
	Display: Inline-Block;
	Height: 100%;
}
.TaskBarRight {
	Position: Absolute;
	Bottom: 0;
	Right: 0;
	Height: Calc(Var(--TaskBarHeight) / 6 * 5); /* Try to vertically center the text lol */
}

/*---   "Shade window" button   --------------------------*/
.CheckToggle {
	Position: Fixed;
	Opacity: 0;
	Visibility: Hidden;
}
.CheckLabel:Before {
	Content: '🔼';
}
:Checked ~ .TitleBarContent > Span > .CheckLabel:Before {
	Content: '🔽';
}
:Checked ~ .ToggleBox {
	Display: None;
	Visibility: Hidden;
}
/****   --------------------------------------------   ****/

/*--------------------------------------------------------*/



/*--------------------------------------------------------*
 *    Mixed fried - Should be ordered                     *
 *--------------------------------------------------------*/

/* No selection */
.NoSelect,
.TitleBarContent,
.TaskBar,
#TitlesWindow {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	User-Select: none;
}

#MainWindow {
	Max-Width: 85vw;
	Max-Height: Calc(90vh - 24px);
	Top: Calc(24px + Var(--TitleBarHeight));
	Right: 12px;
	Z-Index: 20;
}
#MainWindow .WindowContent {
	Max-Height: Calc(90vh - 24px - (Var(--TitleBarHeight) * 2) - Var(--WindowMargin));
}

#TitlesWindow {
	Max-Width: 60vw;
	Max-Height: 60vh;
	Top: Calc(8px + 6vh + (Var(--TitleBarHeight)*2));
	Left: 12px;
	Z-Index: 12;
}
#TitlesWindow .WindowContent {
	Max-Height: Calc(60vh - (Var(--TitleBarHeight) * 2) - Var(--WindowMargin));
}

#FeedWindow {
	Max-Width: 75vw;
	Max-Height: 40vh;
	Top: 8px;
	Left: Calc(8px + 3vw);
	Z-Index: 8;
}
#FeedWindow .WindowContent {
	Max-Height: Calc(40vh - (Var(--TitleBarHeight) * 2) - Var(--WindowMargin));
}

#FeedWindow Ul Li, #TitlesWindow .WindowContent Ul Li, .TaskBarMenu Ul Li {
	List-Style-Type: None !Important;
}
#FeedWindow Ul, #TitlesWindow Ul, .TaskBarMenu Ul {
	Padding-Top: 0px;
	Padding-Left: 8px;
	Padding-Right: 4px;
}

/* Tared for a reasonably-256x32 image */
#CountWindow { 
	/*Max-Width: Calc(256px + 8px);*/
	Max-Height: Calc(32px + 8px + Var(--TitleBarHeight));
	Bottom: Calc(8px + 32px + 8px + Var(--TitleBarHeight) + Var(--TaskBarHeight));
	Left: 8px;
	Z-Index: 4;
}
#CountWindow .WindowContent {
	Padding: 0px;
	Max-Height: Calc(32px + 8px);
	Overflow: Hidden;
	Text-Align: Center;
}
#CountWindow .WindowContent Img {
	Width: 100%;
	/*
	Margin-Left: -4px;
	Margin-Right: -4px;
	*/
}

/* Tared for a 88x31 buttons and everything less tall */
#SlideWindow {
	Max-Width: 50vw;
	Max-Height: Calc(31px + 8px + Var(--TitleBarHeight));
	Bottom: Calc(8px + Var(--TaskBarHeight) + 31px);
	Left: Calc(8px + 2vw);
	Z-Index: 16;
}
#SlideWindow .WindowContent {
	Max-Height: Calc(31px + 8px);
	Padding: 0px;
	Overflow: Hidden;
}

/*--------------------------------------------------------*/