@charset "UTF-8";

@font-face
{
    font-family: 'Georama';
    src: url('/fonts/Georama-VariableFont_wdth,wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-stretch: 50% 200%;
    font-style: normal;
    font-display: swap;
}

@font-face
{
    font-family: 'Georama';
    src: url('/fonts/Georama-Italic-VariableFont_wdth,wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-stretch: 50% 200%;
    font-style: italic;
    font-display: swap;
}

@font-face
{
    font-family: 'Playfair Display';
    src: url('/fonts/PlayfairDisplay-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face
{
    font-family: 'Playfair Display';
    src: url('/fonts/PlayfairDisplay-Italic-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

:root
{
    --c1: 206 6 6;
    --c2: 128 128 128;
    --c15: 0 0 0;
    --c16: 255 255 255;
    --c17: 36 40 44;
    --c18: 228 230 234;
    --f1: 'Georama', sans-serif;
    --f2: 'Playfair Display', serif;
}

/* Theme Specific Settings */

@media only screen and (prefers-color-scheme: dark)
{
    :root
    {
        --c4: 36 40 44;
        --c5: 50 58 64;
        --c6: 20 24 28;
        --c7: 210 210 210;
        --c8: 228 230 234;
        --c9: 252 252 255;
        --c10: 255 255 255;
        --c11: 0 0 0;
    }

    .neumorphic_div
    {
        -webkit-box-shadow: 1rem 1rem 2rem 0rem rgb(0 0 0 / 0.24), -1rem -1rem 2rem 0rem rgb(255 255 255 / 0.06);
        -moz-box-shadow: 1rem 1rem 2rem 0rem rgb(0 0 0 / 0.24), -1rem -1rem 2rem 0rem rgb(255 255 255 / 0.06);
        -o-box-shadow: 1rem 1rem 2rem 0rem rgb(0 0 0 / 0.24), -1rem -1rem 2rem 0rem rgb(255 255 255 / 0.06);
        -ms-box-shadow: 1rem 1rem 2rem 0rem rgb(0 0 0 / 0.24), -1rem -1rem 2rem 0rem rgb(255 255 255 / 0.06);
        box-shadow: 1rem 1rem 2rem 0rem rgb(0 0 0 / 0.24), -1rem -1rem 2rem 0rem rgb(255 255 255 / 0.06);
    }

    .neumorphic_in, .neumorphic_in_be::before
    {
        -webkit-box-shadow: 0.75rem 0.75rem 1.25rem 0rem rgb(0 0 0 / 0.4) inset, -0.75rem -0.75rem 1.25rem 0rem rgb(255 255 255 / 0.068) inset;
        -moz-box-shadow: 0.75rem 0.75rem 1.25rem 0rem rgb(0 0 0 / 0.4) inset, -0.75rem -0.75rem 1.25rem 0rem rgb(255 255 255 / 0.068) inset;
        -o-box-shadow: 0.75rem 0.75rem 1.25rem 0rem rgb(0 0 0 / 0.4) inset, -0.75rem -0.75rem 1.25rem 0rem rgb(255 255 255 / 0.068) inset;
        -ms-box-shadow: 0.75rem 0.75rem 1.25rem 0rem rgb(0 0 0 / 0.4) inset, -0.75rem -0.75rem 1.25rem 0rem rgb(255 255 255 / 0.068) inset;
        box-shadow: 0.75rem 0.75rem 1.25rem 0rem rgb(0 0 0 / 0.4) inset, -0.75rem -0.75rem 1.25rem 0rem rgb(255 255 255 / 0.068) inset;
    }

    .neumorphic_btn
    {
        -webkit-box-shadow: 0.75rem 0.75rem 1.25rem 0rem rgb(0 0 0 / 0.4), -0.75rem -0.75rem 1.25rem 0rem rgb(255 255 255 / 0.068);
        -moz-box-shadow: 0.75rem 0.75rem 1.25rem 0rem rgb(0 0 0 / 0.4), -0.75rem -0.75rem 1.25rem 0rem rgb(255 255 255 / 0.068);
        -o-box-shadow: 0.75rem 0.75rem 1.25rem 0rem rgb(0 0 0 / 0.4), -0.75rem -0.75rem 1.25rem 0rem rgb(255 255 255 / 0.068);
        -ms-box-shadow: 0.75rem 0.75rem 1.25rem 0rem rgb(0 0 0 / 0.4), -0.75rem -0.75rem 1.25rem 0rem rgb(255 255 255 / 0.068);
        box-shadow: 0.75rem 0.75rem 1.25rem 0rem rgb(0 0 0 / 0.4), -0.75rem -0.75rem 1.25rem 0rem rgb(255 255 255 / 0.068);
    }
    
    .neumorphic_btn:active
    {
        -webkit-box-shadow: 0.75rem 0.75rem 1.25rem 0rem rgb(0 0 0 / 0.4), -0.75rem -0.75rem 1.25rem 0rem rgb(255 255 255 / 0.068), 0.75rem 0.75rem 1.25rem 0rem rgb(0 0 0 / 0.4) inset, -0.75rem -0.75rem 1.25rem 0rem rgb(255 255 255 / 0.068) inset;
        -moz-box-shadow: 0.75rem 0.75rem 1.25rem 0rem rgb(0 0 0 / 0.4), -0.75rem -0.75rem 1.25rem 0rem rgb(255 255 255 / 0.068), 0.75rem 0.75rem 1.25rem 0rem rgb(0 0 0 / 0.4) inset, -0.75rem -0.75rem 1.25rem 0rem rgb(255 255 255 / 0.068) inset;
        -o-box-shadow: 0.75rem 0.75rem 1.25rem 0rem rgb(0 0 0 / 0.4), -0.75rem -0.75rem 1.25rem 0rem rgb(255 255 255 / 0.068), 0.75rem 0.75rem 1.25rem 0rem rgb(0 0 0 / 0.4) inset, -0.75rem -0.75rem 1.25rem 0rem rgb(255 255 255 / 0.068) inset;
        -ms-box-shadow: 0.75rem 0.75rem 1.25rem 0rem rgb(0 0 0 / 0.4), -0.75rem -0.75rem 1.25rem 0rem rgb(255 255 255 / 0.068), 0.75rem 0.75rem 1.25rem 0rem rgb(0 0 0 / 0.4) inset, -0.75rem -0.75rem 1.25rem 0rem rgb(255 255 255 / 0.068) inset;
        box-shadow: 0.75rem 0.75rem 1.25rem 0rem rgb(0 0 0 / 0.4), -0.75rem -0.75rem 1.25rem 0rem rgb(255 255 255 / 0.068), 0.75rem 0.75rem 1.25rem 0rem rgb(0 0 0 / 0.4) inset, -0.75rem -0.75rem 1.25rem 0rem rgb(255 255 255 / 0.068) inset;
    }
}

@media only screen and not (prefers-color-scheme: dark)
{
    :root
    {
        --c4: 224 224 228;
        --c5: 210 210 216;
        --c6: 248 248 254;
        --c7: 60 60 60;
        --c8: 50 58 64;
        --c9: 20 24 28;
        --c10: 0 0 0;
        --c11: 255 255 255;
    }

    .neumorphic_div
    {
        -webkit-box-shadow: 1rem 1rem 2rem 0rem rgb(0 0 0 / 0.068), -1rem -1rem 2rem 0rem rgb(255 255 255 / 0.8);
        -moz-box-shadow: 1rem 1rem 2rem 0rem rgb(0 0 0 / 0.068), -1rem -1rem 2rem 0rem rgb(255 255 255 / 0.8);
        -o-box-shadow: 1rem 1rem 2rem 0rem rgb(0 0 0 / 0.068), -1rem -1rem 2rem 0rem rgb(255 255 255 / 0.8);
        -ms-box-shadow: 1rem 1rem 2rem 0rem rgb(0 0 0 / 0.068), -1rem -1rem 2rem 0rem rgb(255 255 255 / 0.8);
        box-shadow: 1rem 1rem 2rem 0rem rgb(0 0 0 / 0.068), -1rem -1rem 2rem 0rem rgb(255 255 255 / 0.8);
    }

    .neumorphic_in, .neumorphic_in_be::before
    {
        -webkit-box-shadow: 0.75rem 0.75rem 1.25rem 0rem rgb(0 0 0 / 0.08) inset, -0.75rem -0.75rem 1.25rem 0rem rgb(255 255 255 / 0.4) inset;
        -moz-box-shadow: 0.75rem 0.75rem 1.25rem 0rem rgb(0 0 0 / 0.08) inset, -0.75rem -0.75rem 1.25rem 0rem rgb(255 255 255 / 0.4) inset;
        -o-box-shadow: 0.75rem 0.75rem 1.25rem 0rem rgb(0 0 0 / 0.08) inset, -0.75rem -0.75rem 1.25rem 0rem rgb(255 255 255 / 0.4) inset;
        -ms-box-shadow: 0.75rem 0.75rem 1.25rem 0rem rgb(0 0 0 / 0.08) inset, -0.75rem -0.75rem 1.25rem 0rem rgb(255 255 255 / 0.4) inset;
        box-shadow: 0.75rem 0.75rem 1.25rem 0rem rgb(0 0 0 / 0.08) inset, -0.75rem -0.75rem 1.25rem 0rem rgb(255 255 255 / 0.4) inset;
    }

    .neumorphic_btn
    {
        -webkit-box-shadow: 0.75rem 0.75rem 1.25rem 0rem rgb(0 0 0 / 0.08), -0.75rem -0.75rem 1.25rem 0rem rgb(255 255 255 / 0.4);
        -moz-box-shadow: 0.75rem 0.75rem 1.25rem 0rem rgb(0 0 0 / 0.08), -0.75rem -0.75rem 1.25rem 0rem rgb(255 255 255 / 0.4);
        -o-box-shadow: 0.75rem 0.75rem 1.25rem 0rem rgb(0 0 0 / 0.08), -0.75rem -0.75rem 1.25rem 0rem rgb(255 255 255 / 0.4);
        -ms-box-shadow: 0.75rem 0.75rem 1.25rem 0rem rgb(0 0 0 / 0.08), -0.75rem -0.75rem 1.25rem 0rem rgb(255 255 255 / 0.4);
        box-shadow: 0.75rem 0.75rem 1.25rem 0rem rgb(0 0 0 / 0.08), -0.75rem -0.75rem 1.25rem 0rem rgb(255 255 255 / 0.4);
    }
    
    .neumorphic_btn:active
    {
        -webkit-box-shadow: 0.75rem 0.75rem 1.25rem 0rem rgb(0 0 0 / 0.08), -0.75rem -0.75rem 1.25rem 0rem rgb(255 255 255 / 0.4), 0.75rem 0.75rem 1.25rem 0rem rgb(0 0 0 / 0.08) inset, -0.75rem -0.75rem 1.25rem 0rem rgb(255 255 255 / 0.4) inset;
        -moz-box-shadow: 0.75rem 0.75rem 1.25rem 0rem rgb(0 0 0 / 0.08), -0.75rem -0.75rem 1.25rem 0rem rgb(255 255 255 / 0.4), 0.75rem 0.75rem 1.25rem 0rem rgb(0 0 0 / 0.08) inset, -0.75rem -0.75rem 1.25rem 0rem rgb(255 255 255 / 0.4) inset;
        -o-box-shadow: 0.75rem 0.75rem 1.25rem 0rem rgb(0 0 0 / 0.08), -0.75rem -0.75rem 1.25rem 0rem rgb(255 255 255 / 0.4), 0.75rem 0.75rem 1.25rem 0rem rgb(0 0 0 / 0.08) inset, -0.75rem -0.75rem 1.25rem 0rem rgb(255 255 255 / 0.4) inset;
        -ms-box-shadow: 0.75rem 0.75rem 1.25rem 0rem rgb(0 0 0 / 0.08), -0.75rem -0.75rem 1.25rem 0rem rgb(255 255 255 / 0.4), 0.75rem 0.75rem 1.25rem 0rem rgb(0 0 0 / 0.08) inset, -0.75rem -0.75rem 1.25rem 0rem rgb(255 255 255 / 0.4) inset;
        box-shadow: 0.75rem 0.75rem 1.25rem 0rem rgb(0 0 0 / 0.08), -0.75rem -0.75rem 1.25rem 0rem rgb(255 255 255 / 0.4), 0.75rem 0.75rem 1.25rem 0rem rgb(0 0 0 / 0.08) inset, -0.75rem -0.75rem 1.25rem 0rem rgb(255 255 255 / 0.4) inset;
    }
}

@media only print
{
    header
    {
        display: flex;
        justify-content: center;
        padding: 1rem;
    }
    
    header > :not(.logo)
    {
        display: none;
    }
    
    .logo svg
    {
        height: 4rem;
        width: auto;
    }
    
    main > *, body > :not(header):not(main):not(footer), .perfecty-push-settings-container
    {
        display: none !important;
    }
    
    main
    {
        text-align: center;
        padding: 2rem;
        margin: 2rem;
        background-color: #efefef;
        -webkit-border-radius: 2rem;
        -moz-border-radius: 2rem;
        -o-border-radius: 2rem;
        -ms-border-radius: 2rem;
        border-radius: 2rem;
    }
    
    main::before
    {
        content: "Oopsie! Sorry. We do not allow printing of our website contents as of now.";
    }
    
    footer
    {
        display: flex;
        justify-content: space-between;
        -webkit-border-radius: 1rem;
        -moz-border-radius: 1rem;
        -o-border-radius: 1rem;
        -ms-border-radius: 1rem;
        border-radius: 1rem;
    }
    
    footer > div
    {
        flex-basis: 10rem;
        display: flex;
        align-items: center;
    }
}

@media only screen
{
    nav a
    {
        display: inherit;
        padding: 0rem 0.625rem;
    }

    .bgrsec::before
    {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 200%;
        height: 140%;
        background-image: linear-gradient(0deg, transparent 0%, transparent calc(50% - 0.0625rem), rgb(var(--c8) / 0.28) calc(50% - 0.0625rem), rgb(var(--c8) / 0.28) calc(50% + 0.0625rem), transparent calc(50% + 0.0625rem), transparent 100%), linear-gradient(90deg, transparent 0%, transparent calc(50% - 0.0625rem), rgb(var(--c8) / 0.28) calc(50% - 0.0625rem), rgb(var(--c8) / 0.28) calc(50% + 0.0625rem), transparent calc(50% + 0.0625rem), transparent 100%);
        background-size: 8rem 8rem;
        background-repeat: repeat;
        background-position: 0 0, 0 0;
        -webkit-transform-origin: 25% 100%;
        transform-origin: 25% 100%;
        -webkit-transform: perspective(50rem) rotateX(45deg) translate3D(-25%, 0%, 0px);
        -moz-transform: perspective(50rem) rotateX(45deg) translate3D(-25%, 0%, 0px);
        -o-transform: perspective(50rem) rotateX(45deg) translate3D(-25%, 0%, 0px);
        -ms-transform: perspective(50rem) rotateX(45deg) translate3D(-25%, 0%, 0px);
        transform: perspective(50rem) rotateX(45deg) translate3D(-25%, 0%, 0px);
        -webkit-mask-image: linear-gradient(0deg, black 0%, transparent 100%);
        mask-image: linear-gradient(0deg, black 0%, transparent 100%);
        -webkit-animation: bgrsec 1.4s linear 0s infinite;
        -moz-animation: bgrsec 1.4s linear 0s infinite;
        -o-animation: bgrsec 1.4s linear 0s infinite;
        -ms-animation: bgrsec 1.4s linear 0s infinite;
        animation: bgrsec 1.4s linear 0s infinite;
    }

    @-webkit-keyframes bgrsec
    {
        0% { background-position: 0 0, 0 0; }
        100% { background-position: 0 0, -8rem 0rem; }
    }

    @-moz-keyframes bgrsec
    {
        0% { background-position: 0 0, 0 0; }
        100% { background-position: 0 0, -8rem 0rem; }
    }

    @-o-keyframes bgrsec
    {
        0% { background-position: 0 0, 0 0; }
        100% { background-position: 0 0, -8rem 0rem; }
    }

    @-ms-keyframes bgrsec
    {
        0% { background-position: 0 0, 0 0; }
        100% { background-position: 0 0, -8rem 0rem; }
    }

    @keyframes bgrsec
    {
        0% { background-position: 0 0, 0 0; }
        100% { background-position: 0 0, -8rem 0rem; }
    }

    .floaticons figure, .floaticons-i
    {
        -webkit-animation: floaticons var(--animtime) ease-in-out var(--animdelay) infinite;
        -moz-animation: floaticons var(--animtime) ease-in-out var(--animdelay) infinite;
        -o-animation: floaticons var(--animtime) ease-in-out var(--animdelay) infinite;
        -ms-animation: floaticons var(--animtime) ease-in-out var(--animdelay) infinite;
        animation: floaticons var(--animtime) ease-in-out var(--animdelay) infinite;
    }

    @-webkit-keyframes floaticons
    {
        0%, 100% { -webkit-transform: translateY(0rem); -moz-transform: translateY(0rem); -o-transform: translateY(0rem); -ms-transform: translateY(0rem); transform: translateY(0rem); }
        50% { -webkit-transform: translateY(-1rem); -moz-transform: translateY(-1rem); -o-transform: translateY(-1rem); -ms-transform: translateY(-1rem); transform: translateY(-1rem); }
    }

    @-moz-keyframes floaticons
    {
        0%, 100% { -webkit-transform: translateY(0rem); -moz-transform: translateY(0rem); -o-transform: translateY(0rem); -ms-transform: translateY(0rem); transform: translateY(0rem); }
        50% { -webkit-transform: translateY(-1rem); -moz-transform: translateY(-1rem); -o-transform: translateY(-1rem); -ms-transform: translateY(-1rem); transform: translateY(-1rem); }
    }

    @-o-keyframes floaticons
    {
        0%, 100% { -webkit-transform: translateY(0rem); -moz-transform: translateY(0rem); -o-transform: translateY(0rem); -ms-transform: translateY(0rem); transform: translateY(0rem); }
        50% { -webkit-transform: translateY(-1rem); -moz-transform: translateY(-1rem); -o-transform: translateY(-1rem); -ms-transform: translateY(-1rem); transform: translateY(-1rem); }
    }

    @-ms-keyframes floaticons
    {
        0%, 100% { -webkit-transform: translateY(0rem); -moz-transform: translateY(0rem); -o-transform: translateY(0rem); -ms-transform: translateY(0rem); transform: translateY(0rem); }
        50% { -webkit-transform: translateY(-1rem); -moz-transform: translateY(-1rem); -o-transform: translateY(-1rem); -ms-transform: translateY(-1rem); transform: translateY(-1rem); }
    }

    @keyframes floaticons
    {
        0%, 100% { -webkit-transform: translateY(0rem); -moz-transform: translateY(0rem); -o-transform: translateY(0rem); -ms-transform: translateY(0rem); transform: translateY(0rem); }
        50% { -webkit-transform: translateY(-1rem); -moz-transform: translateY(-1rem); -o-transform: translateY(-1rem); -ms-transform: translateY(-1rem); transform: translateY(-1rem); }
    }

    .overshadow
    {
        box-shadow: 0px 0px 8rem 8rem rgb(var(--c4));
    }

    .gtcx, .gtcxh
    {
        grid-template-columns: 8rem 8rem repeat(7, minmax(8rem, 18rem)) 24rem;
        grid-template-rows: auto;
    }

    .gtcx > li, .gtcxh > li
    {
        padding: 1rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .gtcx > li:nth-child(20n + 1), .gtcx > li:nth-child(20n + 2), .gtcx > li:nth-child(20n + 3), .gtcx > li:nth-child(20n + 4), .gtcx > li:nth-child(20n + 5), .gtcx > li:nth-child(20n + 6), .gtcx > li:nth-child(20n + 7), .gtcx > li:nth-child(20n + 8), .gtcx > li:nth-child(20n + 9), .gtcx > li:nth-child(20n + 10)
    {
        background-color: rgb(var(--c8) / 0.06);
    }

    .gtcx > li:nth-child(20n + 1)
    {
        -webkit-border-radius: 1rem 0rem 0rem 1rem;
        -moz-border-radius: 1rem 0rem 0rem 1rem;
        -o-border-radius: 1rem 0rem 0rem 1rem;
        -ms-border-radius: 1rem 0rem 0rem 1rem;
        border-radius: 1rem 0rem 0rem 1rem;
    }

    .gtcx > li:nth-child(20n + 10)
    {
        -webkit-border-radius: 0rem 1rem 1rem 0rem;
        -moz-border-radius: 0rem 1rem 1rem 0rem;
        -o-border-radius: 0rem 1rem 1rem 0rem;
        -ms-border-radius: 0rem 1rem 1rem 0rem;
        border-radius: 0rem 1rem 1rem 0rem;
    }

    .songav span
    {
        -webkit-filter: grayscale(1);
        filter: grayscale(1);
        opacity: 0.5;
    }

    .xform-fieldcon:empty ~ div
    {
        display: none;
    }

    .xform-progress
    {
        background-image: linear-gradient(90deg, transparent 0%, rgb(var(--c4) / 0.24) 50%, transparent 100%);
        background-size: 1.5rem 100%;
        background-position-x: 0%;
        animation: progmation 1s linear 0s infinite both;
    }

    @keyframes progmation
    {
        0% { background-position-x: 0%; }
        100% { background-position-x: 1.5rem; }
    }

    label[for^="xform-album-art-"]
    {
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
}

@media only screen and (min-width: 1000px)
{
    .mob
    {
        display: none;
    }

    nav
    {
        font-size: 1.12rem;
    }
}

@media only screen and (max-width: 999px)
{
    .nav_btn.expanded rect:nth-of-type(1)
    {
        top: -20%;
        left: 20%;
        fill: rgb(var(--c1));
        -webkit-transform-origin: 90% 20%;
        transform-origin: 90% 20%;
        -webkit-transform: rotate(-45deg) scaleX(40%);
        -moz-transform: rotate(-45deg) scaleX(40%);
        -o-transform: rotate(-45deg) scaleX(40%);
        -ms-transform: rotate(-45deg) scaleX(40%);
        transform: rotate(-45deg) scaleX(40%);
    }

    .nav_btn.expanded rect:nth-of-type(2)
    {
        fill: rgb(var(--c8));
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .nav_btn.expanded rect:nth-of-type(3)
    {
        left: -20%;
        top: 20%;
        fill: rgb(var(--c2));
        -webkit-transform-origin: 10% 80%;
        transform-origin: 10% 80%;
        -webkit-transform: rotate(-45deg) scaleX(40%);
        -moz-transform: rotate(-45deg) scaleX(40%);
        -o-transform: rotate(-45deg) scaleX(40%);
        -ms-transform: rotate(-45deg) scaleX(40%);
        transform: rotate(-45deg) scaleX(40%);
    }
}