sitoctt/Assets/Standard.css

:root {
	--ScreenBorderPadding: 4px;
	--ContentPadding: 8px;
}
h1, h2, h3, a, img, summary {
	Transition: 0.3s;
}
::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: #080810;
	Background: #eeddff;
	Font-Size: 13pt;
	Padding: var(--ContentPadding);
	Overflow-Wrap: Break-Word;
}
Div {
	Box-Sizing: Border-Box;
}
Details Div {
	Margin: 8px;
	Padding: 4px;
}
Details Div Details {
	Border: 2px Solid Purple;
	Margin: 8px;
	Padding: 4px;
}

.NoDisplay {
	Display: None;
}
.NoCol {
	Color: Transparent !important;
}
a {
	Color: #d000d0;
}
h1, h2, h3, h4, h5, h6 {
	Color: #503080;
}
ul {
	Padding-Left: 16px;
	Padding-Right: 4px;
}

#MainBox > * > a::before,
#MainBox > * > * > a::before,
#MainBox > * > * > * > a::before,
#MainBox > * > * > * > * > a::before {
	Content: '🔗 ';
}

.NoLinkLink::before,
#StatCounter > a::before,
#RingsDiv > p > a::before {
	Content: '' !important;
}

#MainBox > p > img,
#MainBox > ul > li > p > img {
	Margin-Top: 4px;
	Margin-Bottom: -4px;
}

a:hover:not(h3 > a, .NoABigger),
details > summary:hover {
	Font-Size: 15pt;
}
h1:hover {
	Font-Size: 28pt;
}
h2:hover {
	Font-Size: 21.5pt;
}
h3:hover {
	Font-Size: 17.5pt;
}

.Inline {
	Display: Inline;
}
#Container {
	Max-Width: 100%;
}
#LeftBox, #RightBox {
	Max-Width: 90vw;
	Background: #300030;
	Color: #fafaf0;
}
#LeftBox a, #RightBox a, #BottomBox a {
	Color: #eeddff;
}
#LeftBox ul li, #RightBox ul li {
	List-Style-Type: None;
}
#TopBox {
	Width: 100%;
	Padding: var(--ContentPadding);
}
.HeaderElement {
	Border: 2px Solid Purple;
	Padding: 0px 8px 8px 8px;
}
#TopBox h1, #TopBox h2, #TopBox h3, #TopBox h4, #TopBox h5, #TopBox h6,
#BottomBox h1, #BottomBox h2, #BottomBox h3, #BottomBox h4, #BottomBox h5, #BottomBox h6 {
	Display: Inline;
}
#LeftBox, #LeftBoxContainer {
	Float: Left;
	Padding: var(--ContentPadding);
}
#RightBox, #RightBoxContainer {
	Float: Right;
	Padding: var(--ContentPadding);
}
#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 img {
	Max-Width: 90%;
	Max-Height: 80vh;
}
#MainBox img:hover {
	Max-Width: 100%;
	Max-Height: 90vh;
}
#MainBox > p > img:not(.NoImgCenter),
#MainBox > p > a > img:not(.NoImgCenter) {
	Display: Block;
	Margin-Left: Auto;
	Margin-Right: Auto;
}
#MainBoxTop {
	Color: #505050;
}
#BottomBox {
	Width: 100%;
	Color: #fafaf0;
	Background: rgba(64, 0, 64, 0.6);
	Text-Align: Right;
	Padding: var(--ContentPadding);
	Z-Index: -1;
}
#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;
}
#MainBoxGlobalFooter,
#StatCounter {
	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 */

.BlinkA {
	Animation: BlinkerA 0.25s Step-Start Infinite;
}
@keyframes BlinkerA {
	0% {Position: Absolute; Visibility: Hidden;}
	50% {Position: Static; Visibility: Visible;}
	100% {Position: Absolute; Visibility: Hidden;}
}
.BlinkO {
	Animation: BlinkerO 0.25s Step-Start Infinite;
}
@keyframes BlinkerO {
	0% {Position: Static; Visibility: Visible;}
	50% {Position: Absolute; Visibility: Hidden;}
	100% {Position: Static; Visibility: Visible;}
}

/* Credits: https://codepen.io/jh3y/pen/WNrXqYz */
.WavyText {
	Text-Align: center;
	Position: absolute;
	Left: 50%;
	White-Space: nowrap;
	Transform: translate(-50%, -50%) translate(calc(var(--x, 0) * 1%), calc(var(--y, 0) * 1%));
	font-variation-settings: 'wght' var(--lower);
	Margin: 0;
}
.WavyText Span {
	Color: hsla(300, 100%, 20%, var(--alpha-l));
	Animation: Rise 2.25s infinite ease-in-out;
	Animation-Delay: calc((var(--index) - 6) * 0.225s);
	Display: inline-block;
}
@keyframes Rise {
	50% {
		font-variation-settings: 'wght' var(--upper);
		Color: hsla(300, 100%, 30%, var(--alpha-u));
		Transform: translate(0, -15%);
	}
}