:root {
    --shadow-color: 286deg 36% 56%;
--shadow-elevation-medium:
        -0.1px 0.7px 0.8px hsl(var(--shadow-color) / 0.36),
        -0.3px 2.4px 2.7px -0.8px hsl(var(--shadow-color) / 0.36),
        -0.7px 5.9px 6.7px -1.7px hsl(var(--shadow-color) / 0.36),
        -1.7px 14.3px 16.2px -2.5px hsl(var(--shadow-color) / 0.36);
}
/* @font-face {
                font-family: 'iconfont';
                src: url('iconfont.ttf') format('truetype');
            } */

/* * {
                user-select: none;
            } */

/* html, body {
                overflow: hidden;
                background-color: #ffffff;
                background-image: url("background.png")
            } */

body {
    margin: 0;
    /* position: fixed; */
    width: 100%;
    height: 100%;
}

/* @-webkit-keyframes jumbo {
    from {
        background-position: 50% 50%, 50% 50%;
    }

    to {
        background-position: 350% 50%, 350% 50%;
    }
} */

@keyframes jumbo {
    from {
        background-position: 50% 50%, 50% 50%;
    }

    to {
        background-position: 350% 50%, 350% 50%;
    }
}

.jumbo {
    --stripes: repeating-linear-gradient(100deg,
            #fff 0%,
            #fff 7%,
            transparent 10%,
            transparent 12%,
            #fff 16%);
    /* --stripesDark: repeating-linear-gradient(
                    100deg,
                    #000 0%,
                    #000 7%,
                    transparent 10%,
                    transparent 12%,
                    #000 16%
                ); */
    --rainbow: repeating-linear-gradient(100deg,
            #60a5fa 10%,
            #e879f9 15%,
            #60a5fa 20%,
            #5eead4 25%,
            #60a5fa 30%);
    background-image: var(--stripes), var(--rainbow);
    background-size: 300%, 200%;
    background-position: 50% 50%, 50% 50%;

    /* filter: blur(10px) invert(100%); */

    /* -webkit-mask-image: radial-gradient(ellipse at 100% 0%, black 40%, transparent 70%); */

    mask-image: radial-gradient(ellipse at 100% 0%, black 40%, transparent 70%);

    pointer-events: none;
}

.jumbo::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--stripes), var(--rainbow);
    background-size: 200%, 100%;
    /* -webkit-animation: jumbo 60s linear infinite; */
    animation: jumbo 60s linear infinite;
    background-attachment: fixed;
    /* mix-blend-mode: difference; */
}

/* .dark .jumbo {
                background-image: var(--stripesDark), var(--rainbow);
                filter: blur(10px) opacity(50%) saturate(200%);
            }
            .dark .jumbo::after {
                background-image: var(--stripesDark), var(--rainbow);
            } */

.content {
    color: white;

    height: 100vh;
    width: 100%;

    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;

}

.body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
}

.head {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.wmqs {
    display: inline-block;
    height: auto;
    width: 20%;
    border-radius: 50%;
    overflow: hidden;
    transform:scale(1);
    transition: 
        box-shadow 300ms,
        transform 400ms;
}

@keyframes grow1{
    0%{
        transform: scale(1);
    }
    100%{
        transform: scale(1.05);
    }
}
.wmqs:hover{
    transform: scale(1.05);
    /* scale: 1.05; */
    /* animation: grow1 500ms;
    animation-fill-mode: forwards; */
    box-shadow:var(--shadow-elevation-medium);
}


.wmqs img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}