.textures {
    display: block;
    height: 100vh;
    left: 0;
    mix-blend-mode: multiply;
    overflow: hidden;
    pointer-events: none;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: -1
}

.textures:after, .textures:before {
    content: "";
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.textures:before {
    animation: slide 1s linear infinite;
    opacity: .3
}

.textures:after, .textures:before {
    background-image: url(../media/noise.c5d03fee5564f5d76e30.webp);
    background-repeat: repeat;
    background-size: auto 50%;
    mix-blend-mode: color-burn
}

.textures:after {
    animation: slide 5s linear infinite;
    opacity: .5;
    will-change: contents
}

@keyframes slide {
    0% {
        background-position: 0 0
    }
    to {
        background-position: -1000% 0
    }
}

a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
    border: 0;
    font-size: 100%;
    font: inherit;
    margin: 0;
    padding: 0;
    vertical-align: initial
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block
}

body {
    line-height: 1
}

* {
    box-sizing: border-box
}

img {
    height: auto;
    max-width: 100%
}

ol, ul {
    list-style: none
}

blockquote, q {
    quotes: none
}

:root {
    --primary: #fff;
    --primary-rgb: 255, 255, 255;
    --grey: #c9c9c9;
    --smoke: #000;
    --negative: #000;
    --negative-rgb: 0, 0, 0;
    --accent: var(--blue);
    --h-accent: var(--h-blue);
    --purple: #9b74e7;
    --h-purple: #815bcf;
    --shadow-purple: #6843b4;
    --text-purple: #e2ccff;
    --yellow: #f7d857;
    --h-yellow: #ff953e;
    --red: #eb4c4c;
    --h-red: #d33a3a;
    --pink: #e543d2;
    --h-pink: #d035be;
    --blue: #3bb2e0;
    --h-blue: #61d8ff;
    --text-blue: #ccdaff;
    --shadow-blue: #2289b2;
    --raydium: #35a7d1;
    --teal: #72ecc1;
    --h-teal: #35cb98;
    --green: #74e886;
    --h-green: #53cc66;
    --leaves: #afeb4e;
    --light-leaves: #d0e7ac;
    --chartreusse: #b1d559;
    --orange: #ed965c;
    --magenta: #da5378;
    --alert: #e17860;
    --tree: #b7924e;
    --dtree: #726749;
    --grass: #c3f86d;
    --border: #2d2824;
    --global-width: 1760px;
    --global-p-width: 480px;
    --global-padding: 20px;
    --global-body-bg: #87fff9;
    --gutter: 10px;
    --heading: "Deebo", sans-serif;
    --line-height: 1;
    --globall-line-height: 1.4;
    --reduced-line-height: 1.2;
    --body: "Deebo", sans-serif;
    --h1: 20.25vw;
    --h2: 12vw;
    --h3: 9.3vw;
    --h4: 21px;
    --h5: 20px;
    --h6: 16px;
    --paragraph: 16px;
    --enlarged: 21px;
    --small: 73%;
    --rate: .85;
    --large-radius: 22px;
    --small-radius: 6px;
    --v-small: 20px;
    --v-large: 22.85714px;
    --t-spacer: 11.5vh;
    --btn-huge: 18px;
    --btn-large: 16px;
    --btn-small: 14px;
    --btn-tiny: 12px;
    --btn-radius: 8px;
    --btn-padding: 11.66667px 16.66667px;
    --btn-small-padding: 10.83333px 20.83333px;
    --btn-large-padding: 17.5px 16.66667px;
    --btn-tiny-padding: 6.66667px 10px
}

@media (min-width: 768px) {
    :root {
        --gutter: 15px;
        --paragraph: 18px;
        --h4: 26px;
        --v-small: 30px;
        --v-large: 53.33333px;
        --btn-padding: 14px 20px;
        --btn-small-padding: 13px 25px;
        --btn-large-padding: 21px 20px;
        --btn-tiny-padding: 8px 12px
    }
}

@media (min-width: 1024px) {
    :root {
        --gutter: 30px;
        --h1: 5.25455vw;
        --h2: 3.75vw;
        --h3: 2.61vw;
        --h4: 1.81vw;
        --enlarged: 28px;
        --large-radius: 34px;
        --small-radius: 10px;
        --v-small: 30px;
        --v-large: 53.33333px
    }
}

@media (min-width: 1921px) {
    :root {
        --h1: 100.90909px;
        --h2: 72px;
        --h3: 50px;
        --h4: 36px;
        --t-spacer: 200px
    }
}

@font-face {
    font-display: swap;
    font-family: Deebo;
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/deebo.5c5f0f62cb069f9826a0.woff2) format("woff2")
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--heading);
    line-height: var(--reduced-line-height);
    text-transform: inherit
}

h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
    font-size: var(--small)
}

h1 {
    font-size: var(--h1)
}

h1, h2 {
    color: var(--primary);
    text-shadow: 1px 1px 4px #00000040
}

h2 {
    font-size: var(--h2)
}

h3 {
    color: var(--primary);
    font-size: var(--h3)
}

h4 {
    font-size: var(--h4)
}

h5 {
    font-size: var(--h5)
}

h6 {
    font-size: var(--h6)
}

p.enlarged {
    font-size: var(--enlarged)
}

[data-color=light] {
    -webkit-text-stroke-color: var(--negative);
    color: var(--yellow);
    text-shadow: -1px 1.5px 0 var(--negative)
}

[data-color=dark] {
    -webkit-text-stroke-width: unset !important;
    color: var(--yellow);
    text-shadow: none !important
}

[data-color=accent] {
    color: var(--accent)
}

::selection {
    background: var(--h-yellow);
    color: var(--yellow)
}

::-moz-selection {
    background: var(--h-yellow);
    color: var(--yellow)
}

button {
    all: unset;
    cursor: pointer
}

button:hover {
    transition: all .3s ease-in-out
}

.btn-group {
    display: flex
}

.btn-group.spaceless .btn {
    margin-top: 0
}

.btn-group .btn:not(:last-child) {
    margin-right: calc(var(--gutter) / 2)
}

.btn {
    border: 2px solid var(--border);
    border-radius: var(--btn-radius);
    color: inherit;
    cursor: pointer;
    font-size: var(--btn-large);
    line-height: 1;
    padding: var(--btn-padding);
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: all .2s ease-in-out
}

.btn:not(.spaceless) {
    margin-top: var(--v-small)
}

.btn:hover {
    text-decoration: none;
    transition: all .3s ease-in-out
}

.btn.small {
    font-size: var(--btn-small);
    padding: var(--btn-small-padding)
}

.btn.large {
    font-size: var(--btn-huge);
    padding: var(--btn-large-padding)
}

.btn-tiny {
    font-size: var(--btn-tiny);
    padding: var(--btn-tiny-padding)
}

.btn.primary {
    background-color: var(--dtree);
    color: var(--yellow)
}

.btn.primary:hover {
    background-color: var(--tree)
}

.btn.secondary {
    background-color: var(--teal);
    color: var(--primary)
}

.btn.secondary:hover {
    background-color: var(--h-teal)
}

.btn.yellow {
    background-color: var(--yellow)
}

.btn.yellow:hover {
    background-color: var(--h-yellow)
}

.btn.hollow {
    background-color: initial;
    color: var(--tree)
}

[data-theme=negative] .btn.hollow {
    color: var(--negative)
}

.btn.hollow:hover {
    background-color: rgba(var(--primary-rgb), .1)
}

[data-theme=negative] .btn.hollow:hover {
    background-color: #ffffff1a
}

.btn.outline {
    background-color: initial;
    border: 1px solid #ccdaff80;
    color: var(--text-blue)
}

.btn.outline:hover {
    background-color: #ccdaff40
}

[data-ico] {
    display: block;
    height: 28px;
    position: relative;
    width: 28px
}

[data-ico=add] {
    height: 18px;
    width: 18px
}

[data-ico]:before {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    width: 100%
}

[data-ico][data-theme] {
    z-index: 1
}

[data-ico=tg]:before {
    background-image: url(../media/tg.4f6589b5352a9bdfab12.svg)
}

[data-ico=tg][data-theme=yellow]:before {
    background-image: url(../media/tg-y.1ff621c84b353a2677d7.svg)
}

[data-ico=tw]:before {
    background-image: url(../media/tw.e217529426fe36f3cd93.svg)
}

[data-ico=tw][data-theme=yellow]:before {
    background-image: url(../media/tw-y.ee649c28227c2da1d568.svg)
}

[data-ico=eth]:before {
    background-image: url(../media/etherscan.4108a973db469732580a.svg)
}

[data-ico=dextools]:before {
    background-image: url(../media/dextools.8baae48661d59aa94a2d.svg)
}

[data-ico=dextools][data-theme=yellow]:before {
    background-image: url(../media/dextools-y.fc7e910a97ed6efdefae.svg)
}

[data-ico=dexscreener]:before {
    background-image: url(../media/dexscreener.d2097438eb9771959b45.svg)
}

[data-ico=solscan]:before {
    background-image: url(../media/solscan.5c464e6cd89c6cc77718.svg)
}

[data-ico=raydium]:before {
    background-image: url(../media/raydium-ico.31d938bb8fc86f3458bd.svg)
}

[data-ico=solscan][data-theme=yellow]:before {
    background-image: url(../media/solscan-y.e92bafa1a551aaa2021d.svg)
}

[data-ico=tik]:before {
    background-image: url(../media/tiktok.0974102c6838161d71f8.svg)
}

[data-ico=gecko]:before {
    background-image: url(../media/gecko.2a431a95c674673ecea7.svg)
}

[data-ico=cmc]:before {
    background-image: url(../media/cmc-ico.f69c3285576b1582b646.svg)
}

[data-ico=prerich]:before {
    background-image: url(../media/prerich-ico.d6c4f75d5b51ec31e510.svg)
}

[data-ico=memedepot]:before {
    background-image: url(../media/memedepot.d6324bb948830f8d7c8e.svg)
}

[data-ico=add]:before {
    background-image: url(../media/check.2ac49d2d8f713cae596e.svg)
}

[data-ico=scale]:before {
    background-image: url(../media/scale-ico.2ca65281dd67a6628678.svg)
}

[data-ico=del]:before {
    background-image: url(../media/delete-ico.47fa169e5fb653670792.svg)
}

[data-ico=vflip]:before {
    background-image: url(../media/vflip.724d540faed7d3b391c3.svg)
}

[data-ico=hflip]:before {
    background-image: url(../media/hflip.201148aad8da934b79ff.svg)
}

[data-ico=rotate]:before {
    background-image: url(../media/rotate-ico.20f9cebe894636e200a9.svg)
}

[data-ico=lup]:before {
    background-image: url(../media/upl-ico.52f311284f5a460499f8.svg)
}

[data-ico=ldwn]:before {
    background-image: url(../media/dwn-ico.7cb8173ad03a04db01ae.svg)
}

[data-ico=ext]:before {
    background-image: url(../media/external.4daf614d0ba836acdd39.svg)
}

html {
    -webkit-text-size-adjust: 100%;
    box-sizing: border-box;
    scroll-behavior: smooth;
    scroll-padding-top: var(--v-large)
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--global-body-bg);
    color: var(--primary);
    display: block;
    font-family: var(--body);
    font-size: var(--paragraph);
    line-height: var(--globall-line-height);
    overflow-x: hidden;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .004)
}

#root {
    margin-left: auto;
    margin-right: auto;
    max-width: var(--global-width);
    padding: 0 var(--global-padding)
}

#root > :not(.exclude):not(.fw) {
    width: 100%
}

.grid-x {
    align-items: flex-start;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    margin-left: calc(var(--gutter) * -1);
    margin-right: calc(var(--gutter) * -1)
}

.grid-x.no-gutters {
    margin-left: 0;
    margin-right: 0
}

.grid-x.justify, .justify {
    justify-content: space-between
}

.align-center, .grid-x.align-center {
    justify-content: center
}

.grid-x.stretch, .stretch {
    align-items: stretch
}

.align-middle, .grid-x.align-middle {
    align-items: center
}

.grid-x > hr {
    border-color: var(--border);
    margin-left: var(--gutter);
    margin-right: var(--gutter);
    width: 100%
}

.grid-x > hr:first-child {
    margin-bottom: var(--v-small)
}

.grid-x > hr:last-child {
    margin-top: var(--v-small)
}

.cell-12, .cell-3, .cell-4, .cell-5, .cell-6, .cell-7, .cell-8 {
    margin-left: var(--gutter);
    margin-right: var(--gutter);
    width: 100%
}

.text-right {
    text-align: right
}

.text-center {
    text-align: center
}

.self-top {
    align-self: start
}

.self-middle {
    align-self: center
}

.self-bottom {
    align-self: end
}

.large-border {
    border-radius: var(--large-radius)
}

.break {
    flex-basis: 100%;
    height: 0
}

.fw {
    margin-left: calc(var(--global-padding) * -1);
    margin-right: calc(var(--global-padding) * -1);
    width: calc(var(--global-padding) * 2 + 100%)
}

.circle {
    align-items: center;
    background-color: var(--text-blue);
    border: 2px solid var(--shadow-blue);
    border-radius: 50%;
    box-shadow: -5px 6px 0 0 var(--shadow-blue);
    box-sizing: border-box;
    display: flex;
    height: 50px;
    justify-content: center;
    transition: all .2s ease-in-out;
    width: 50px
}

.circle:hover {
    box-shadow: 0 0 0 0 var(--shadow-blue);
    transition: all .3s ease-in-out
}

.socials {
    align-items: center;
    display: flex
}

.socials a:not(:last-child) {
    margin-right: 5px
}

.box {
    border: 2px solid var(--shadow-blue);
    box-shadow: -5px 6px 0 0 var(--shadow-blue);
    color: var(--shadow-blue);
    padding: calc(var(--gutter) * 2);
    text-align: center
}

.box, .photo {
    background-color: var(--primary);
    border-radius: var(--small-radius);
    display: block
}

.photo {
    box-shadow: -9px 16px 40px #00000026;
    box-sizing: border-box;
    padding: var(--gutter);
    position: relative;
    z-index: 1
}

.photo img {
    width: 100%
}

.photo:after, .photo:before {
    border-radius: inherit;
    box-shadow: inherit;
    content: "";
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1
}

.photo:before {
    background-color: var(--text-blue);
    transform: translate(5%, 5%)
}

.photo:after {
    background-color: inherit
}

.photo img {
    border: 1px solid var(--negative);
    display: block
}

.heading {
    align-items: center;
    display: flex;
    justify-content: center;
    text-align: center
}

@media (max-width: 1023px) {
    .show-for-large {
        display: none
    }
}

@media (max-width: 1024px) {
    #root {
        overflow-x: hidden;
        position: relative
    }
}

@media (min-width: 1024px) {
    .cell-3 {
        width: calc(25% - var(--gutter) * 2)
    }

    .cell-4 {
        width: calc(33.33333% - var(--gutter) * 2)
    }

    .cell-5 {
        width: calc(41.66667% - var(--gutter) * 2)
    }

    .cell-6 {
        width: calc(50% - var(--gutter) * 2)
    }

    .cell-7 {
        width: calc(58.33333% - var(--gutter) * 2)
    }

    .cell-8 {
        width: calc(66.66667% - var(--gutter) * 2)
    }

    .cell-12 {
        width: calc(100% - var(--gutter) * 2)
    }

    .large-text-right {
        text-align: right
    }

    .box {
        padding: var(--gutter)
    }
}

@media (min-width: 1441px) {
    .circle {
        height: 69px;
        width: 69px
    }
}

@media (min-width: 1760px) {
    .fw {
        margin-left: calc(((100vw - 1760px) / 2 + var(--global-padding)) * -1);
        margin-right: calc(((100vw - 1760px) / 2 + var(--global-padding)) * -1);
        width: calc(100% + 100vw - 1760px + var(--global-padding) * 2)
    }
}

#root > :not(.spaceless):not(.sn):not(.upsbanner) {
    margin-bottom: var(--v-large)
}

.fr {
    border: 2px solid var(--border);
    border-radius: var(--large-radius);
    display: block;
    overflow: hidden;
    position: relative
}

.fr.bypass {
    overflow: visible
}

.fr.bypass .scene .bg {
    border-radius: calc(var(--large-radius) - 2px)
}

.fr img {
    display: block
}

.alt {
    background-color: var(--accent);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--primary);
    font-size: 12px;
    left: 50%;
    line-height: 1;
    opacity: 0;
    padding: 3px;
    text-align: center;
    text-transform: uppercase;
    top: 50%;
    transform: scale(0) translate(-50%, -50%);
    transition: all .2s ease-in-out
}

.alt, .pulse {
    display: block;
    position: absolute
}

.pulse {
    animation: pulse 1.5s ease-in-out infinite;
    height: calc(100% + 8px);
    left: -4px;
    max-width: none;
    opacity: .7;
    top: -4px;
    transition: opacity .2s ease-in-out;
    width: calc(100% + 8px) !important;
    z-index: -1
}

@keyframes pulse {
    0%, 25%, 75%, to {
        opacity: 0
    }
    50% {
        opacity: .7
    }
}

a:hover .alt {
    opacity: 1;
    pointer-events: none;
    transform: scale(1) translate(-50%, -50%)
}

@keyframes pulseactive {
    to {
        opacity: .7
    }
}

a:hover .pulse {
    animation: pulseactive .5s ease-in-out infinite
}

#intro {
    margin-top: var(--v-large)
}

.icomp .scene {
    background: #61d8ff;
    background: linear-gradient(0deg, #61d8ff, #86f2be);
    position: relative
}

.icomp .wr {
    margin-left: -70%;
    margin-right: -70%;
    width: 240%
}

.icomp .bg {
    position: relative;
    z-index: 1
}

.icomp .cls {
    left: 5%;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 90%;
    z-index: 0
}

.icomp .cls:before {
    content: "";
    display: block;
    padding-bottom: 36.88119%;
    position: relative;
    width: 100%
}

.icomp .cl {
    animation: clouds 30s linear infinite;
    background: url(../media/clouds.5ee671a935f76da3e2b2.webp);
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

@keyframes clouds {
    0%, to {
        transform: scale(1) rotate(0deg)
    }
    50% {
        transform: scale(1.1) rotate(10deg)
    }
}

.hero {
    left: 50%;
    position: absolute;
    top: 44%;
    transform: translate(-50%, -50%);
    width: 47.88%;
    z-index: 2
}

.icomp .char {
    animation: char 6s ease-in-out infinite;
    pointer-events: none;
    width: 100%
}

@keyframes char {
    0%, to {
        transform: translateY(0) scale(1)
    }
    50% {
        transform: translateY(5%) scale(.99)
    }
}

.hero .around {
    display: block;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 125%
}

.hero .around:before {
    content: "";
    display: block;
    padding-bottom: 100%;
    position: relative;
    width: 100%
}

.hero .around ul {
    animation: medipow 6s ease-in-out infinite;
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

@keyframes medipow {
    0%, to {
        transform: rotate(15deg) scale(1)
    }
    50% {
        transform: rotate(0deg) scale(1)
    }
}

.hero .around ul > * {
    animation: medibal 6s ease-in-out infinite;
    position: absolute;
    transform: translate(-50%, -50%)
}

.hero .around ul > * > * {
    display: block;
    transition: all .2s ease-in-out
}

.hero .around ul > :hover > * {
    transform: scale(1.1);
    transition: all .3s ease-in-out
}

.hero .around ul img {
    width: 100%
}

@keyframes medibal {
    0%, to {
        transform: translate(-50%, -50%) rotate(-15deg)
    }
    50% {
        transform: translate(-50%, -50%) rotate(0deg)
    }
}

.elsol {
    left: 1.4%;
    top: 63%;
    width: 12%
}

.elhoney {
    left: 6.8%;
    top: 25.7%;
    width: 18.6%
}

.elcoins {
    left: 49%;
    top: 1.5%;
    width: 23.5%
}

.eltel {
    right: -6.8%;
    top: 18%;
    width: 16%
}

.eltel span {
    animation: tel 2s ease infinite;
    display: block
}

@keyframes tel {
    0%, 7% {
        transform: rotate(0)
    }
    15% {
        transform: rotate(-7.5deg)
    }
    20% {
        transform: rotate(5deg)
    }
    25% {
        transform: rotate(-10deg)
    }
    30% {
        transform: rotate(6deg)
    }
    35% {
        transform: rotate(-2deg)
    }
    40%, to {
        transform: rotate(0)
    }
}

.dexrock {
    display: block;
    left: 78.11%;
    position: absolute;
    top: 53%;
    transform: translate(-50%, -50%);
    transition: all .2s ease-in-out;
    width: 12.12%;
    z-index: 3
}

.dexrock:hover {
    transform: translate(-50%, -50%) scale(1.1);
    transition: all .3s ease-in-out
}

.peble {
    animation: peble 6s ease-in-out infinite;
    display: block;
    z-index: 2
}

@keyframes peble {
    0%, to {
        transform: translate(0)
    }
    50% {
        transform: translateY(-7%)
    }
}

.peble img {
    width: 100%
}

.plantation {
    animation: grass 2s ease-in-out infinite;
    bottom: 0;
    left: 0;
    pointer-events: none;
    position: absolute;
    width: 100%;
    z-index: 4
}

@keyframes grass {
    50% {
        transform: scaleX(1.02) translateY(2.5%) rotateY(7deg) rotateX(5deg) rotateY(-2deg) rotate(-.5deg)
    }
}

.gmb, .rocket, .tgp {
    position: absolute
}

.gmb img, .rocket img, .tgp img {
    width: 100%
}

.icomp .rocket {
    animation: rocket 2s ease-in-out infinite;
    bottom: 2.67%;
    left: 28.6%;
    width: 12.6%;
    z-index: 5
}

@keyframes rocket {
    0%, 7% {
        transform: translateY(0)
    }
    15% {
        transform: translateY(-10%)
    }
    20% {
        transform: translateY(0)
    }
    25% {
        transform: translateY(-11%)
    }
    30% {
        transform: translateY(-5%)
    }
    35% {
        transform: translateY(-10%)
    }
    40%, to {
        transform: translateY(0)
    }
}

.tgp {
    animation: tgp 2s ease-in-out infinite;
    bottom: 14%;
    right: 2.2%;
    width: 21.1%;
    z-index: 3
}

@keyframes tgp {
    0%, to {
        transform: translateX(0) scale(1.05) rotate(3deg)
    }
    50% {
        transform: translateX(2%) scale(1) rotate(0deg)
    }
}

.gmb {
    animation: gmb 2s ease-in-out infinite;
    bottom: -3%;
    left: 5.2%;
    width: 15.76%;
    z-index: 4
}

@keyframes gmb {
    0%, to {
        transform: perspective(10vw) translateX(0) scale(1.05) rotate(-2deg) rotateY(2deg) rotateX(2deg)
    }
    50% {
        transform: perspective(10vw) translateX(2%) scale(1) rotate(0deg) rotateY(0deg) rotateX(0deg)
    }
}

@media (min-width: 768px) {
    .icomp .wr {
        margin-left: -20%;
        margin-right: -20%;
        width: 140%
    }

    .hero {
        width: 27.93%
    }

    .dexrock {
        left: 66.5388%;
        width: 7.07%
    }

    .icomp .rocket {
        bottom: 4%;
        left: 17.556%;
        width: 8.4%
    }

    .gmb {
        bottom: -5%;
        left: -1.4%;
        width: 13.46%
    }

    .tgp {
        bottom: 30%;
        right: 4.2%;
        width: 11.34%
    }
}

@media (min-width: 1024px) {
    .fr {
        border-width: 5px
    }

    .fr.bypass .scene .bg {
        border-radius: calc(var(--large-radius) - 5px)
    }

    .icomp .wr {
        margin-left: 0;
        margin-right: 0;
        width: 100%
    }

    .hero {
        width: 19.95%
    }

    .dexrock {
        left: 61.61%;
        width: 5.05%
    }

    .icomp .rocket {
        left: 26.6%;
        width: 6%
    }

    .gmb {
        bottom: -3%;
        left: 11.2%;
        width: 10.76%;
        z-index: 3
    }

    .tgp {
        bottom: 30%;
        right: 1.2%;
        width: 11.1%
    }
}

.acomp .scene {
    background-color: #5ee1b2;
    padding-bottom: 54px;
    position: relative
}

.acomp .wr {
    margin-left: -70%;
    margin-right: -70%;
    width: 240%
}

.acomp .bg {
    position: relative;
    z-index: 2
}

.acomp .cls {
    position: absolute;
    right: -5%;
    top: 0;
    width: 25%;
    z-index: 1
}

.acomp .cls:before {
    content: "";
    display: block;
    padding-bottom: 46.1285%;
    position: relative;
    width: 100%
}

.acomp .cl {
    animation: bclouds 30s linear infinite;
    background-image: url(../media/bullclouds.559480ba2c246bc0d9e0.webp);
    background-size: cover;
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

@keyframes bclouds {
    0%, to {
        transform: translate(0) rotate(0deg)
    }
    50% {
        transform: translate(-25%, -6%) rotate(10deg)
    }
}

.bcall {
    animation: bcall 2s ease-in-out infinite;
    bottom: 0;
    left: 29%;
    position: absolute;
    width: 35%;
    z-index: 5
}

@keyframes bcall {
    50% {
        transform: translate(2%, 2.5%) scaleY(1.06) rotateY(1deg) rotateX(10deg)
    }
}

.floating {
    animation: floating 15s ease-in-out infinite;
    display: block;
    left: 44%;
    position: absolute;
    top: 21%;
    width: 15%;
    z-index: 2
}

.bullplants {
    animation: brass 2s ease-in-out infinite;
    bottom: 121px;
    position: absolute;
    right: 81%;
    width: 10%;
    z-index: 4
}

@keyframes brass {
    50% {
        transform: scaleX(1.02) translateY(2.5%) scaleY(1.06) rotateY(10deg) rotateX(25deg)
    }
}

@keyframes floating {
    0%, to {
        transform: translate(0)
    }
    50% {
        transform: translate(-20%, 2%)
    }
}

.acomp .heading {
    display: block;
    position: absolute;
    right: 3%;
    top: 10%;
    z-index: 3
}

.acomp .heading h2 {
    font-size: 7vw;
    letter-spacing: .44vw;
    line-height: 1;
    text-align: center
}

.acomp .heading h2 a {
    color: var(--primary);
    text-decoration: none
}

.acomp .heading h2 span {
    display: block
}

.acomp .heading h2 .f {
    transform: scaleY(1.5)
}

.acomp .heading h2 .s {
    transform: scale(1.281, 2.7) translateY(25%)
}

@media (min-width: 1024px) {
    .acomp .scene {
        background: #61d8ff;
        background: linear-gradient(0deg, #61d8ff, #86f2be);
        padding-bottom: 0
    }

    .acomp .wr {
        margin-left: 0;
        margin-right: 0;
        width: 100%
    }

    .floating {
        left: 50%;
        top: 33%;
        width: 17%
    }

    .bullplants {
        bottom: 0;
        right: 30%;
        width: 10%
    }

    .bcall {
        left: 10%;
        width: 36%
    }

    .acomp .heading {
        right: 0;
        top: 0
    }

    .acomp .heading h2 {
        font-size: 7.4vw
    }
}

@media (min-width: 1441px) {
    .acomp .heading h2 {
        font-size: 7vw
    }
}

@media (min-width: 1921px) {
    .acomp .heading h2 {
        font-size: 130px
    }
}

#contract {
    margin-bottom: var(--v-large)
}

#contract h2 {
    font-size: 17.77vw;
    letter-spacing: .4vw;
    line-height: 1;
    text-align: center
}

#contract h2 a {
    color: inherit;
    display: block;
    position: relative;
    text-decoration: none;
    transform: scaleX(1.281)
}

.heading a span {
    display: block;
    transition: all .3s ease-in-out
}

.heading a:hover span {
    transition: all .2s ease-in-out
}

a .overl {
    background-color: var(--accent);
    border: 2px solid var(--border);
    border-radius: var(--small-radius);
    color: var(--primary);
    display: block;
    font-size: 33%;
    left: 50%;
    letter-spacing: 4vw;
    opacity: 0;
    padding: 1vw 2vw;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%) scale(0);
    z-index: 2
}

.heading a:hover .base {
    transform: scaleY(1.1)
}

a:hover .overl {
    letter-spacing: .4vw;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    transition: all .2s ease-in-out
}

#contract .clipboard {
    align-items: center;
    color: var(--primary);
    font-size: 2.55vw;
    justify-content: center;
    transition: all .2s ease-in-out
}

#contract .clipboard:hover {
    box-shadow: 0 0 0 0 var(--h-accent);
    text-decoration: none;
    transition: all .3s ease-in-out
}

#contract .clipboard .reduced {
    letter-spacing: .2vw;
    transform: scaleY(2.75);
    transition: all .2s ease-in-out
}

#contract .clipboard:hover .reduced {
    transform: scaleY(3);
    transition: all .3s ease-in-out
}

#contract [data-ico=clipboard] {
    height: 3.3vw;
    width: 3.3vw
}

@media (min-width: 1024px) {
    #contract .clipboard {
        font-size: 2.85vw
    }

    #contract h2 {
        font-size: 19.17vw
    }

    a .overl {
        border-width: 5px
    }
}

@media (min-width: 1441px) {
    #contract .clipboard {
        font-size: 2.65vw
    }

    #contract h2 {
        font-size: 17.77vw
    }
}

@media (min-width: 1921px) {
    #contract h2 {
        font-size: 347px
    }

    #contract .clipboard {
        font-size: 49px
    }

    #contract [data-ico=clipboard] {
        height: 63.3px;
        width: 63.3px
    }
}

[data-ico=clipboard] {
    margin-left: calc(var(--gutter) / 3)
}

[data-ico=clipboard]:before {
    background-image: url(../media/clipboard.812c5db770fce1bcecef.svg)
}

.clipboard {
    align-items: center;
    cursor: pointer;
    display: flex;
    flex-flow: row nowrap
}

.clipboard:hover {
    text-decoration: underline
}

.contractCopy {
    font-size: 16px;
    margin-top: var(--v-small);
    position: relative;
    z-index: 2
}

.contractCopy .message {
    background-color: var(--green);
    border: 2px solid var(--border);
    border-radius: var(--btn-radius);
    color: var(--primary);
    font-size: var(--btn-tiny);
    left: 50%;
    padding: var(--btn-tiny-padding);
    position: absolute;
    text-transform: uppercase;
    top: 50%;
    transform: translate(-50%, -50%) scaleY(1.5)
}

@media (max-width: 640px) {
    .clipboard .reduced {
        display: inline-block;
        max-width: calc(100% - 32px);
        overflow: hidden;
        position: relative;
        text-overflow: ellipsis
    }
}

@font-face {
    font-family: swiper-icons;
    font-style: normal;
    font-weight: 400;
    src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA")
}

:root {
    --swiper-theme-color: #007aff
}

:host {
    display: block;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 1
}

.swiper {
    display: block;
    list-style: none;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    padding: 0;
    position: relative;
    z-index: 1
}

.swiper-vertical > .swiper-wrapper {
    flex-direction: column
}

.swiper-wrapper {
    box-sizing: initial;
    display: flex;
    height: 100%;
    position: relative;
    transition-property: transform;
    transition-timing-function: ease;
    transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
    width: 100%;
    z-index: 1
}

.swiper-android .swiper-slide, .swiper-ios .swiper-slide, .swiper-wrapper {
    transform: translateZ(0)
}

.swiper-horizontal {
    touch-action: pan-y
}

.swiper-vertical {
    touch-action: pan-x
}

.swiper-slide {
    display: block;
    flex-shrink: 0;
    height: 100%;
    position: relative;
    transition-property: transform;
    width: 100%
}

.swiper-slide-invisible-blank {
    visibility: hidden
}

.swiper-autoheight, .swiper-autoheight .swiper-slide {
    height: auto
}

.swiper-autoheight .swiper-wrapper {
    align-items: flex-start;
    transition-property: transform, height
}

.swiper-backface-hidden .swiper-slide {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0)
}

.swiper-3d.swiper-css-mode .swiper-wrapper {
    perspective: 1200px
}

.swiper-3d .swiper-wrapper {
    transform-style: preserve-3d
}

.swiper-3d {
    perspective: 1200px
}

.swiper-3d .swiper-cube-shadow, .swiper-3d .swiper-slide {
    transform-style: preserve-3d
}

.swiper-css-mode > .swiper-wrapper {
    -ms-overflow-style: none;
    overflow: auto;
    scrollbar-width: none
}

.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
    display: none
}

.swiper-css-mode > .swiper-wrapper > .swiper-slide {
    scroll-snap-align: start start
}

.swiper-css-mode.swiper-horizontal > .swiper-wrapper {
    scroll-snap-type: x mandatory
}

.swiper-css-mode.swiper-vertical > .swiper-wrapper {
    scroll-snap-type: y mandatory
}

.swiper-css-mode.swiper-free-mode > .swiper-wrapper {
    scroll-snap-type: none
}

.swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide {
    scroll-snap-align: none
}

.swiper-css-mode.swiper-centered > .swiper-wrapper:before {
    content: "";
    flex-shrink: 0;
    order: 9999
}

.swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide {
    scroll-snap-align: center center;
    scroll-snap-stop: always
}

.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
    margin-inline-start: var(--swiper-centered-offset-before)
}

.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper:before {
    height: 100%;
    min-height: 1px;
    width: var(--swiper-centered-offset-after)
}

.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
    margin-block-start: var(--swiper-centered-offset-before)
}

.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper:before {
    height: var(--swiper-centered-offset-after);
    min-width: 1px;
    width: 100%
}

.swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top {
    height: 100%;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 10
}

.swiper-3d .swiper-slide-shadow {
    background: #00000026
}

.swiper-3d .swiper-slide-shadow-left {
    background-image: linear-gradient(270deg, #00000080, #0000)
}

.swiper-3d .swiper-slide-shadow-right {
    background-image: linear-gradient(90deg, #00000080, #0000)
}

.swiper-3d .swiper-slide-shadow-top {
    background-image: linear-gradient(0deg, #00000080, #0000)
}

.swiper-3d .swiper-slide-shadow-bottom {
    background-image: linear-gradient(180deg, #00000080, #0000)
}

.swiper-lazy-preloader {
    border: 4px solid #007aff;
    border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
    border-radius: 50%;
    border-top: 4px solid #0000;
    box-sizing: border-box;
    height: 42px;
    left: 50%;
    margin-left: -21px;
    margin-top: -21px;
    position: absolute;
    top: 50%;
    transform-origin: 50%;
    width: 42px;
    z-index: 10
}

.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader, .swiper:not(.swiper-watch-progress) .swiper-lazy-preloader {
    animation: swiper-preloader-spin 1s linear infinite
}

.swiper-lazy-preloader-white {
    --swiper-preloader-color: #fff
}

.swiper-lazy-preloader-black {
    --swiper-preloader-color: #000
}

@keyframes swiper-preloader-spin {
    0% {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(1turn)
    }
}

.swiper-pagination {
    position: absolute;
    text-align: center;
    transform: translateZ(0);
    transition: opacity .3s;
    z-index: 10
}

.swiper-pagination.swiper-pagination-hidden {
    opacity: 0
}

.swiper-pagination-disabled > .swiper-pagination, .swiper-pagination.swiper-pagination-disabled {
    display: none !important
}

.swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: 8px;
    bottom: var(--swiper-pagination-bottom, 8px);
    left: 0;
    top: auto;
    top: var(--swiper-pagination-top, auto);
    width: 100%
}

.swiper-pagination-bullets-dynamic {
    font-size: 0;
    overflow: hidden
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    position: relative;
    transform: scale(.33)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active, .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
    transform: scale(1)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
    transform: scale(.66)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
    transform: scale(.33)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
    transform: scale(.66)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
    transform: scale(.33)
}

.swiper-pagination-bullet {
    background: #000;
    background: var(--swiper-pagination-bullet-inactive-color, #000);
    border-radius: 50%;
    border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
    display: inline-block;
    height: 8px;
    height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
    opacity: .2;
    opacity: var(--swiper-pagination-bullet-inactive-opacity, .2);
    width: 8px;
    width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px))
}

button.swiper-pagination-bullet {
    -webkit-appearance: none;
    appearance: none;
    border: none;
    box-shadow: none;
    margin: 0;
    padding: 0
}

.swiper-pagination-clickable .swiper-pagination-bullet {
    cursor: pointer
}

.swiper-pagination-bullet:only-child {
    display: none !important
}

.swiper-pagination-bullet-active {
    background: var(--swiper-theme-color);
    background: var(--swiper-pagination-color, var(--swiper-theme-color));
    opacity: 1;
    opacity: var(--swiper-pagination-bullet-opacity, 1)
}

.swiper-pagination-vertical.swiper-pagination-bullets, .swiper-vertical > .swiper-pagination-bullets {
    left: auto;
    left: var(--swiper-pagination-left, auto);
    right: 8px;
    right: var(--swiper-pagination-right, 8px);
    top: 50%;
    transform: translate3d(0, -50%, 0)
}

.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
    display: block;
    margin: 6px 0;
    margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0
}

.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    top: 50%;
    transform: translateY(-50%);
    width: 8px
}

.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    display: inline-block;
    transition: transform .2s, top .2s
}

.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 4px;
    margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px)
}

.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap
}

.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    transition: transform .2s, left .2s
}

.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    transition: transform .2s, right .2s
}

.swiper-pagination-fraction {
    color: inherit;
    color: var(--swiper-pagination-fraction-color, inherit)
}

.swiper-pagination-progressbar {
    background: #00000040;
    background: var(--swiper-pagination-progressbar-bg-color, #00000040);
    position: absolute
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background: var(--swiper-theme-color);
    background: var(--swiper-pagination-color, var(--swiper-theme-color));
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transform: scale(0);
    transform-origin: left top;
    width: 100%
}

.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    transform-origin: right top
}

.swiper-horizontal > .swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal, .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite, .swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
    height: 4px;
    height: var(--swiper-pagination-progressbar-size, 4px);
    left: 0;
    top: 0;
    width: 100%
}

.swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-vertical, .swiper-vertical > .swiper-pagination-progressbar {
    height: 100%;
    left: 0;
    top: 0;
    width: 4px;
    width: var(--swiper-pagination-progressbar-size, 4px)
}

.swiper-pagination-lock {
    display: none
}

#lore .swiper {
    margin-bottom: -10px;
    margin-left: calc(var(--global-padding) * -1);
    margin-right: calc(var(--global-padding) * -1);
    padding-bottom: 40px;
    padding-left: var(--global-padding);
    padding-right: var(--global-padding)
}

#lore .swiper-slide {
    display: flex;
    height: auto
}

.lore-card {
    align-items: center;
    background-color: var(--dtree);
    color: var(--primary);
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    padding: var(--global-padding);
    position: relative;
    text-align: center;
    width: 100%
}

.lore-card > * {
    position: relative;
    z-index: 1
}

#lore .swiper-slide:nth-child(2n) .lore-card:after {
    right: 10%;
    top: 10%
}

#lore .swiper-slide:nth-child(odd) .lore-card:after {
    right: 40%;
    top: 120%
}

.lore-card:after {
    background-color: var(--tree);
    border-radius: 100%;
    content: "";
    display: block;
    height: 73%;
    position: absolute;
    transform: translate(50%, -50%);
    transition: all .2s ease-in-out;
    width: 40%;
    z-index: 0
}

#lore .swiper-slide:first-child h3 > span:first-child {
    transform: scaleX(1.45)
}

#lore .swiper-slide:nth-child(2) h3 > span:last-child {
    transform: scaleX(1.05)
}

#lore .swiper-slide:nth-child(4) h3 > span:last-child {
    transform: scaleX(1.46)
}

#lore .swiper-slide:nth-child(5) h3 > span:last-child {
    transform: scaleX(1.22)
}

#lore .swiper-slide:nth-child(6) h3 > span:last-child {
    transform: scaleX(1.75)
}

.lore-card h3 {
    color: inherit;
    margin-bottom: calc(var(--gutter) / 2);
    text-transform: uppercase
}

.lore-card h3 > span {
    display: block
}

.lore-card figure {
    margin-bottom: var(--global-padding)
}

.lore-card img {
    display: block
}

#lore .swiper-horizontal > .swiper-pagination-bullets {
    bottom: 0
}

.swiper-pagination-bullet {
    background-color: var(--dtree);
    border: 2px solid var(--border);
    height: 20px;
    width: 20px
}

.swiper-pagination-bullet-active {
    background-color: var(--yellow)
}

@media (min-width: 1024px) {
    #lore .swiper {
        margin-bottom: -30px;
        margin-left: auto;
        margin-right: auto;
        padding-bottom: 60px;
        padding-left: 0;
        padding-right: 0
    }

    .lore-card {
        padding: calc(var(--global-padding) * 2)
    }
}

.wcomp .scene {
    background: #61d8ff;
    background: linear-gradient(0deg, #61d8ff, #86f2be);
    position: relative
}

.wcomp .wr {
    margin-left: -70%;
    margin-right: -70%;
    width: 240%
}

.wcomp .cls {
    bottom: 20%;
    left: 0;
    overflow: hidden;
    position: absolute;
    width: 100%;
    z-index: 0
}

.wcomp .cls:before {
    content: "";
    display: block;
    padding-bottom: 52.86092%;
    position: relative;
    width: 100%
}

.wcomp .cl {
    animation: clouds 30s linear infinite;
    background: url(../media/clouds-monitor.42efb0e821cadecc60a1.webp);
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.wcomp .bg {
    position: relative;
    z-index: 1
}

.ape {
    display: block;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(9%, 87%);
    width: 37.6%;
    z-index: 3
}

.ape:before {
    content: "";
    display: block;
    padding-bottom: 33.79501%;
    position: relative;
    width: 100%
}

.ape a {
    align-items: center;
    animation: btn 1s ease-in-out infinite;
    background-color: var(--raydium);
    border: 2px solid #fff0;
    border-radius: var(--small-radius);
    color: #0b1022;
    display: flex;
    font-size: 3.67vw;
    height: 100%;
    justify-content: center;
    left: 0;
    letter-spacing: .2vw;
    position: absolute;
    text-decoration: none;
    top: 0;
    transform: perspective(50vw) rotateX(22deg) rotateY(-2deg);
    transition: all .3s ease-in-out;
    width: 100%
}

@keyframes btn {
    0%, to {
        border: 2px solid #fff0
    }
    50% {
        border: 2px solid #fff
    }
}

.ape a:hover {
    letter-spacing: 0;
    transform: perspective(50vw) rotateX(20deg) rotateY(-10deg);
    transition: all .2s ease-in-out
}

.ape a span {
    transform: scaleY(2.33);
    transition: all .3s ease-in-out
}

.ape a:hover span {
    transform: scaleY(2.63);
    transition: all .2s ease-in-out
}

.hands {
    left: 50%;
    pointer-events: none;
    transform: translateX(-50%);
    width: 135%;
    z-index: 2
}

.hands, .hands > * {
    bottom: 0;
    display: block;
    position: absolute
}

.hands .right {
    animation: rightHandTyping 1s infinite;
    right: 0;
    width: 33%
}

@keyframes rightHandTyping {
    0%, to {
        transform: translateY(0)
    }
    10%, 30% {
        transform: translateY(0)
    }
    20% {
        transform: translateY(10%)
    }
    40% {
        transform: translateY(10%)
    }
    50%, to {
        transform: translateY(0)
    }
}

.hands .left {
    animation: leftHandTyping 1s infinite;
    left: 0;
    width: 34%
}

@keyframes leftHandTyping {
    0%, to {
        transform: translateY(0)
    }
    10% {
        transform: translateY(12%)
    }
    20% {
        transform: translateY(0)
    }
    30% {
        transform: translateY(12%)
    }
    40%, to {
        transform: translateY(0)
    }
}

.wcomp .rocket {
    animation: rocket 2s ease-in-out infinite;
    bottom: 12%;
    left: 81.6%;
    width: 16%;
    z-index: 2
}

@media (min-width: 768px) {
    .ape {
        width: 34.6%
    }

    .ape a {
        transform: perspective(50vw) rotateX(7deg) rotateY(-2deg)
    }
}

@media (min-width: 1024px) {
    .wcomp .wr {
        margin-left: auto;
        margin-right: auto;
        width: 100%
    }

    .hands {
        width: 63%
    }

    .wcomp .rocket {
        bottom: 7%;
        left: 2.6%;
        width: 11%
    }

    .ape {
        width: 15.6%
    }

    .ape a {
        font-size: 1.37vw;
        transform: perspective(50vw) rotateX(22deg) rotateY(-2deg)
    }
}

@media (min-width: 1921px) {
    .ape a {
        font-size: 26px
    }
}

.ccomp .scene {
    position: relative
}

.ccomp .bars {
    bottom: 100%;
    left: 0;
    position: absolute;
    width: 100%
}

.ani-bars {
    animation: bars 2s ease-in-out infinite;
    background-color: #24d1f5;
    bottom: -1px;
    height: 110px;
    position: absolute;
    right: 22%;
    width: 1%
}

@keyframes bars {
    0%, to {
        height: 110px
    }
    50% {
        height: 10px
    }
}

.mtime {
    margin-bottom: calc(var(--v-large) * 2.3);
    margin-top: calc(var(--v-large) * 2.1)
}

.mtime .heading h2 {
    font-size: 18vw;
    letter-spacing: .44vw;
    line-height: 1;
    transform: scaleY(1.5)
}

.mtime .heading h2 a {
    color: var(--primary);
    text-decoration: none
}

.mtime .heading.tmp h2 {
    font-size: 12.9vw;
    text-align: center;
    transform: scaleY(2.1);
    white-space: nowrap
}

.mtime .heading .wider {
    display: inline-flex;
    margin-left: 6vw;
    margin-right: 6vw;
    transform: scaleX(1.4)
}

@media (min-width: 768px) {
    .mtime .heading.tmp h2 {
        font-size: 13.9vw
    }
}

@media (min-width: 1024px) {
    .mtime .heading h2 {
        font-size: 20.3vw
    }

    .mtime .heading.tmp h2 {
        font-size: 14.4vw
    }

    .ani-bars {
        height: 360px
    }

    @keyframes bars {
        0%, to {
            height: 360px
        }
        50% {
            height: 10px
        }
    }
}

@media (min-width: 1441px) {
    .mtime .heading h2 {
        font-size: 18vw
    }

    .mtime .heading.tmp h2 {
        font-size: 13.1vw
    }
}

@media (min-width: 1921px) {
    .mtime .heading h2 {
        font-size: 346px
    }

    .mtime .heading.tmp h2 {
        font-size: 243px
    }
}

.alert {
    display: flex;
    flex-flow: column nowrap;
    opacity: 0;
    position: fixed;
    transition: all .2s ease-in-out .1s;
    z-index: 999
}

.alert.show {
    opacity: 1
}

.alert.fright {
    align-items: flex-end;
    bottom: var(--gutter);
    right: var(--gutter);
    transform: translateX(calc(var(--gutter) + 100%))
}

.alert.fright.show {
    transform: translateX(0)
}

.alert.fright .speech {
    margin-right: 40px
}

.alert .speech {
    align-items: center;
    background-image: url(../media/speechcloud.5555d15f1524e10c95ec.webp);
    display: flex;
    padding: 30px 45px;
    position: relative;
    width: 300px
}

.alert .speech, .alert .speech:before {
    background-repeat: no-repeat;
    background-size: 100% 100%
}

.alert .speech:before {
    background-image: url(../media/directional.0668a62abb2b5beab7d9.webp);
    content: "";
    display: block;
    height: 35px;
    position: absolute;
    right: 0;
    top: 100%;
    width: 75.5px
}

.alert .ava {
    margin-top: 14px
}

.alert .ava img {
    display: block
}

.alert .closer {
    align-items: center;
    background: var(--dtree);
    border: 1px solid var(--negative);
    border-radius: 50%;
    color: var(--yellow);
    display: flex;
    height: 32px;
    justify-content: center;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    transition: all .2s ease-in-out;
    width: 32px
}

.alert .closer span {
    display: block;
    line-height: 1
}

.alert .closer:hover {
    transform: scale(.9);
    transition: all .3s ease-in-out
}

.alert p {
    color: var(--negative);
    font-size: 16px;
    width: 100%
}

.alert .btn {
    display: inline-flex;
    margin-top: calc(var(--gutter) / 2);
    z-index: 2
}

#generator {
    margin-top: var(--v-small);
    position: relative;
    z-index: 3
}

.generator .scene {
    align-self: flex-end;
    justify-self: flex-end
}

.uploader .scene {
    align-items: flex-end;
    display: flex
}

.uploader .uptext .desc {
    align-items: center;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center
}

.img-editor, .uploader {
    width: 100%
}

.uploader {
    align-items: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background: #61d8ff;
    background: linear-gradient(0deg, #61d8ff, #86f2be);
    cursor: pointer;
    display: flex;
    justify-content: center;
    margin-left: var(--gutter);
    margin-right: var(--gutter);
    min-height: 480px;
    padding-top: var(--gutter);
    position: relative;
    text-align: center;
    transition: all .2s ease-in-out
}

.uploader.window {
    overflow: hidden
}

.uploader.pattern:before {
    z-index: 0
}

.uploader.image-loaded {
    align-items: flex-start;
    margin-bottom: -420px;
    transform: scale(.95)
}

.uploader.image-loaded:hover {
    margin-bottom: 0
}

.uploader img {
    position: relative;
    transition: all .2s ease-in-out;
    z-index: 2
}

.uploader:hover {
    transform: scale(.989) rotate(-1deg);
    transition: all .3s ease-in-out
}

.uploader:hover .uploadimg {
    transform: scale(.95) rotate(1deg) translateY(-10px);
    transition: all .3s ease-in-out
}

.uploader .uptext {
    align-self: stretch;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    transition: all .2s ease-in-out;
    z-index: 2
}

.uploader .uptext img {
    display: block;
    margin-left: auto;
    margin-right: auto
}

.uploader.image-loaded .uptext .desc {
    justify-content: flex-start
}

.uploader.image-loaded:hover .uptext {
    transform: none
}

.uploader.image-loaded .uptext .uploadimg {
    max-width: 140px
}

.uploader.image-loaded:hover .uptext .uploadimg {
    max-width: 500px
}

.uploader p {
    color: var(--primary)
}

.uploader .inst {
    text-transform: uppercase
}

.uploader p small {
    color: var(--primary);
    font-size: 14px
}

.uploader .error-message {
    align-self: flex-end;
    background-color: var(--alert);
    bottom: 0;
    font-size: 14px;
    left: 0;
    padding: var(--btn-tiny-padding);
    transform: perspective(98px) rotateY(2deg) rotateX(-2deg) rotate(5deg) translateX(6px) scale(1)
}

.draggable {
    left: 0;
    object-fit: contain;
    pointer-events: none;
    position: absolute;
    top: 0
}

.dragtxt {
    position: relative
}

.dragtxt [type=text] {
    all: unset;
    background-color: initial;
    color: inherit;
    display: block;
    font-size: inherit;
    pointer-events: auto
}

.dragtxt:hover .ccount {
    opacity: 1;
    transition: all .3s ease-in-out
}

.dragtxt .ccount {
    background-color: var(--primary);
    border-radius: 4px;
    bottom: calc(100% + 5px);
    color: var(--negative) !important;
    cursor: move;
    display: block;
    font-size: 12px !important;
    left: 50%;
    opacity: .4;
    padding: 5px 7px;
    pointer-events: auto;
    position: absolute;
    transform: translateX(-50%);
    transition: all .2s ease-in-out;
    z-index: 2
}

.draggable:active .bbox .frame, .draggable:focus .bbox .frame, .draggable:hover .bbox .frame {
    opacity: 1;
    transition: all 0ms ease-in-out
}

.draggable * {
    -webkit-user-select: none;
    user-select: none
}

.draggable img {
    cursor: grab;
    display: block;
    height: 100%;
    object-fit: contain;
    pointer-events: auto;
    width: 100%
}

.bbox {
    top: 0
}

.bbox, .bbox .frame {
    height: 100%;
    left: 0;
    position: absolute;
    width: 100%
}

.bbox .frame {
    border: 2px solid var(--blue);
    opacity: .7;
    transition: all .2s ease-in-out
}

.frame .sq {
    display: block;
    height: 6px;
    position: absolute;
    width: 100%
}

.frame .sq:after, .frame .sq:before {
    background-color: var(--primary);
    border: 2px solid var(--blue);
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    width: 6px
}

.frame .sq:before {
    left: 0;
    transform: translateX(-50%)
}

.frame .sq:after {
    right: 0;
    transform: translateX(50%)
}

.frame .sq:first-child {
    top: 0;
    transform: translateY(-50%)
}

.frame .sq:nth-child(2) {
    bottom: 0;
    transform: translateY(50%)
}

.dragrot, .dragscale, .moptions {
    align-items: center;
    background-color: var(--primary);
    border-radius: 4px;
    display: flex;
    justify-content: center;
    pointer-events: all;
    position: absolute;
    width: 48px;
    z-index: 2
}

.fsizer [type=number] {
    all: unset;
    -webkit-appearance: none;
    color: var(--negative);
    font-size: 18px;
    height: 28px;
    text-align: center;
    width: 28px
}

.fsizer [type=number]::-webkit-inner-spin-button, .fsizer [type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.fsizer [type=number] {
    -moz-appearance: textfield
}

.dragscale {
    bottom: 0
}

.dragrot, .dragscale {
    cursor: nwse-resize;
    height: 48px;
    right: 0
}

.dragrot {
    top: 0
}

.moptions {
    left: 0;
    padding: 5px 0;
    top: 50%
}

.moptions ul {
    display: flex;
    flex-flow: column;
    gap: 10px
}

.moptions ul li {
    align-items: center;
    display: flex;
    justify-content: center;
    text-align: center
}

.moptions ul li [data-ico] {
    cursor: pointer;
    transition: all .2s ease-in-out
}

.moptions ul li:hover [data-ico] {
    transform: scale(1.1);
    transition: all .3s ease-in-out
}

.moptions [type=color] {
    height: 28px;
    width: 28px
}

.dragscale [data-ico] {
    transition: all .2s ease-in-out
}

.dragscale:hover [data-ico] {
    transform: scale(1.1);
    transition: all .3s ease-in-out
}

.genarea {
    align-items: stretch;
    background-color: var(--primary);
    flex-flow: row wrap;
    justify-content: space-between;
    margin-left: var(--gutter);
    margin-right: var(--gutter)
}

.genarea, .img-editor {
    display: flex;
    z-index: 2
}

.img-editor {
    align-items: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    justify-content: center
}

.img-editor .canvas {
    display: block;
    position: relative;
    width: 100%
}

.img-editor.pfp .canvas {
    max-width: 760px
}

.img-editor .canvas img {
    width: 100%
}

.img-editor.pfp .canvas img:not(.bg-l) {
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.img-editor .base {
    display: block
}

.customisations {
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: var(--gutter)
}

.tabs {
    align-items: center;
    border: 1px solid var(--negative);
    border-radius: var(--large-radius);
    color: var(--tree);
    display: flex;
    font-size: 12px;
    justify-content: space-between;
    line-height: 1;
    margin-bottom: var(--gutter);
    text-transform: uppercase
}

.pfp .tabs {
    overflow: auto
}

.tabs-title span {
    border: 1px solid #0000;
    border-radius: var(--large-radius);
    cursor: pointer;
    display: block;
    padding: var(--btn-tiny-padding)
}

.tabs-title.is-active span {
    background: var(--dtree);
    border-color: var(--negative);
    color: var(--yellow)
}

.tabs-panel {
    box-sizing: border-box;
    display: flex;
    flex-flow: row nowrap;
    gap: 5px;
    height: 0;
    margin: -16px -16px -32px;
    opacity: 0;
    overflow: auto;
    padding: 16px;
    pointer-events: none;
    transition: opacity .5s ease
}

.tabs-panel.hidden {
    display: none
}

.tabs-panel.is-active {
    height: auto;
    opacity: 1;
    pointer-events: auto
}

.meme-options {
    background-color: var(--primary);
    border-top: 1px solid var(--negative);
    position: relative;
    width: 100%;
    z-index: 10
}

.meme-options label {
    aspect-ratio: 1/1;
    background-color: rgba(var(--primary-rgb), .5);
    flex: none;
    width: calc(33% - 3.75px)
}

.meme-options label [data-ico], .meme-options label img {
    display: block;
    position: absolute;
    transform: translate(-50%, -50%)
}

.meme-options label [data-ico] {
    left: 0;
    opacity: 0;
    top: 0
}

.meme-options label img {
    height: calc(100% - 10px);
    left: 50%;
    object-fit: contain;
    opacity: .65;
    top: 50%;
    transition: all .2s ease-in-out;
    width: calc(100% - 10px)
}

.meme-options [type=checkbox] {
    display: none
}

.meme-options label [type=checkbox]:checked ~ [data-ico], .meme-options label [type=checkbox]:checked ~ img {
    opacity: 1
}

.meme-options label {
    cursor: pointer;
    display: block;
    position: relative;
    transition: all .2s ease-in-out
}

.slick-slide > div {
    display: flex
}

.meme-options label:before {
    background-color: #f2e9d980;
    border: 1px solid var(--negative);
    border-radius: var(--small-radius);
    box-sizing: border-box;
    content: "";
    display: block;
    padding-bottom: 100%;
    position: relative;
    width: 100%
}

.meme-options label:hover {
    transform: scale(.95);
    transition: all .3s ease-in-out
}

.btns {
    margin-top: var(--v-small);
    padding-bottom: calc(var(--gutter) / 2);
    padding-top: calc(var(--gutter) / 2);
    width: 100%;
    z-index: 2
}

.btns, .srcpack {
    display: flex;
    justify-content: center
}

.srcpack {
    align-items: center;
    background-color: var(--border);
    border-radius: var(--large-radius);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    color: var(--text-blue);
    flex-flow: row wrap;
    gap: var(--gutter);
    margin-left: var(--gutter);
    margin-right: var(--gutter);
    margin-top: calc((var(--gutter) / 1) * -2);
    padding: calc(var(--gutter) * 3) var(--gutter) calc(var(--gutter) / 2) var(--gutter);
    text-align: center
}

.srcpack small {
    display: block;
    font-size: 14px;
    line-height: 1.3
}

.srcpack br {
    display: none
}

.srcpack .cnt {
    max-width: 640px
}

.thb .opts {
    bottom: 0;
    display: block;
    gap: 7px;
    left: 50%;
    position: absolute;
    transform: translateX(-50%)
}

.thb .opts ul {
    align-items: center;
    background-color: var(--primary);
    border: 1px solid var(--border);
    border-radius: var(--small-radius);
    display: flex;
    justify-content: center;
    padding: 2px
}

.thb .opts li {
    border-radius: 50%;
    height: 20px;
    opacity: .5;
    padding: 4px;
    transition: all .2s ease-in-out;
    width: 20px
}

.thb .opts li:hover {
    opacity: 1
}

.thb .opts li.is-active {
    opacity: 1;
    padding: 0
}

.thb .opts span {
    border-radius: 50%;
    display: block;
    height: 100%;
    width: 100%
}

.thb .opts .black {
    background-color: var(--negative)
}

.thb .opts .yellow {
    background-color: #f7d64a
}

.thb .opts .green {
    background-color: #aeea4c
}

.thb .opts .teal {
    background-color: var(--h-teal)
}

.thb .opts .blue {
    background-color: #5ef0ff
}

.thb .opts .red {
    background-color: #ff5059
}

.thb .opts .purple {
    background-color: #764de8
}

.thb .opts .navi {
    background-color: #3a505d
}

.thb .opts .dblue {
    background: #001273;
    background: linear-gradient(90deg, #001273, #019e97 50%, #001273)
}

.thb .opts .grad {
    background: #00ff91;
    background: linear-gradient(90deg, #00ff91, #ffe600 25%, #ff4e00 50%, #ffe600 75%, #00ff91)
}

.thb .opts .brown {
    background-color: #5b4c39
}

@media (max-width: 767px) {
    .btns .btn {
        font-size: var(--btn-small);
        padding: var(--btn-small-padding)
    }
}

@media (min-width: 768px) {
    .uploader.image-loaded {
        align-items: center;
        margin-bottom: -413px
    }

    .srcpack {
        justify-content: space-between;
        margin-top: calc((var(--gutter) / 2) * -1);
        padding: var(--gutter) var(--gutter) calc(var(--gutter) / 2) var(--gutter);
        text-align: left
    }

    .srcpack br {
        display: block
    }
}

@media (min-width: 1024px) {
    .btns {
        margin-top: 0
    }

    #memer .gradfill {
        font-size: 12.8vw
    }

    #memer .gradfill:after {
        text-shadow: -6px 6.5px 0 var(--negative)
    }

    .img-editor {
        max-width: 1080px
    }

    .img-editor, .meme-options {
        flex: 1 1
    }

    .uploader {
        margin-bottom: var(--v-large)
    }

    .uploader.image-loaded {
        margin-bottom: -480px
    }

    .meme-options {
        border-left: 5px solid var(--negative);
        border-top: none;
        max-width: 350px
    }

    .meme-options.pfp {
        max-width: 437px
    }

    .pfp .tabs {
        flex-flow: row wrap;
        justify-content: center
    }

    .genarea {
        min-width: 1000px
    }

    .tabs-panel {
        flex-flow: row wrap;
        max-height: 533.6px;
        overflow: hidden;
        overflow-y: auto
    }

    .meme-options label {
        width: calc(25% - 3.75px)
    }

    .meme-options.pfp label {
        width: calc(33% - 3px)
    }

    .srcpack {
        margin-top: calc((var(--v-large) + var(--gutter) / 2) * -1)
    }

    .genarea + .srcpack {
        margin-top: calc((var(--gutter) / 2) * -1)
    }
}

@media (min-width: 1921px) {
    #memer .gradfill {
        font-size: 246px
    }
}

.widgets .options {
    align-items: center;
    border: 2px solid var(--border);
    border-radius: var(--large-radius);
    display: flex;
    justify-content: center;
    overflow: hidden;
    z-index: 2
}

.widgets .opt, .widgets .options {
    background-color: var(--border);
    position: relative
}

.widgets .opt {
    color: rgba(var(--primary-rgb), .5);
    cursor: pointer;
    flex: 1 1;
    font-size: 5vw;
    text-align: center;
    transition: all .2s ease-in-out
}

.widgets .opt > span {
    transform: scaleY(1.6)
}

.widgets .opt > span, .widgets [data-ico] {
    display: block;
    transition: all .2s ease-in-out
}

.widgets [data-ico] {
    height: 16px;
    opacity: 0;
    position: absolute;
    right: 5%;
    top: 50%;
    transform: translateY(-50%) scale(0);
    width: 16px;
    z-index: 2
}

.widgets .opt:hover {
    color: rgba(var(--primary-rgb), 1);
    transition: all .3s ease-in-out
}

.widgets .opt:hover > span {
    transform: scaleY(1.45);
    transition: all .3s ease-in-out
}

.widgets .opt.is-active {
    background-color: var(--dtree);
    color: var(--yellow)
}

.widgets .opt.is-active > span {
    transform: scaleY(1.45)
}

.widgets .opt.is-active [data-ico] {
    opacity: 1;
    transform: translateY(-50%) scale(1);
    transition: all .3s ease-in-out
}

.widgets .opt.is-active:hover {
    color: var(--yellow)
}

@media (min-width: 768px) {
    .widgets [data-ico] {
        height: 32px;
        width: 32px
    }
}

@media (min-width: 1024px) {
    .widgets .options {
        border-width: 5px
    }

    .widgets .opt {
        font-size: 5vw
    }

    .widgets [data-ico] {
        height: 2.5vw;
        width: 2.5vw
    }
}

@media (min-width: 1921px) {
    .widgets .opt {
        font-size: 97px
    }

    .widgets [data-ico] {
        height: 48px;
        width: 48px
    }
}

#materials {
    align-items: center;
    display: flex;
    flex-flow: row wrap;
    gap: var(--gutter);
    justify-content: center;
    margin-top: var(--v-large)
}

#materials .ccomp, #materials .ccomp img {
    width: 100%
}

#materials .ccomp a {
    display: block;
    transition: all .2s ease-in-out
}

#materials .ccomp a:hover {
    transform: scale(1.05);
    transition: all .3s ease-in-out
}

#materials a .overl {
    font-size: 2.5vw
}

#materials a:hover .overl {
    transform: translate(-50%, -50%) scaleY(1.75)
}

.multivid video {
    display: block;
    margin: 0;
    width: 100%
}

.upsbanner {
    align-items: center;
    background-color: var(--dtree);
    border: 2px solid var(--border);
    border-bottom: none;
    border-radius: var(--large-radius) var(--large-radius) 0 0;
    bottom: 0;
    display: flex;
    flex-flow: row wrap;
    gap: var(--gutter);
    justify-content: center;
    padding-left: var(--global-padding);
    padding-right: var(--global-padding);
    position: fixed;
    transition: all .2s ease-in-out;
    z-index: 10
}

.upsbanner:hover {
    transition: all .3s ease-in-out
}

.upsbanner:hover .txt-cnt p {
    opacity: 1;
    transition: opacity .3s ease-in-out
}

.upsbanner:hover .btn {
    opacity: 1;
    transition: all .3s ease-in-out
}

.upsbanner.center {
    left: 50%;
    transform: translateX(-50%) translateY(80%)
}

.upsbanner.center:hover {
    transform: translateX(-50%) translateY(0)
}

.upsbanner {
    align-self: flex-end
}

.upsbanner img {
    display: block
}

.upsbanner .txt-cnt {
    color: var(--primary);
    padding-top: var(--global-padding);
    text-align: center
}

.upsbanner .txt-cnt p {
    opacity: 0;
    transition: opacity .2s ease-in-out
}

.upsbanner .btn {
    opacity: 0;
    transition: all .2s ease-in-out
}

.arthand {
    order: 3;
    pointer-events: none
}

.arthand img {
    animation: arthand 2s ease-in-out infinite;
    margin-top: -30px;
    transform: translate(0) rotate(0deg)
}

@keyframes arthand {
    0%, to {
        transform: translate(0) rotate(0deg)
    }
    50% {
        transform: translate(-15%, 15%) rotate(8deg)
    }
}

.arthand img {
    max-width: 250px
}

@media (min-width: 1024px) {
    .upsbanner {
        border-width: 5px;
        flex-flow: row nowrap;
        justify-content: flex-start
    }

    .upsbanner .txt-cnt {
        max-width: 260px;
        padding-top: 0;
        text-align: left
    }

    .arthand {
        order: 0
    }

    .upsbanner.center {
        transform: translateX(-50%) translateY(64%)
    }
}

.marquee {
    display: flex;
    flex-direction: row;
    font-size: calc(var(--paragraph) * 2);
    overflow: hidden;
    position: relative;
    width: 100%
}

.marquee.bordered {
    background-color: var(--border);
    color: var(--primary);
    font-family: var(--heading);
    font-size: 18px;
    padding-bottom: 5px;
    padding-top: 5px;
    text-transform: uppercase
}

.marquee-el {
    align-items: center;
    animation: scroll 100s linear 0s infinite;
    animation-delay: 0s;
    animation-play-state: running;
    display: flex;
    flex: 0 0 auto;
    flex-direction: row;
    min-width: 100%;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    z-index: 1
}

.marquee-right .marquee-el {
    animation-direction: normal
}

.marquee-left .marquee-el {
    animation-direction: reverse
}

.marquee.bordered p span {
    -webkit-text-fill-color: #0000;
    background: #61d8ff;
    background: linear-gradient(90deg, #61d8ff 0, #86f2be);
    -webkit-background-clip: text;
    padding: 0 7px
}

.marquee-el p {
    transform: scaleY(1.8)
}

@keyframes scroll {
    0% {
        transform: translateX(0)
    }
    to {
        transform: translateX(-100%)
    }
}

.pop-over {
    background-color: var(--dtree);
    color: var(--primary)
}

.pop-over a, .pop-over a:visited {
    color: inherit
}

.pop-over a:hover {
    text-decoration: none
}

#contest > section {
    align-items: flex-start;
    display: flex;
    flex-flow: row wrap;
    justify-items: flex-start
}

#contest > section:not(:last-child) {
    border-bottom: 1px dashed var(--border)
}

#contest > section > * {
    padding: var(--global-padding)
}

#contest .fieldset, #contest header {
    width: 100%
}

#contest header p {
    max-width: 350px
}

#contest .fieldset > div {
    align-items: center;
    display: flex;
    flex-flow: row wrap;
    gap: var(--gutter);
    justify-items: flex-start
}

#contest .fieldset label {
    position: relative;
    width: 100%
}

#contest .fieldset label span {
    background-color: var(--border);
    border-radius: 10px 10px 0 0;
    display: inline-flex;
    font-size: 12px;
    padding: 5px 6px;
    pointer-events: none;
    position: relative;
    text-transform: uppercase;
    transform: translate(calc(var(--gutter) / 2 - 6px), 50%);
    z-index: 2
}

#contest input {
    all: unset
}

#contest [type=email], #contest [type=text], #contest [type=url] {
    background-color: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--small-radius);
    box-sizing: border-box;
    color: var(--yellow);
    cursor: pointer;
    display: block;
    padding: calc(var(--gutter) / 2);
    transition: all .2s ease-in-out;
    width: 100%
}

#contest input[type=email]:-webkit-autofill {
    -webkit-text-fill-color: var(--yellow);
    background-color: var(--border) !important;
    box-shadow: 0 0 0 1000px var(--border) inset !important;
    -webkit-transition: background-color 5000s ease-in-out 0s, transform .2s ease-in-out;
    transition: background-color 5000s ease-in-out 0s, transform .2s ease-in-out
}

#contest [type=email]:hover, #contest [type=text]:hover, #contest [type=url]:hover {
    transform: scaleY(1.1)
}

#contest .sub {
    justify-content: center
}

#contest .sub .btn {
    font-size: var(--btn-huge);
    padding: var(--btn-large-padding)
}

.amlink {
    align-items: center;
    border: 1px solid var(--border);
    border-radius: var(--small-radius);
    color: var(--border);
    cursor: pointer;
    display: flex;
    justify-content: center;
    margin-top: var(--v-small);
    padding: calc(var(--gutter) / 2)
}

.amlink > span {
    display: block;
    transition: all .2s ease-in-out
}

.amlink:hover > span {
    transform: scale(1.1, 1.4);
    transition: all .3s ease-in-out
}

#thanks {
    align-items: center;
    display: flex;
    justify-content: center;
    padding: calc(var(--global-padding) * 2);
    text-align: center
}

#thanks h2 {
    margin-bottom: calc(var(--v-small) * 2);
    pointer-events: none;
    text-transform: uppercase
}

#thanks h2 span {
    display: block;
    font-size: 10vw;
    line-height: 1
}

#thanks h2 span:last-child {
    transform: scaleY(1.5)
}

@media (max-width: 1023px) {
    #contest header + .fieldset {
        padding-top: 0
    }
}

@media (min-width: 1024px) {
    #contest > section {
        align-items: stretch
    }

    #contest > section > * {
        padding: calc(var(--global-padding) * 2)
    }

    #contest header {
        border-right: 1px dashed var(--border);
        padding-right: calc(var(--gutter) / 2);
        width: 33.33333%
    }

    #contest .fieldset {
        width: 66.66667%
    }

    #contest .fieldset label {
        flex: 1 1;
        position: relative
    }

    #contest .sub .btn {
        font-size: 5.2vw;
        padding: 1vw 3vw
    }
}

@media (min-width: 1921px) {
    #thanks h2 span {
        font-size: 192px
    }

    #contest .sub .btn {
        padding: 19px 58px
    }
}

#artban {
    align-items: center;
    display: flex;
    flex-flow: row wrap;
    gap: var(--gutter);
    justify-content: center
}

#artban .ccomp, #artban .ccomp img {
    width: 100%
}

#artban .heading {
    margin-top: var(--v-large)
}

#artban .heading h2 {
    font-size: 7.61905vw;
    letter-spacing: .44vw;
    line-height: 1;
    transform: scaleY(1.5)
}

#artban .heading h2 a {
    color: var(--primary);
    text-decoration: none
}

.wrun .fr {
    background-color: #afe54c;
    color: var(--primary);
    padding-bottom: var(--v-large);
    padding-top: var(--v-large);
    text-shadow: 1px 1px 4px #00000040;
    text-transform: uppercase
}

.horsi {
    margin-bottom: -1vw;
    margin-right: 2vw;
    margin-top: -1vw;
    width: 16.5vw
}

.horsi img {
    animation: horseRide .6s ease-in-out infinite alternate;
    width: 100%
}

@keyframes horseRide {
    0% {
        transform: translateY(0) rotate(-2deg)
    }
    50% {
        transform: translateY(-10px) rotate(2deg)
    }
    to {
        transform: translateY(0) rotate(-2deg)
    }
}

.lbl {
    background-color: var(--dtree);
    border: 2px solid var(--border);
    border-radius: var(--small-radius);
    display: inline-flex;
    padding: 5px
}

.wrun .fr h4 {
    padding-left: var(--global-padding);
    padding-right: var(--global-padding);
    text-align: center
}

.wrun .marquee-el > div {
    align-items: center;
    display: flex;
    text-transform: uppercase
}

.wrun .item, .wrun .item figure {
    align-items: center;
    display: flex;
    justify-content: center
}

.wrun .item figure {
    height: 28vw;
    width: 28vw
}

.wrun .item figure img {
    width: 50%
}

.wrun .item span {
    display: block;
    font-size: 12.75vw;
    text-shadow: 1px 1px 4px #00000040;
    transform: scaleY(1.4)
}

.splitter {
    flex-flow: row wrap;
    gap: var(--gutter);
    margin-top: var(--v-large)
}

.splitter, .tripplet .ccomp {
    align-items: center;
    display: flex;
    justify-content: center
}

.tripplet .ccomp {
    background-color: var(--dtree);
    flex: calc(33.33333% - var(--gutter));
    flex-flow: column nowrap;
    padding-bottom: var(--global-padding);
    padding-top: var(--global-padding);
    text-align: center
}

.tripplet h3 {
    display: block;
    font-size: 6.5vw
}

.tripplet p {
    font-size: var(--enlarged)
}

.splitter figure {
    align-items: center;
    display: flex;
    justify-content: center
}

.splitter figure img {
    display: block
}

.messab .fr {
    background-color: #afe54c;
    padding: var(--global-padding)
}

.messab > .fr {
    background-image: url(../media/landscape-contest.0c8757b3e2291a9f193b.webp);
    background-repeat: no-repeat;
    background-size: 100% auto
}

.messab .heading, .messab > .fr {
    text-shadow: 1px 1px 4px #00000040
}

.messab .heading {
    align-items: center;
    display: flex;
    flex-flow: row wrap;
    font-size: 9.7vw;
    justify-content: center;
    text-transform: uppercase
}

.messab .heading .single {
    width: 100%
}

.messab .heading figure {
    align-items: center;
    display: flex;
    gap: calc(var(--gutter) / 2)
}

.messab .heading figure img {
    display: block
}

.messab > .fr > .txt-cnt {
    margin-bottom: var(--v-large);
    text-align: center;
    width: 100%
}

.rules {
    align-items: stretch;
    display: flex;
    flex-flow: row wrap;
    font-size: var(--enlarged);
    gap: var(--gutter);
    justify-content: center;
    max-width: 1150px;
    width: 100%
}

.rules .fr {
    background-color: var(--dtree);
    width: 100%
}

.rules .fr h3 {
    font-size: var(--h4);
    margin-bottom: calc(var(--gutter) / 2);
    text-transform: uppercase
}

.rules ul {
    list-style-type: disc;
    padding-left: 22px
}

.guide {
    align-items: center;
    display: flex;
    flex-flow: column nowrap
}

.guide > h4 {
    margin-bottom: var(--gutter);
    text-align: center
}

.instructions {
    display: flex;
    flex-flow: column nowrap;
    gap: var(--gutter);
    justify-content: center;
    margin-bottom: var(--gutter);
    max-width: 1150px;
    width: 100%
}

.instructions li {
    align-items: center;
    background-color: var(--dtree);
    border: 2px solid var(--border);
    border-radius: var(--large-radius);
    display: flex;
    flex-flow: row wrap;
    gap: var(--gutter);
    justify-content: space-between;
    padding: var(--global-padding);
    text-transform: uppercase
}

.instructions li h4 {
    flex: 1 1
}

.extrat {
    font-size: var(--enlarged);
    margin-top: var(--gutter)
}

@media (min-width: 768px) {
    .tripplet .ccomp {
        padding-bottom: calc(var(--global-padding) * 2);
        padding-top: calc(var(--global-padding) * 2)
    }

    .messab .fr {
        padding: calc(var(--global-padding) * 2)
    }

    .messab .heading {
        font-size: 11vw
    }

    .rules .fr {
        flex: calc(50% - var(--gutter))
    }
}

@media (min-width: 1024px) {
    #artban .heading h2 {
        font-size: 7.05882vw
    }

    .wrun .fr {
        padding-bottom: calc(var(--v-large) * 2);
        padding-top: calc(var(--v-large) * 2)
    }

    .wrun .item span {
        font-size: 6.35vw
    }

    .wrun .item figure {
        height: 12vw;
        width: 12vw
    }

    .tripplet h3 {
        font-size: 5.5vw
    }

    .messab .heading {
        font-size: 11.55vw
    }

    .messab > .fr > .txt-cnt {
        text-align: left;
        width: 75%
    }

    .instructions li {
        border-width: 5px;
        padding: calc(var(--global-padding) * 2)
    }

    .rules .fr h3 {
        font-size: var(--h3)
    }
}

@media (min-width: 1441px) {
    #artban .heading h2 {
        font-size: 6.58824vw
    }

    .wrun .item span {
        font-size: 5.35vw
    }

    .tripplet h3 {
        font-size: 5vw
    }

    .messab .heading {
        font-size: 11.2vw
    }

    .messab > .fr > .txt-cnt {
        width: 50%
    }
}

@media (min-width: 1921px) {
    #artban .heading h2 {
        font-size: 122.94118px
    }

    .wrun .item span {
        font-size: 103px
    }

    .wrun .item figure {
        height: 230px;
        width: 230px
    }

    .tripplet h3 {
        font-size: 95px
    }

    .messab .heading {
        font-size: 215px
    }
}

#gamer .fr {
    align-items: center;
    display: flex;
    justify-content: center
}

#gamer canvas {
    transform: translateZ(0);
    will-change: transform
}

#gamer .deepy {
    display: block;
    height: auto;
    margin: 0;
    padding: 0;
    width: 100%
}

.leaderboard {
    align-items: center;
    background-color: var(--border);
    border: 2px solid var(--border);
    border-radius: 0 0 var(--large-radius) var(--large-radius);
    border-top: none;
    color: var(--text-blue);
    display: flex;
    justify-content: center;
    margin-top: -50px;
    text-transform: uppercase
}

.leaderboard .panel {
    padding: calc(var(--global-padding) * 2 + 50px) calc(var(--global-padding) * 2) calc(var(--global-padding) * 2) calc(var(--global-padding) * 2)
}

.leaderboard h5 {
    margin-bottom: calc(var(--gutter) / 3);
    text-align: center
}

.stabs-nav .lbl, .year-tabs button {
    opacity: .5
}

.stabs-nav .lbl:hover, .year-tabs button:hover {
    opacity: .75
}

.stabs-nav .lbl.is-active, .year-tabs button.is-active {
    opacity: 1
}

.stabs-nav, .year-tabs {
    gap: 5px;
    margin-bottom: calc(var(--gutter) / 2)
}

.gtable, .stabs-nav, .year-tabs {
    align-items: center;
    display: flex;
    justify-content: center
}

.gtable {
    flex-flow: row wrap;
    gap: 7px
}

.gtable li:first-child {
    border: 1px solid var(--yellow);
    box-shadow: 0 0 17px #f7d85733;
    flex: 100% 1
}

.gtable li:first-child .gscore {
    font-size: 200%
}

.gtable li {
    align-items: center;
    background-color: #7267494d;
    border-radius: var(--small-radius);
    display: flex;
    gap: var(--gutter);
    justify-content: space-between;
    padding: calc(var(--gutter) / 2) var(--gutter);
    width: 100%
}

.gtable .pl {
    border-right: 2px solid var(--border);
    width: 50px
}

.gtable .gscore {
    color: var(--yellow);
    font-size: 150%
}

.gtable .gname {
    max-width: 400px;
    overflow: hidden;
    text-overflow: ellipsis
}

.eui, .sui {
    align-items: center;
    display: flex;
    flex-flow: row wrap;
    height: 100%;
    justify-content: center;
    left: 0;
    position: absolute;
    text-align: center;
    top: 0;
    width: 100%
}

.eui h1, .sui h1 {
    pointer-events: none;
    text-transform: uppercase
}

.sui h1 {
    font-size: 9vw;
    margin-bottom: 3.3vw;
    transform: scaleY(2)
}

.sui h1 span {
    animation: rocket 2s ease-in-out infinite;
    display: block
}

.sui .frame {
    align-items: center;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center
}

.sui [type=text] {
    all: unset;
    background-color: var(--primary);
    border: 2px solid var(--border);
    border-radius: var(--small-radius);
    box-sizing: border-box;
    color: var(--negative);
    cursor: text;
    display: block;
    font-size: var(--h4);
    padding: calc(var(--gutter) / 2);
    text-transform: uppercase;
    transition: all .2s ease-in-out;
    width: 100%
}

.player-name {
    margin-bottom: var(--gutter);
    margin-top: var(--gutter);
    position: relative;
    width: 100%
}

.falert {
    background-color: var(--magenta);
    border-radius: var(--small-radius) var(--small-radius) 0 0;
    left: 50%;
    line-height: 1;
    padding: 5px 10px;
    position: absolute;
    text-align: center;
    top: 0;
    transform: translate(-50%, -100%)
}

.eui .btn, .sui .btn {
    box-sizing: border-box;
    font-size: 5vw;
    padding-left: 6.5vw;
    padding-right: 6.5vw
}

.eui .btn {
    margin-top: var(--gutter)
}

.eui h1 {
    font-size: 9.6vw
}

.eui h2 {
    font-size: 6.75vw
}

.hint {
    align-self: flex-end;
    background-color: #2d2824cc;
    border-radius: var(--small-radius) var(--small-radius) 0 0;
    bottom: 0;
    left: 50%;
    max-width: 288px;
    padding: var(--btn-small-padding);
    position: absolute;
    transform: translateX(-50%);
    width: 100%
}

.hint .highlight {
    color: var(--yellow);
    font-size: var(--enlarged)
}

.hint .desktop {
    display: none
}

.orientation-warning {
    align-items: center;
    background: var(--border);
    background: #2d2824d9;
    color: var(--text-blue);
    display: flex;
    flex-flow: column nowrap;
    font-size: 1.5rem;
    height: 100%;
    justify-content: center;
    left: 0;
    position: absolute;
    text-align: center;
    top: 0;
    width: 100%;
    z-index: 10
}

.orientation-warning p {
    padding: 20px;
    text-transform: uppercase
}

.orientation-warning .mobp {
    margin-left: calc(var(--global-padding) * -1);
    margin-right: calc(var(--global-padding) * -1);
    pointer-events: none
}

.orientation-warning img {
    animation: rotate 2s ease-in-out infinite;
    display: block;
    width: 100%
}

@keyframes rotate {
    0% {
        transform: rotate(0deg)
    }
    25% {
        transform: rotate(7deg)
    }
    50% {
        transform: rotate(0deg)
    }
    75% {
        transform: rotate(-7deg)
    }
    to {
        transform: rotate(0deg)
    }
}

@media (min-width: 640px) {
    .sui h1 {
        font-size: 7vw;
        margin-bottom: 1.3vw
    }

    .player-name {
        width: 75%
    }

    .eui .btn, .sui .btn {
        font-size: 3vw;
        padding-left: 4.5vw;
        padding-right: 4.5vw
    }

    .eui h1 {
        font-size: 6.4vw
    }

    .eui h2 {
        font-size: 4.5vw
    }
}

@media (min-width: 1024px) {
    .sui [type=text] {
        border-width: 2px
    }

    .leaderboard {
        border-width: 5px
    }

    .gtable li {
        width: auto
    }

    .hint .mob {
        display: none
    }

    .hint .desktop {
        display: inline
    }

    .eui h1 {
        font-size: var(--h1)
    }

    .eui h2 {
        font-size: var(--h2)
    }
}

@media (min-width: 1921px) {
    .sui h1 {
        font-size: 134px;
        margin-bottom: 25px
    }

    .sui .btn {
        font-size: 58px;
        padding-left: 80px;
        padding-right: 80px
    }
}

#error {
    align-items: center;
    display: flex;
    flex-flow: column nowrap;
    margin-top: var(--v-large);
    text-align: center
}

[data-displace] {
    display: inline-block;
    position: relative
}

[data-displace] span {
    display: block;
    width: 100%
}

[data-displace] > span {
    overflow: hidden;
    position: relative
}

[data-displace] > span > span {
    transition: all .2s ease-in-out
}

[data-displace] > span > span:last-child {
    left: 0;
    position: absolute;
    top: 0;
    transform: translateY(-120%)
}

[data-displace]:hover > span > span:first-child {
    transform: translateY(120%)
}

[data-displace]:hover > span > span:last-child {
    transform: translateY(0)
}

[data-displace] > a {
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

#error h1 {
    line-height: 1;
    text-transform: uppercase
}

#error a, #error p {
    color: var(--primary)
}

#error a:hover {
    text-decoration: none
}

@media (min-width: 1024px) {
    #error h1 {
        font-size: 12vw
    }
}

@media (min-width: 1921px) {
    #error h1 {
        font-size: 230px
    }
}

.sn {
    align-items: stretch;
    background-color: var(--dtree);
    border: 2px solid var(--border);
    border-radius: var(--small-radius);
    display: flex;
    font-size: 14px;
    left: calc(var(--global-padding) + 15px);
    max-width: var(--global-width);
    padding: 5px;
    position: fixed;
    top: calc(var(--v-large) + 50px);
    z-index: 999
}

.sn label {
    cursor: pointer
}

.sn .lbl {
    animation: pulse 1.5s ease-in-out infinite;
    border: none;
    font-size: 8px;
    padding: 4px;
    position: absolute;
    right: 0;
    top: 0;
    transform: translate(50%, -75%)
}

.sn [data-ico] {
    height: 16px;
    width: 16px
}

.sn [type=checkbox] {
    display: none;
    position: absolute
}

.sn a {
    align-items: center;
    color: var(--primary);
    display: flex;
    gap: 5px;
    line-height: 1;
    opacity: 1;
    position: relative;
    text-decoration: none;
    white-space: nowrap
}

.sn a:hover {
    opacity: .75
}

.mlist {
    align-items: center;
    background-color: var(--tree);
    border-radius: var(--small-radius);
    display: flex;
    flex-flow: column nowrap;
    gap: 10px;
    justify-items: flex-start;
    margin: 0;
    max-height: 0;
    max-width: 0;
    padding: 3px 0;
    pointer-events: none;
    transition: max-height .3s ease-in-out, max-width .3s ease-in-out, padding .3s ease-in-out
}

#menu:checked ~ .mlist {
    max-height: 1080px;
    max-width: 400px;
    padding: 3px 10px;
    pointer-events: auto
}

.mlist > li {
    opacity: 0;
    transition: opacity .3s ease-in-out 0ms
}

#menu:checked ~ .mlist > li {
    opacity: 1;
    transition: opacity .4s ease-in-out .15s
}

#menu:checked ~ .mlist .disable {
    opacity: .75;
    pointer-events: none
}

.entree {
    border-radius: var(--small-radius)
}

#menu:checked ~ .entree .hb > span {
    background-color: initial
}

#menu:checked ~ .entree .hb > span:before {
    transform: rotate(45deg) scaleX(1.25) translate(6.5px, 6.5px)
}

#menu:checked ~ .entree .hb > span:after {
    transform: rotate(-45deg) scaleX(1.25) translate(6px, -6px)
}

.hb {
    display: block;
    height: 48px;
    position: relative;
    transition-duration: .5s;
    width: 48px
}

.hb > span {
    border-radius: 4px;
    height: 4px;
    left: 12px;
    top: 24px;
    transition-duration: .5s;
    width: 24px
}

.hb > span, .hb > span:after, .hb > span:before {
    background-color: var(--yellow);
    display: block;
    position: absolute
}

.hb > span:after, .hb > span:before {
    border-radius: inherit;
    content: "";
    height: 100%;
    transition-duration: inherit;
    width: 100%
}

.hb > span:before {
    top: -10px
}

.hb > span:after {
    top: 10px
}

.megamenu {
    position: relative
}

.megamenu ul {
    background-color: var(--dtree);
    border: 2px solid var(--border);
    border-radius: var(--small-radius);
    left: 50%;
    opacity: 0;
    padding: 3px 10px;
    pointer-events: none;
    position: absolute;
    top: 100%;
    transform: translateX(-50%);
    z-index: 2
}

.megamenu:focus ul, .megamenu:hover ul {
    opacity: 1;
    pointer-events: auto
}

.megamenu:focus > span, .megamenu:hover > span {
    opacity: .75
}

.megamenu li {
    padding: 7px 0
}

.megamenu > span {
    align-items: center;
    color: var(--primary);
    cursor: pointer;
    display: flex;
    gap: 5px
}

.megamenu > span:after {
    border-left: 4px solid #0000;
    border-right: 4px solid #0000;
    border-top: 6px solid var(--primary);
    content: "";
    display: block;
    height: 0;
    width: 0
}

@media (min-width: 1024px) {
    .mlist {
        align-items: center;
        flex-flow: row nowrap;
        gap: 10px;
        justify-items: flex-start;
        max-height: none;
        max-width: 0;
        transition: max-width .3s ease-in-out, padding .3s ease-in-out
    }

    #menu:checked ~ .mlist {
        max-width: 1080px
    }
}

@media (min-width: 1760px) {
    .sn {
        left: calc((100% - var(--global-width)) / 2 + var(--global-padding) + 15px)
    }
}

.links {
    align-items: center;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    margin-top: var(--v-large);
    position: relative
}

.links li {
    display: block;
    flex: 20% 1
}

.links a {
    background-color: var(--dtree);
    border: 2px solid var(--border);
    border-radius: var(--large-radius);
    display: block;
    overflow: hidden;
    position: relative;
    width: 100%
}

.links a:after, .links a:before {
    content: "";
    display: block
}

.links a:before {
    padding-bottom: 100%;
    position: relative;
    width: 100%
}

.links li:nth-child(2n) a:after {
    right: 10%;
    top: 10%
}

.links li:nth-child(odd) a:after {
    right: 40%;
    top: 120%
}

.links a:after {
    background-color: var(--tree);
    border-radius: 100%;
    height: 73%;
    transform: translate(50%, -50%);
    width: 40%;
    z-index: 0
}

.links [data-ico], .links a:after {
    position: absolute;
    transition: all .2s ease-in-out
}

.links [data-ico] {
    display: block;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2
}

.links a:hover [data-ico] {
    transform: translate(-50%, -50%) scale(1.2);
    transition: all .3s ease-in-out
}

.links a:hover:after {
    transform: translate(50%, -50%) scaleY(2) rotate(30deg) rotateY(10deg) rotateX(5deg);
    transition: all .3s ease-in-out
}

@media (min-width: 1024px) {
    .links {
        gap: 300px;
    }

    .links li {
        flex: 1 1
    }

    .links a {
        border-width: 5px
    }

    .links [data-ico] {
        height: 36px;
        width: 36px
    }
}

@media (min-width: 1400px) {
    .links [data-ico] {
        height: 48px;
        width: 48px
    }
}

.footer {
    padding-bottom: var(--v-large);
    padding-top: var(--v-large);
    position: relative;
    z-index: 1
}

.footer, .footer a {
    color: var(--border)
}

.footer .info > .copy :not(:last-child) {
    margin-right: 20px
}

@media (max-width: 767px) {
    .footer .contract {
        font-size: 12px;
        margin-top: calc(var(--gutter) / 2)
    }
}

@media (min-width: 768px) {
    .footer .info {
        align-items: center;
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        width: 100%
    }
}

@media (min-width: 1024px) {
    .footer .info > .copy :not(:last-child) {
        margin-right: 40px
    }
}

@media (min-width: 1760px) {
    .footer:before {
        margin-left: calc(((100vw - 1760px) / 2 + var(--global-padding)) * -1);
        margin-right: calc(((100vw - 1760px) / 2 + var(--global-padding)) * -1);
        width: calc(100% + 100vw - 1760px + var(--global-padding) * 2)
    }
}