@charset "UTF-8";
@import url('https://bengalwebsolution.com/helix/cdn/common/?v5,900px');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

:root
{
    --c1: 12, 197, 199;
    --c2: 36, 40, 44;
    --c3: 211, 212, 213;
    --c4: 8, 138, 237;
    --c5: 15, 247, 168;
    --f1: 'Rubik', sans-serif;
    --f2: 'Playfair Display', serif;
}

body
{
    background-color: rgba(var(--c2), 1);
    color: rgba(var(--c3), 1);
}

header
{
    z-index: 10;
}

@media only screen
{
    .neumorphic__button, .neumorphic__input
    {
        border: 0.125rem solid transparent;
    }
    
    .neumorphic__button
    {
        -webkit-box-shadow: 0.5rem 0.5rem 1rem 0px rgba(0, 0, 0, 0.28),
                    -0.5rem -0.5rem 1rem 0px rgba(255, 255, 255, 0.1);
        -moz-box-shadow: 0.5rem 0.5rem 1rem 0px rgba(0, 0, 0, 0.28),
                    -0.5rem -0.5rem 1rem 0px rgba(255, 255, 255, 0.1);
        -o-box-shadow: 0.5rem 0.5rem 1rem 0px rgba(0, 0, 0, 0.28),
                    -0.5rem -0.5rem 1rem 0px rgba(255, 255, 255, 0.1);
        -ms-box-shadow: 0.5rem 0.5rem 1rem 0px rgba(0, 0, 0, 0.28),
                    -0.5rem -0.5rem 1rem 0px rgba(255, 255, 255, 0.1);
        box-shadow: 0.5rem 0.5rem 1rem 0px rgba(0, 0, 0, 0.28),
                    -0.5rem -0.5rem 1rem 0px rgba(255, 255, 255, 0.1);
    }

    .neumorphic__input
    {
        -webkit-box-shadow: 0.5rem 0.5rem 1rem 0px rgba(0, 0, 0, 0.28),
                    -0.5rem -0.5rem 1rem 0px rgba(255, 255, 255, 0.1),
                    0.25rem 0.25rem 0.5rem 0px rgba(0, 0, 0, 0.28) inset,
                    -0.25rem -0.25rem 0.5rem 0px rgba(255, 255, 255, 0.1) inset;
        -moz-box-shadow: 0.5rem 0.5rem 1rem 0px rgba(0, 0, 0, 0.28),
                    -0.5rem -0.5rem 1rem 0px rgba(255, 255, 255, 0.1),
                    0.25rem 0.25rem 0.5rem 0px rgba(0, 0, 0, 0.28) inset,
                    -0.25rem -0.25rem 0.5rem 0px rgba(255, 255, 255, 0.1) inset;
        -o-box-shadow: 0.5rem 0.5rem 1rem 0px rgba(0, 0, 0, 0.28),
                    -0.5rem -0.5rem 1rem 0px rgba(255, 255, 255, 0.1),
                    0.25rem 0.25rem 0.5rem 0px rgba(0, 0, 0, 0.28) inset,
                    -0.25rem -0.25rem 0.5rem 0px rgba(255, 255, 255, 0.1) inset;
        -ms-box-shadow: 0.5rem 0.5rem 1rem 0px rgba(0, 0, 0, 0.28),
                    -0.5rem -0.5rem 1rem 0px rgba(255, 255, 255, 0.1),
                    0.25rem 0.25rem 0.5rem 0px rgba(0, 0, 0, 0.28) inset,
                    -0.25rem -0.25rem 0.5rem 0px rgba(255, 255, 255, 0.1) inset;
        box-shadow: 0.5rem 0.5rem 1rem 0px rgba(0, 0, 0, 0.28),
                    -0.5rem -0.5rem 1rem 0px rgba(255, 255, 255, 0.1),
                    0.25rem 0.25rem 0.5rem 0px rgba(0, 0, 0, 0.28) inset,
                    -0.25rem -0.25rem 0.5rem 0px rgba(255, 255, 255, 0.1) inset;
    }

    .neumorphic__button:active
    {
        -webkit-box-shadow: 0.5rem 0.5rem 1rem 0px rgba(0, 0, 0, 0.28),
                    -0.5rem -0.5rem 1rem 0px rgba(255, 255, 255, 0.1),
                    0.5rem 0.5rem 1rem 0px rgba(0, 0, 0, 0.28) inset,
                    -0.5rem -0.5rem 1rem 0px rgba(255, 255, 255, 0.1) inset;
        -moz-box-shadow: 0.5rem 0.5rem 1rem 0px rgba(0, 0, 0, 0.28),
                    -0.5rem -0.5rem 1rem 0px rgba(255, 255, 255, 0.1),
                    0.5rem 0.5rem 1rem 0px rgba(0, 0, 0, 0.28) inset,
                    -0.5rem -0.5rem 1rem 0px rgba(255, 255, 255, 0.1) inset;
        -o-box-shadow: 0.5rem 0.5rem 1rem 0px rgba(0, 0, 0, 0.28),
                    -0.5rem -0.5rem 1rem 0px rgba(255, 255, 255, 0.1),
                    0.5rem 0.5rem 1rem 0px rgba(0, 0, 0, 0.28) inset,
                    -0.5rem -0.5rem 1rem 0px rgba(255, 255, 255, 0.1) inset;
        -ms-box-shadow: 0.5rem 0.5rem 1rem 0px rgba(0, 0, 0, 0.28),
                    -0.5rem -0.5rem 1rem 0px rgba(255, 255, 255, 0.1),
                    0.5rem 0.5rem 1rem 0px rgba(0, 0, 0, 0.28) inset,
                    -0.5rem -0.5rem 1rem 0px rgba(255, 255, 255, 0.1) inset;
        box-shadow: 0.5rem 0.5rem 1rem 0px rgba(0, 0, 0, 0.28),
                    -0.5rem -0.5rem 1rem 0px rgba(255, 255, 255, 0.1),
                    0.5rem 0.5rem 1rem 0px rgba(0, 0, 0, 0.28) inset,
                    -0.5rem -0.5rem 1rem 0px rgba(255, 255, 255, 0.1) inset;
    }

    .neumorphic__input:hover, .neumorphic__input:focus
    {
        border: 0.125rem solid rgba(var(--c1), 1);
    }

    .neumorphic__button:active
    {
        border: 0.125rem solid rgba(var(--b), 1);
        color: rgba(var(--c3), 1);
    }

    .neumorphic__button:hover, .neumorphic__input:focus
    {
        color: rgba(var(--c1), 1);
    }

    .neumorphic__button:active > *
    {
        -webkit-transform: scale(0.98);
        -moz-transform: scale(0.98);
        -o-transform: scale(0.98);
        -ms-transform: scale(0.98);
        transform: scale(0.98);
    }

    .fullHeight
    {
        height: calc(100vh - 8.5rem);
    }
}