body {
    font-family: "Poppins", sans-serif;
    font-optical-sizing: auto;
    /* background-image: url('bg.png');
    background-repeat: repeat; */
}

canvas {
    display: block;
    vertical-align: bottom;
}

#particles-js {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: -1;
}

.glass {
    background: rgba(0, 0, 0, 0.2);
}

@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
    .glass {
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }
}

.gradient-bg {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 200% 200%;
    animation: gradient 3s ease infinite;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}


.pattern {
    background-color: #ffffff;
    background-image: radial-gradient(#444cf7 0.5px, #ffffff 0.5px);
    background-size: 10px 10px;
}

.pattern-1 {
    background-color: #212529;
    opacity: 1;
    background-image:  linear-gradient(#343235 1px, transparent 1px), linear-gradient(to right, #343235 1px, #212529 1px);
    background-size: 20px 20px;
}