@import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Arapey:ital@0;1&display=swap');
@import url('spanner.css');
@font-face { font-family: Acknowledgement; src: url('/Media/Acknowledgement.woff') format('woff'); font-weight: normal; font-style: normal; }
@font-face { font-family: Copperplate; src: url('/Media/Copperplate.woff') format('woff'); font-weight: normal; font-style: normal; }
:root { --cursoridle: url("/Media/Clicker.svg") 0 0, auto; --diamondtile: conic-gradient(from 45deg, var(--primary) 25%, var(--secondary) 25% 50%, var(--primary) 50% 75%, var(--secondary) 75%); --diagonalstripe: repeating-linear-gradient(45deg, var(--primary), var(--primary) 100px, var(--secondaryfull) 100px, var(--secondaryfull) 200px); --iridescent: 0; }
:root[data-theme="day"] { --highlight: #ffd700ff; --primary: #fff7ccff; --secondary: #ffef9980; --secondaryfull: #ffef99ff; --tertiary: #998000ff; --backgroundimage: url("/Media/BGDay.png"); }
:root[data-theme="night"] { --highlight: #0080ffff; --primary: #0067ccff; --secondary: #004d9980; --secondaryfull: #004d99ff; --tertiary: #99ccffff; --backgroundimage: url("/Media/BGNight.png"); }
:root[data-theme="day"]:is([data-magic="1"]) { --highlight: #ffffffff; --primary: #ccccccff; --secondary: #ffffff80; --secondaryfull: #ffffffff; --tertiary: #808080ff; --backgroundimage: url("/Media/BGDay2.png"); }
[data-theme="day"]:is([data-magic="1"]) * { color: #e5e5e5; }
:root[data-theme="night"]:is([data-magic="1"]) { --highlight: #000000ff; --primary: #333333ff; --secondary: #00000080; --secondaryfull: #000000ff; --tertiary: #808080ff; --backgroundimage: url("/Media/BGNight2.png"); }
:root[data-theme="day"]:is([data-magic="3"], [data-magic="5"], [data-magic="7"], [data-magic="9"]) { --highlight: #ff0000ff; --primary: #ff6666ff; --secondary: #ff999980; --secondaryfull: #ff9999ff; --tertiary: #990000ff; --backgroundimage: url("/Media/BGDay2.png"); }
:root[data-theme="night"]:is([data-magic="3"], [data-magic="5"], [data-magic="7"], [data-magic="9"]) { --highlight: #ff0000ff; --primary: #cc0000ff; --secondary: #99000080; --secondaryfull: #990000ff; --tertiary: #ff9999ff; --backgroundimage: url("/Media/BGNight2.png"); }
:root[data-theme="day"]:is([data-magic="2"], [data-magic="4"], [data-magic="6"], [data-magic="8"]) { --highlight: #0000ffff; --primary: #6666ffff; --secondary: #9999ff80; --secondaryfull: #9999ffff; --tertiary: #000099ff; --backgroundimage: url("/Media/BGDay2.png"); }
:root[data-theme="night"]:is([data-magic="2"], [data-magic="4"], [data-magic="6"], [data-magic="8"]) { --highlight: #0000ffff; --primary: #0000ccff; --secondary: #00009980; --secondaryfull: #000099ff; --tertiary: #9999ffff; --backgroundimage: url("/Media/BGNight2.png"); }
:root[data-theme="day"]:is([data-magic="27"]) { --highlight: #00ffc7ff; --primary: #75f0d4ff; --secondary: #e5fff980; --secondaryfull: #e5fff9ff; --tertiary: #cc0000ff; }
:root[data-theme="night"]:is([data-magic="27"]) { --highlight: #ff007cff; --primary: #850744ff; --secondary: #e51a7c80; --secondaryfull: #e51a7cff; --tertiary: #cc0000ff; }
:root[data-theme="day"]:is([data-magic="40"]) { --highlight: #ff00ffff; --primary: #00ffffff; --secondary: #ffff0080; --secondaryfull: #ffff00ff; --tertiary: #ff00ffff; --backgroundimage: url("/Media/BGDay2.png"); }
[data-theme="day"]:is([data-magic="40"]) * { color: #000000; }
:root[data-theme="night"]:is([data-magic="40"]) { --highlight: #00ff00ff; --primary: #0000ffff; --secondary: #ff000080; --secondaryfull: #ff0000ff; --tertiary: #00ff00ff; --backgroundimage: url("/Media/BGNight2.png"); }
:root[data-theme="day"]:is([data-magic="77"]) { --highlight: #ffd700ff; --primary: #ffef9980; --secondary: #fffbe540; --secondaryfull: #fffbe5ff; --tertiary: #998000ff; --backgroundimage: url("/Media/BGNight3.png"); }
:root[data-theme="night"]:is([data-magic="77"]) { --highlight: #0080ffff; --primary: #004d9980; --secondary: #00336640; --secondaryfull: #003366ff; --tertiary: #99ccffff; --backgroundimage: url("/Media/BGNight3.png"); }
[data-magic="77"] .sectioncontent { background: var(--primary); }
[data-magic="77"] .sectionheader { background: var(--primary); }
[data-magic="77"] .pagecontent { background: var(--secondary); }
@keyframes gifted { 0%, 100% { fill:inherit; color:#fff; transform: rotate(-5deg); } 50% { fill:#ffff99; color: #ffff99; transform: rotate(5deg); } }
@keyframes plus { 0%, 100% { color: #fff; transform: scaleY(1) scaleX(1); } 50% { color: #0f0; transform: scaleY(1.3) scaleX(0.9); } }
@keyframes up { 0%, 100% {fill:inherit;transform:skewX(-10deg) scaleY(1)} 25%,75% {fill:#0f0;transform:scaleY(1.3)} 50% {fill:inherit;transform:skewX(10deg) scaleY(1)} }
@keyframes minus { 0%, 100% { color: #fff; transform: scaleY(1) scaleX(1); } 50% { color: #f00; transform: scaleY(0.6) scaleX(1.1); } }
@keyframes down { 0%, 100% {fill:inherit;transform:skewX(-10deg) scaleY(1)} 25%,75% {fill:#f00;transform:scaleY(0.6)} 50% {fill:inherit;transform:skewX(10deg) scaleY(1)} }
@keyframes flipX { 0% { transform: scaleX(1); } 50% { transform: scaleX(-1); } 100% { transform: scaleX(1); } }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes wobble { 0%, 100% { rotate: -5deg; } 50% { rotate: 5deg; } }
@keyframes hover { 0%, 100% { transform: translateY(-5px); } 50% { transform: translateY(5px); } }
@keyframes link { 0% { color: #ff8080; } 16% { color: #ffff80; } 33% { color: #80ff80; } 50% { color: #80ffff; } 66% { color: #8080ff; } 83% { color: #ff80ff; } 100% { color: #ff8080; } }
@keyframes navigate { 0% { background-color: #ff8080; } 16% { background-color: #ffff80; } 33% { background-color: #80ff80; } 50% { background-color: #80ffff; } 66% { background-color: #8080ff; } 83% { background-color: #ff80ff; } 100% { background-color: #ff8080; } }
@keyframes fadeout { 0% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes spinX { 0% { transform: scaleX(-1); } 50% { transform: scaleX(1); } 100% { transform: scaleX(-1); } }
@keyframes hop { 0% { transform: translateY(0); } 25% { transform: translateY(-70px); } 50% { transform: translateY(0); } 100% { transform: translateY(0); } }
* { cursor: var(--cursoridle); text-decoration: none; box-sizing: border-box; text-align: center; font-family: "Ubuntu", sans-serif; color: #fff; }
html { min-height: 100vh; font-size: 20px; }
html, body { overflow: visible; scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { display: none; }
input::placeholder { color: #fff; opacity: 0.8; }
h1, h2, h3, h4, h5, h6, p, section, main, header, aside, nav, p { all: unset; display: inherit; }
.background { position: fixed; top: 0; left: 0; width: 100%; height: 120vh; z-index: -1; background-image: var(--backgroundimage); background-repeat: no-repeat; background-position: center center; background-size: cover; will-change: background-position; }
.logo { margin: auto; z-index: 99; height: 200px; width: auto; display: inline-block; transform-origin: bottom center; }
:root[data-mobile="yes"] .logo { height: 100px; }
.logo svg, .logo img { width: 100%; height: 100%; }
.bar { background-image: var(--diagonalstripe); background-position: center center; border: 1px solid var(--secondaryfull); position: fixed; z-index: 99; left: 10px; right: 10px; bottom: 10px; height: 120px; border-radius: 99px; padding: 10px; opacity: 0.3; transition: opacity 0.3s ease-in-out; display: flex; flex-direction: row; gap: 10px; }
.bar:hover { opacity: 1; }
:root[data-mobile="yes"] .bar { border: none; border-top: 1px solid var(--secondaryfull); left: 0px; right: 0px; bottom: 0px; height: 100px; border-radius: 0px; opacity: 1; }
.switch { display: inline-block; height: 100px; width: 100px; background-color: var(--tertiary); border: 1px solid var(--secondaryfull); border-radius: 99px; padding: 10px; transition: transform 0.3s ease-in-out; }
.switch:hover { transform: scale(1.1); animation: navigate 3s linear infinite; }
.switch:hover svg { fill: #fff; mix-blend-mode: difference; }
.switch svg { fill: var(--primary); max-width: 100%; max-height: 100%; width: auto; height: auto; }
:root[data-mobile="yes"] .switch { height: 80px; width: 80px; }
:root[data-mobile="yes"] .switch:hover { transform: scale(1); }
:root[data-mobile="yes"] .switch:hover svg { fill: var(--primary); mix-blend-mode: normal !important; }
.switchlabel { position: fixed; pointer-events: none; border-radius: 0; background: #4d4d4d80; transform: translate(-50%, calc(-100% - 10px)) scaleY(0); transition: transform 0.3s ease-in-out; z-index: 99; width: 350px; padding: 10px; }
.bar .switch:hover ~ .switchlabel { transform: translate(-50%, calc(-100% - 10px)) scaleY(1); }
:root[data-mobile="yes"] .switchlabel { display: none !important; }
.icarus { font-family: Acknowledgement, sans-serif; }
.clair { font-family: Arapey, sans-serif; font-style: italic; }
.smaragdus { animation: wobble 2s ease-in-out infinite; color: #ff00ff; }
.zum { font-family: Copperplate, sans-serif; font-style: normal; color: #ff5d5d; }
.pagecontent, .sectioncontent, .emblem, .emblemdetails, .container, .contrast, .bar, .switchlabel { display: flex; justify-content: center; align-items: center; }
.page, .pagegifted { width: 80%; height: 100%; margin: auto; margin-top: 10px; margin-bottom: 140px; position: relative; z-index: 1; }
.page { display: flex; }
.pagegifted { display: none; }
:root[data-mobile="yes"] html, :root[data-mobile="yes"] body { width: 100%; font-size: min(4vw, 20px); margin-left: 0; margin-top: 10px; }
:root[data-mobile="yes"] .textsub { font-size: min(3vw, 15px); }
:root[data-mobile="yes"] .textbig { font-size: min(10vw, 50px); }
:root[data-mobile="yes"] .container > div:first-child > a:only-child { font-size: min(6vw, 30px); }
:root[data-mobile="yes"] .page, :root[data-mobile="yes"] .pagegifted { width: 100%; margin-bottom: 100px; margin-left: 0; margin-right: 0; margin-top: 10px; }
.pagecontent { width: 100%; background-image: var(--diamondtile); background-position: center center; background-size: 150px 150px; border-radius: 30px; border: 1px var(--primary) solid; padding: 10px; position: relative; flex-direction: column; backdrop-filter: blur(5px) brightness(1.1); gap: 10px; }
:root[data-mobile="yes"] .pagecontent { border-radius: 0; border: none; padding: 0px; }
.sectionheader { width: 100%; border-radius: 20px; background-color: var(--secondaryfull); border: 1px solid var(--secondaryfull); padding: 10px; align-items: center; }
:root[data-mobile="yes"] .sectionheader { width: 100%; border-radius: 0px; border: none; border-bottom: 1px solid var(--secondaryfull); }
.sectioncontent { background-image: var(--diagonalstripe); background-position: center center; border-radius: 0 0 20px 20px; border: 1px solid var(--secondaryfull); border-top: none; margin-top: -10px; padding: 10px; width: 90%; flex-direction: column; gap: 10px; }
:root[data-mobile="yes"] .sectioncontent { flex-direction: column-reverse !important; justify-content: center; align-items: center !important; width: 95%; }
.sectionheader > .textbig { background-color: var(--tertiary); border-radius: 1em; padding: 0.1em 0.6em 0.1em 0.6em; margin-bottom: 5px; margin-left: auto; margin-right: auto; width: max-content; }
.sectionheader > .textbig:has(> a:only-child) { padding: 0.1em 0.1em 0.1em 0.1em; }
.textbig { font-weight: bold; font-size: 40px; }
.textsub { font-size: 15px; color: #ffffff80; font-style: italic; }
.emblem { height: 350px; width: 350px; position: relative; flex: 0 0 auto; }
:root[data-mobile="yes"] .emblem { width: 100%; aspect-ratio: 1 / 1; }
.container, .contrast { display: inline-block; width: 100%; border: 1px solid var(--secondaryfull); padding: 10px; border-radius: 10px; gap: 10px; }
.contrast { border-radius: 0; background: #4d4d4d80; border: none; }
.emblem ~ .container { max-width: 350px; }
:root[data-mobile="yes"] .sectioncontent > div:has(.emblem) { width: 100%; max-width: none !important; }
:root[data-mobile="yes"] .sectioncontent > div:has(> a > .container) { flex-direction: column; }
:root[data-mobile="yes"] .sectioncontent > div > .container > .contrast:has(> div:first-child > a), :root[data-mobile="yes"] .sectioncontent > div > div > .container > .contrast:has(> div:first-child > a), :root[data-mobile="yes"] .sectioncontent > div:has(> div > .container > .contrast > div:first-child > a) { flex-direction: column !important; }
.contrast > .textsub { margin-bottom: 5px; }
.sectioncontent a .container { transition: transform 0.3s ease-in-out; }
.sectioncontent a:hover .container { transform: scale(1.1); animation: navigate 3s linear infinite; }
.textsub > a { opacity: 0.5; transition: opacity 0.3s ease-in-out; }
.textsub > a:hover { opacity: 1; }
a > span { display: inline-block; transition: transform 0.3s ease-in-out; mix-blend-mode: difference; }
a:hover > span { transform: scale(1.3); mix-blend-mode: normal; animation: link 3s linear infinite; }
a:has(> span:only-child) { display: inline-block; background-position: 0.2em center, center, center, center; background-size: auto 1em, auto 100%, auto, auto; background-repeat: no-repeat; border-radius: 1em; padding: 0.05em 0.3em 0.05em 1.3em; }
[data-magic="77"] .sectioncontent { background: var(--primary); }
[data-magic="77"] .sectionheader { background: var(--primary); }
[data-magic="77"] .pagecontent { background: var(--secondary); }
:root[data-mobile="yes"] div[style*="z-index: 98;"] > .container > .contrast > div[style*="margin-top: 10px;"] {
  flex-direction: column; font-size:min(3.5vw, 17.5px);
}