/* You can add global styles to this file, and also import other style files */
html { margin: 0; background: #000000; color: #FFF5EE; font-family: 'Quicksand'; font-weight: 300; text-align: center; }

html body { margin: 0; font-size: 1.3rem; line-height: 1.5rem; }

section { display: flex; box-sizing: border-box; }

.autoscale-section, section .autoscale { max-width: calc(min(100%, 40vw)) !important; }

.flex-wrap { flex-wrap: wrap; }

.flex-reverse { flex-direction: row-reverse; }

.centered, .bordered-centered { text-align: center; }

.bordered-base, .bordered, .bordered-centered { margin: 2rem; float: none; }

.centered, .bordered-centered { --alignment: center; --flex-alignment: center; text-align: center; justify-content: center; text-align: var(--alignment); display: block; overflow: hidden; text-overflow: ellipsis; overflow-wrap: break-word; }

.flex1 { flex: 1 1 0px; width: 0; }

.flex2 { flex: 2 1 0px; width: 0; }

.float-right { display: block; float: right; }

.block-image { float: left; }

.float-left { float: left; display: block; }

[alt$="><"] { display: block; max-width: 100%; height: auto; margin: auto; float: none !important; }

@media (max-width: 800px) { section { display: block; } .bordered, .bordered-centered { margin: 1rem; } .flex1 { width: 100%; } .flex2 { width: 100%; } .autoscale-section, section .autoscale { max-width: calc(min(100%, 30vw)) !important; } .desktop-only { display: none; } }

@media (min-width: 800px) { .mobile-only { display: none; } .bordered-desktop { margin: 2rem; float: none; } }

a { color: #FF0DBB; text-decoration: underline; }

a:hover { text-decoration: none; }

.headings, h4, h3, h2, h1 { color: #FF0DBB; font-family: 'Quicksand'; font-weight: 500; text-transform: uppercase; }

.headings a, h4 a, h3 a, h2 a, h1 a { text-decoration: none; }

hr { clear: both; }

.headerlink { margin-top: -100px; padding-bottom: 100px; display: block; }

h1 { font-size: 3rem; line-height: 3.5rem; text-align: center; }

h2 { color: #FAFF03; font-size: 2.5rem; line-height: 3rem; }

h3 { color: #8AD9F8; font-size: 2rem; line-height: 2.5rem; }

h4 { font-size: 1.5rem; line-height: 2rem; }

.gallerytext { color: #FF0DBB; }

.icon { fill: #FF0DBB; width: 3em; height: 3em; display: inline-flex; align-items: center; justify-content: center; transition: fill 0.25s ease; padding: 0 0.5em; }

.icon:hover { fill: #FEE303; }

.code-inline { white-space: nowrap; background-color: #1e1e1e; font-weight: 400; font-size: 15px; }

.asciirend { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; overflow: hidden; }

#glcanvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -100; background-image: url("/static/img/bg_static.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center; opacity: 50%; }

img { object-fit: contain; filter: drop-shadow(5px 2px 6px #000000); }

.rounded { border-radius: 10px; }

.profile-img { margin-right: 1em; border-radius: 100%; width: 32px; height: 32px; }

.pre-content { display: inline-block; max-width: 100%; text-align: left; backdrop-filter: blur(2px); }

.content { margin: 30px; overflow: hidden; }

.content img { max-width: 100%; }

.boxed, .pre-content { background-color: rgba(0, 0, 0, 0.8); border-radius: 1rem; }

.root { display: inline-block; margin: calc(min(10px, 1vw)); text-align: left; margin-top: calc(min(55px, calc(clamp((1vw - 1vh) * 0.5, 1vh, 0vh) * 5))); width: calc(min(90vw, 40cm)); max-width: calc(max(60vw, 30cm)); padding-top: calc(64px + 0.5rem); }

.button { display: inline-block; width: 6.875rem; height: 2.5rem; line-height: 2.5rem; padding: 0 0.5rem; vertical-align: middle; text-transform: uppercase; font-family: 'Quicksand', sans-serif; letter-spacing: 0.175rem; font-size: 0.825em; font-weight: 700; border-radius: 0.5rem; direction: var(--site-language-direction); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease; text-decoration: none; background-color: #FF0DBB; color: #000000; }

.button:hover { background-color: #FEE303 !important; }

.highlight, .asciirend { border: 2px solid #FF0DBB; background-color: #1e1e1e; }

.highlight pre, .asciirend pre { padding: 7px; margin: 0; overflow: scroll; overflow-x: auto; overflow-y: hidden; srollbar-color: rgba(70, 70, 70, 0.5) #141414; color: #d4d4d4; background-color: #1e1e1e; font-family: 'Droid Sans Mono', 'monospace', monospace, 'Droid Sans Fallback'; font-weight: normal; font-size: 14px; line-height: 19px; }

.highlight pre::-webkit-scrollbar, .asciirend pre::-webkit-scrollbar { width: 15px; height: 15px; }

.highlight pre::-webkit-scrollbar-thumb, .asciirend pre::-webkit-scrollbar-thumb { background: rgba(70, 70, 70, 0.5); }

.highlight pre::-webkit-scrollbar-track, .asciirend pre::-webkit-scrollbar-track { background: #141414; }

.hidden { visibility: hidden; }

.fadein { -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */ -moz-animation: fadein 2s; /* Firefox < 16 */ -ms-animation: fadein 2s; /* Internet Explorer */ -o-animation: fadein 2s; /* Opera < 12.1 */ animation: fadein 2s; }

@keyframes fadein { from { opacity: 0; }
  to { opacity: 1; } }

/* Firefox < 16 */
@-moz-keyframes fadein { from { opacity: 0; }
  to { opacity: 1; } }

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein { from { opacity: 0; }
  to { opacity: 1; } }

/* Internet Explorer */
@-ms-keyframes fadein { from { opacity: 0; }
  to { opacity: 1; } }

/* Opera < 12.1 */
@-o-keyframes fadein { from { opacity: 0; }
  to { opacity: 1; } }

.logo { display: inline-block; text-align: left; color: #139264; }

.pre-navbar { position: fixed; display: flex; top: 0; left: 0; align-items: center; justify-content: space-between; width: 100%; z-index: 100; background-color: black; box-shadow: 1px 1px 5px 0px #FF0DBB; height: 64px; }

.pre-navbar .logo { padding: 10px 20px; }

.navbar { display: flex; gap: 1rem; margin: 0; padding-left: inherit; padding-right: inherit; margin-right: 10px; }

.navbar li { list-style: none; width: 100%; }

.navbar .button { width: auto; }

.side-menu { display: none; }

.hamb { display: none; }

@media (max-width: 900px) { .pre-navbar { display: block; } .navbar { height: 0; display: none; overflow: hidden; flex-direction: column; align-items: flex-start; gap: 0; padding: 0; margin: 0; } .navbar .button { padding: 0; border-radius: 0; width: 100%; } .logo { display: flex; justify-content: space-between; } .hamb { display: block; cursor: pointer; float: right; padding: 20px 0px; } .hamb-line { background: #FF0DBB; display: block; height: 2px; position: relative; width: 24px; } .hamb-line::before, .hamb-line::after { background: #FF0DBB; content: ''; display: block; height: 100%; position: absolute; transition: all .2s ease-out; width: 100%; } .hamb-line::before { top: 5px; } .hamb-line::after { top: -5px; } .side-menu:checked ~ .hamb .hamb-line { background: transparent; } .side-menu:checked ~ .hamb .hamb-line::before { transform: rotate(-45deg); top: 0; } .side-menu:checked ~ .hamb .hamb-line::after { transform: rotate(45deg); top: 0; } header:has(.logo .side-menu:checked) .navbar { height: auto; display: flex; animation: fadein 500ms; box-shadow: 1px 1px 5px 0px #FF0DBB; } body:has(.side-menu:checked) { overflow: hidden; } }

.slideshow-container { margin: 3rem auto; text-align: center; display: flex; flex-direction: column; align-items: center; }

.slide { width: 100%; max-width: 940px; padding: 0 1rem; box-sizing: border-box; }

.slide-title { font-size: 2rem; margin-bottom: 1rem; font-weight: bold; text-align: center; }

.slide-image { max-width: 100%; max-height: 70vh; height: auto; width: auto; display: block; margin: 0 auto; border-radius: 8px; object-fit: contain; }

.slide-description { max-width: 800px; margin: 1rem auto 0.5rem; font-size: 1.1rem; line-height: 1.5; text-align: center; }

.event-button { display: inline-block; width: 9.875rem; height: 2.5rem; line-height: 2.5rem; padding: 0 0.5rem; vertical-align: middle; text-transform: uppercase; font-family: 'Quicksand', sans-serif; letter-spacing: 0.175rem; font-size: 0.825em; font-weight: 700; border-radius: 0.5rem; direction: var(--site-language-direction); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease; text-decoration: none; background-color: #FF0DBB; color: #000000; }

.hidden { display: none; }

.slideshow-nav { margin-top: 1rem; display: flex; justify-content: center; gap: 0.5rem; }

.nav-dot { width: 12px; height: 12px; border-radius: 50%; background-color: #ccc; border: none; cursor: pointer; transition: background-color 0.3s ease; }

.nav-dot.active { background-color: #ff0dbb; }

.arrow { position: absolute; top: 50vh; transform: translateY(-50%); background-color: rgba(0, 0, 0, 0.4); color: white; border: none; font-size: 2rem; cursor: pointer; padding: 0.5rem 1rem; border-radius: 4px; z-index: 2; }

.arrow-left { left: 10px; }

.arrow-right { right: 10px; }

.arrow:hover { background-color: rgba(0, 0, 0, 0.6); }