:root { --ScreenBorderPadding: 4px; --ContentPadding: 8px; } Body { Margin: 0; Box-Sizing: Border-Box; Width: 100%; Max-Width: 100%; Position: Absolute; Left: Auto; Right: Auto; Color: #04040c; 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; } ul { Padding-Left: 16px; Padding-Right: 4px; } #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); -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } #RightBox, #RightBoxContainer { Float: Right; Padding: var(--ContentPadding); -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } #MainBox { Margin: Auto; Position: Absolute; Z-Index: -1; Left: 0; Right: 0; Width: 80%; Padding-Top: calc(var(--ContentPadding) + 24px); Padding-Bottom: calc(var(--ContentPadding) + 64px); } #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; } #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); -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } #LeftBoxCheck, #RightBoxCheck, #BottomBoxCheck { Position: Fixed; Opacity: 0; } :Checked ~ .ToggleBox { Display: None; Visibility: Hidden; } /* 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%); } }