html,
body {
    height: 100dvh;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #000;
}

.main-bg {
    position: relative;
}

.main-container {
    width: 100dvw;
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.center-container {
    aspect-ratio: 1080 / 1920;
    width: min(100dvw, 100dvh * (1080 / 1920));
    max-height: 100dvh;
    background-color: transparent;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* flex-direction: column; */
}

.qr {
    background-image: url('assets/QR.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 82% !important;
    height: 35%;
    position: absolute;
    bottom: 0;
    left: 7%;
    z-index: 2;
    -webkit-user-select: none;
}


/************* Card tilting effect *****************/

.card__shine,
.card__glare {
    backface-visibility: hidden;
    will-change: transform, opacity, background-position, filter;
    contain: layout paint;
}

.card__shine {
    --grain: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iNTAwIiBoZWlnaHQ9IjUwMCI+CjxmaWx0ZXIgaWQ9Im4iPgo8ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iLjciIG51bU9jdGF2ZXM9IjEwIiBzdGl0Y2hUaWxlcz0ic3RpdGNoIj48L2ZlVHVyYnVsZW5jZT4KPC9maWx0ZXI+CjxyZWN0IHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIiBmaWxsPSIjMDAwIj48L3JlY3Q+CjxyZWN0IHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIiBmaWx0ZXI9InVybCgjbikiIG9wYWNpdHk9IjAuMyI+PC9yZWN0Pgo8L3N2Zz4=");

    --space: 6%;
    --angle: 133deg;
    --imgsize: 500px;

    --red: #f80e7b;
    --yel: #eedf10;
    --gre: #21e985;
    --blu: #0dbde9;
    --vio: #c929f1;
}

.card__glare.svelte-y0attf {
    transform: translateZ(1.4px);
    background: radial-gradient(farthest-corner circle at var(--mx) var(--my), rgba(255, 255, 255, .8) 10%, rgba(255, 255, 255, .65) 20%, rgba(0, 0, 0, .5) 90%);
    mix-blend-mode: overlay;
    opacity: var(--o)
}

.card__shine.svelte-8e4zv4 {
    display: grid;
    overflow: hidden;
    z-index: 3;
    transform: translateZ(1px);
    background: transparent;
    mix-blend-mode: color-dodge;
    filter: brightness(.85) contrast(2.75) saturate(.65);
    background-size: cover;
    background-position: center;
    opacity: var(--o)
}

.card__shine.svelte-8e4zv4:before {
    grid-area: 1/1;
    transform: translateZ(1px)
}

.card__shine.svelte-8e4zv4:after {
    grid-area: 1/1;
    transform: translateZ(1.2px);
    border-radius: var(--radius)
}

.card.fx.fx {
    --radius: 4.55% / 3.5%;
    --back: #004177;
    z-index: calc(var(--s) * 100);
    transform: translateZ(.1px);
    -webkit-transform: translate3d(0, 0, .1px);
    will-change: transform, visibility;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -webkit-user-select: none;
}

.card.active.fx .card__translater.fx,
.card.active.fxz .card__rotator.fx {
    touch-action: none
}

.card__translater.fx.fx,
.card__rotator.fx.fx {
    display: grid;
    perspective: 600px;
    transform-origin: center;
    -webkit-transform-origin: center;
    will-change: transform
}

.card__translater.fx.fx {
    width: auto;
    position: relative;
    transform: translate3d(var(--tx), var(--ty), 0) scale(var(--s));
    -webkit-transform: translate3d(var(--tx), var(--ty), 0) scale(var(--s));
}

.card__rotator.fx.fx {
    transform: rotateY(var(--rx)) rotateX(var(--ry));
    transform-style: preserve-3d;
    -webkit-transform: rotateY(var(--rx)) rotateX(var(--ry));
    -webkit-transform-style: preserve-3d;
    box-shadow: 0 10px 20px -5px #000;
    border-radius: var(--radius);
    outline: none;
    transition: box-shadow .4s ease, outline .2s ease;
    display: grid;
}

.card__rotator.fx * {
    width: 100%;
    display: grid;
    grid-area: 1/1;
    border-radius: var(--radius);
    image-rendering: optimizeQuality;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d
}

.card__rotator.fx img.fx {
    outline: 1px solid transparent;
    aspect-ratio: .716;
    height: auto
}

.card .card__shine,
.card .card__shine:after {
    --space: 5%;
    --angle: 133deg;
    --imgsize: 50% 42%;

    background-image:
        url(''),
        repeating-linear-gradient(0deg,
            rgb(255, 119, 115) calc(var(--space)*1),
            rgba(255, 237, 95, 1) calc(var(--space)*2),
            rgba(168, 255, 95, 1) calc(var(--space)*3),
            rgba(131, 255, 247, 1) calc(var(--space)*4),
            rgba(120, 148, 255, 1) calc(var(--space)*5),
            rgb(216, 117, 255) calc(var(--space)*6),
            rgb(255, 119, 115) calc(var(--space)*7)),
        repeating-linear-gradient(var(--angle),
            #0e152e 0%,
            hsl(180, 10%, 60%) 3.8%,
            hsl(180, 29%, 66%) 4.5%,
            hsl(180, 10%, 60%) 5.2%,
            #0e152e 10%,
            #0e152e 12%),
        radial-gradient(farthest-corner circle at var(--mx) var(--my),
            rgba(0, 0, 0, .1) 12%,
            rgba(0, 0, 0, .15) 20%,
            rgba(0, 0, 0, .25) 120%);

    background-blend-mode: exclusion, hue, hard-light;
    background-size: var(--imgsize), 200% 700%, 300% 100%, 200% 100%;
    background-position: center center, 0% var(--posy), var(--posx) var(--posy), var(--posx) var(--posy);

    filter: brightness(calc((var(--hyp)*0.3) + 0.4)) contrast(2) saturate(1.5);
}

.card .card__shine:after {
    content: "";

    background-size: var(--imgsize), 200% 400%, 195% 100%, 200% 100%;
    background-position: center center, 0% var(--posy), calc(var(--posx) * -1) calc(var(--posy) * -1), var(--posx) var(--posy);

    filter: brightness(calc((var(--hyp)*0.5) + 0.6)) contrast(1.6) saturate(1.4);
    mix-blend-mode: exclusion;
}

.showcase {
    z-index: 50;
    width: 80%;
    position: relative;
    cursor: pointer;
    /* top: 10%; */
    position: absolute;
}

/*** Touch icon animation ***/
#orbit-area {
    position: absolute;
    bottom: -25%;
    left: calc(50% - 30px);
    width: 20vw;
    height: 20vw;
    max-width: 100px;
    max-height: 100px;
    z-index: 51;
    /* animation: rotate 2s linear infinite; */
    pointer-events: none;
}

#touch-icon {
    --touchiconsize: max(60px, 15vw);
    background-image: url('assets/touchicon.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 15vw;
    height: 15vw;
    max-width: 60px;
    max-height: 60px;
    position: absolute;
    top: calc(50% - var(--touchiconsize / 2));
    left: calc(50% - var(--touchiconsize / 2));
    z-index: 51;
    /* animation: counterRotate 2s linear infinite; */
    animation: moveUpDown 0.8s linear infinite;
    pointer-events: none;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes counterRotate {
    from {
        transform: translateX(-50%) rotate(0deg);
    }

    to {
        transform: translateX(-50%) rotate(-360deg);
    }
}

@keyframes moveUpDown {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }

    100% {
        transform: translateY(0);
    }
}

/*** Cursor ring effect ***/
.circle-container {
    position: absolute;
    width: 70px;
    height: 70px;
    pointer-events: none;
    z-index: 51;
    filter: drop-shadow(0 0 10px rgba(52, 152, 219, 0.7)) drop-shadow(0 0 20px rgba(52, 152, 219, 0.5));
}

svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.circle {
    fill: none;
    stroke: #58e035;
    stroke-width: 8;
    stroke-dasharray: 439.82;
    stroke-dashoffset: 439.82;
}

@keyframes drawCircle {
    100% {
        stroke-dashoffset: 0;
    }
}

.drawing {
    animation: drawCircle 5s linear;
}