/*--------------------------------------------------------*
 *    Globale                                             *
 *--------------------------------------------------------*/

:Root {
	--ScreenBorderPadding: 4px;
	--ContentPadding: 8px;

	--BodyTextColor: #080810;
}

* {
	Box-Sizing: Border-Box;
}

::Selection {
	Background-Color: RGBA(170, 170, 255, 0.2);
}

Body {
	Margin: 0;
	Box-Sizing: Border-Box;
	Width: 100%;
	Max-Width: 100%;
	Position: Absolute;
	Left: Auto;
	Right: Auto;
	Color: Var(--BodyTextColor);
	Background: #eeddff;
	Font-Size: 13pt;
	Padding: Var(--ContentPadding);
	Overflow-Wrap: Break-Word;
	Font-Variant-Ligatures: None;
}

:Where(
	.staticoso-ContentHeader-CreatedOn,
	.staticoso-ContentHeader-EditedOn
) > .staticoso-Value {
	Font-Weight: Bold;
}
.staticoso-ContentHeader-Index > .staticoso-Value:Before { Content: '('; }
.staticoso-ContentHeader-Index > .staticoso-Value:After { Content: ')'; }

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



/*--------------------------------------------------------*
 *    Fritto Misto - Andrebbe ordinato                    *
 *--------------------------------------------------------*/

Details Div {
	Margin: 8px;
	Padding: 4px;
}
.BorderBox,
.BorderBoxContainer > :Where(Div, Details):Not(.NoBorderBox),
Details Div Details:Not(.NoBorderBox) {
	Border: 2px Solid Purple;
	Margin: 8px;
	Padding: 4px;
}

A { Color: #D000D0; }
:Where(Code, .Code) A { Color: #60D0D0; }

H1, H2, H3, H4, H5, H6 {
	Color: #503080;
}
Ul {
	Padding-Left: 16px;
	Padding-Right: 4px;
}
Table :Where(Td, Th, Tr) {
	Border: 2px Solid Purple;
	Padding: 4px;
}

Blockquote, .Blockquote {
	Margin-Left: 2em;
	Padding-Left: 1em;
	Border-Left: 3px Solid #85588C;
}

.ScrollBox, .ScrollBorderBox {
	Padding: 8px;
}
.Code, Code:Not(.NoCode), Pre Code:Not(.NoCode), Pre.Code, .CodeScroll {
	Color: #FAFAF0;
	Background: #300030;
}
.ScrollBox, .ScrollBorderBox, .CodeScroll {
	Overflow-X: Auto;
}
.ScrollBorderBox, .CodeScroll {
	Border: 2px Solid Purple;
}
Pre.Code, .CodeScroll {
	Padding-Left: 8px;
	Padding-Right: 8px;
	Padding-Top: 8px;
	Padding-Bottom: 16px;
}
Code:Not(Pre Code) {
	Padding: 4px 4px 4px 4px;
}

Video.SmallVideoQuote { Float:Left; }
Video.SmallVideoQuote + Blockquote {
	Display: Inline-Block;
	Margin-Top: 0;
	Margin-Bottom: 0px;
}

#MainBox A:Not(
	.NoLinkLink,
	:Where(.NoLinkLink, .staticoso-SectionLink, #StatCounter, #RingsDiv) A
):Before {
	Content: '🔗 ';
}

Header > P > A > Img {
	Display: Inline !Important;
}

/* Clickable link at the left of every section title */
#SitesList B:Target,
.staticoso-SectionTitle:Target {
	Color: #EEDDFF !Important;
	Background: #700070 !Important;
	Text-Decoration: Underline;
}
.staticoso-SectionLink {
	Position: Absolute;
	Left: -1.5em;
	Opacity: 0.08;
}
.staticoso-SectionLink:Hover {
	Opacity: 0.8;
}
.staticoso-SectionLink > A::Before {
	Content: '🔗';
}
.staticoso-SectionLink > A > Span {
	Font-Size: 0;
}

A:Hover:Not(
	.NoABigger, .NoHoverLight,
	:Where(.NoABigger, .NoHoverLight) A,
	:Where(H3, H4, H5, H6) > A
),
:Where(.YesHoverLight, .YesHoverLight A):Hover {
	Color: #EEDDFF !Important;
	Background: #700070 !Important;
}

.ImgShiftedH, .ImgShiftedH Img {
	Margin-Top: 4px;
	/* Margin-Bottom: -4px; */
}

Details > Summary:hover { Font-Size: 15pt; }

H1:hover { Font-Size: 28pt; }
H2:hover { Font-Size: 21.5pt; }
H3:hover { Font-Size: 17.5pt; }

IFrame {
	Width: 100%;
	Max-Height: 90vh;
}

#Container { Max-Width: 100%; }

#LeftBox, #RightBox {
	Max-Width: 90vw;
	Color: #fafaf0;
	Background: #300030;
}

:Where(#LeftBox, #RightBox, #BottomBox) A { Color: #eeddff; }
:Where(#LeftBox, #RightBox) Ul Li { List-Style-Type: None; }
:Where(#LeftBox, #RightBox) Ul { Padding-Top: 0px; }

#TopBox {
	Width: 100%;
	Padding: Var(--ContentPadding);
}
.HeaderElement {
	Border: 2px Solid Purple;
	Padding: 0px 8px 8px 8px;
}

:Where(#TopBox, #BottomBox) :Where(H1, H2, H3, H4, H5, H6) { Display: Inline; }
#LeftBox, #LeftBoxContainer {
	Float: Left;
	Left: Var(--ContentPadding);
	Padding: Var(--ContentPadding);
}
#RightBox, #RightBoxContainer {
	Float: Right;
	Right: Var(--ContentPadding);
	Padding: Var(--ContentPadding);
}
#LeftBox { Font-Size: Larger; }
#RightBox { Float: Right; }
#RightBoxContainer > Details > Summary { Text-Align: Right; }

#MainBox {
	Margin: Auto;
	Position: Absolute;
	Z-Index: -1;
	Left: 0;
	Right: 0;
	Width: 80%;
	Padding-Top: Calc(Var(--ContentPadding) + 32px);
	Padding-Bottom: Calc(Var(--ContentPadding) + 64px);
}

#MainBox :Where(Img, Video) {
	Max-Width: 90%;
	Max-Height: 80vh;
}
#MainBox :Where(Img, Video):Hover {
	Max-Width: 100%;
	Max-Height: 90vh;
}

.Img36 :Where(Img, Video) { Max-Height: 36vh !important; }
.Img36 :Where(Img, Video):Hover { Max-Height: 64vh !important; }

:Where(Img, Video).Center,
.Center :Where(Img, Video),
#MainBox P Img:Not(.NoImgCenter, .NoImgCenter Img),
#MainBox P Video:Not(.NoImgCenter, .NoImgCenter Video) {
	Display: Block;
	Margin-Left: Auto;
	Margin-Right: Auto;
}
.ImgSidePadding :Where(Img, Video) {
	Padding-Left: 16px;
	Padding-Right: 16px;
}
.Pixelated,
.Pixelated Img {
	Image-Rendering: Pixelated;
	-ms-interpolation-mode: nearest-neighbor;
}

.MediaRow2 { Padding: 0px; }
.MediaRow2:After {
	Content: "";
	Clear: Both;
	Display: Table;
}
.MediaRow2 :Where(Img, Video) {
	Float: Left;
	Width: 50%;
	Padding: 4px;
}

#MainBoxTop, #BuildTimeLine { Color: #505050; }
#BuildTimeLine > Span { Display: Inline-Block; }

#BottomBox {
	Width: 100%;
	Color: #fafaf0;
	Background: RGBA(64, 0, 64, 0.6);
	Text-Align: Right;
	Padding: Var(--ContentPadding);
	Z-Index: -1;
}
#LeftBoxContainer, #RightBoxContainer { Position: Absolute; }
#LeftBoxContainer, #RightBoxContainer, #BottomBoxContainer { Color: #808080; }
#BottomBox, #BottomBoxContainer {
	Box-Sizing: Border-Box;
	Position: Fixed;
	Bottom: 0;
	Left: 0;
	Right: 0;
	Width: 100%;
}
#BottomBoxContainer { Padding: Var(--ScreenBorderPadding); }
#TopBoxLeft {
	Text-Align: Left;
	Display: Inline-Block;
}
#TopBoxRight {
	Text-Align: Right;
	Float: Right;
	Clear: Both;
}

/*
#PrivacyPopup {
	Display: None;
	Visibility: Hidden;
	Position: Fixed;
	Z-Index: 16;
	Color: #fafaf0;
	Background: #300030;
	Max-Width: 60vw;
	Max-Height: 50vh;
	Overflow-Y: Scroll;
	Bottom: 64px;
	Right: Calc(Var(--ContentPadding) * 2);
	Padding: Var(--ContentPadding);
	Padding-Bottom: Calc(Var(--ContentPadding) * 2);
}
*/

#MainBoxGlobalFooter,
#StatCounter,
.Center {
	Text-Align: Center;
}
#MainBoxGlobalFooter span { Vertical-Align: Top; }

#LeftBoxCheck, #LeftBoxLabel {
	Float: Left;
	Left: 0;
	Margin: Var(--ScreenBorderPadding);
}
#RightBoxCheck, #RightBoxLabel {
	Float: Right;
	Right: 0;
	Margin: Var(--ScreenBorderPadding);
}
#BottomBoxCheck, #BottomBoxLabel {
	Float: Left;
	Left: 0;
	Margin: Var(--ScreenBorderPadding);
}
#LeftBoxCheck, #RightBoxCheck, #BottomBoxCheck {
	Position: Fixed;
	Opacity: 0;
}
:Checked ~ .ToggleBox {
	Display: None;
	Visibility: Hidden;
}

/* No selezione */
#LeftBox, #LeftBoxContainer,
#RightBox, #RightBoxContainer, 
#BottomBoxCheck, #BottomBoxLabel {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	User-Select: none;
}

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



/*--------------------------------------------------------*
 *    Gradienti                                           *
 *--------------------------------------------------------*/

.MainIdTextGradientL {
	Background: linear-gradient(to left, #d000d0, #8040d0);
	Color: Transparent;
	-webkit-background-clip: Text;
	Background-Clip: Text;
}
.MainIdTextGradientR {
	Background: linear-gradient(to right, #d000d0, #8040d0);
	Color: Transparent;
	-webkit-background-clip: Text;
	Background-Clip: Text;
}

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



/*--------------------------------------------------------*
 *    Animazioni                                          *
 *--------------------------------------------------------*/

H1, H2, H3, A, Img, Video, Summary {
	Transition: 0.3s;
}

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