@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* ======= Main CSS ======= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins',sans-serif;
    align-items: center;
}

body {
    min-height: 100vh;
    background: #15151c;
    /* display: flex;
    justify-content: center;
    align-items: center; */
}
/* ======= Cursor click animation ======= */
.cursor {
    z-index: 99999;
    position: fixed;
}

.cursor .clic-animation {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cursor .clic-animation .shape {
    position: absolute;
    opacity: 0;
}
/* ======= Circles ======= */
.cursor .clic-animation .shape.circle.big {
    width: 40px;
    height: 40px;
    border: 2px solid #4fb4f8;
    border-radius: 50%;
}

.cursor .clic-animation .shape.circle.small {
    width: 20px;
    height: 20px;
    border: 1px solid #2ca8fa;
    border-radius: 50%;
}

.cursor.active .clic-animation .shape.circle {
    animation: click-animation-circle 3s ease-out infinite;
}

@keyframes click-animation-circle {
    0% {
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    30% {
        opacity: 0;
        transform: scale(3);
    }
}
/* ======= Triangles ======= */
.cursor .clic-animation .shape.triangle.yellow {
    border-style: solid;
    border-width: 0 5px 10px 5px;
    border-color: transparent transparent #f9de2d transparent;
}

.cursor.active .clic-animation .shape.triangle.yellow {
    animation: click-animation-triangle-yellow 3s ease-out infinite;
}

@keyframes click-animation-triangle-yellow {
    0% {
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    40% {
        opacity: 0;
        transform: scale(2.5) translate(50px, -50px) rotate(360deg);
    }
}

.cursor .clic-animation .shape.triangle.green {
    border-style: solid;
    border-width: 0 3.5px 7px 3.5px;
    border-color: transparent transparent #47eda0 transparent;
}

.cursor.active .clic-animation .shape.triangle.green {
    animation: click-animation-triangle-green 3s ease-out infinite;
}

@keyframes click-animation-triangle-green {
    0% {
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    40% {
        opacity: 0;
        transform: scale(2.5) translate(20px, 50px) rotate(360deg);
    }
}
/* ======= Disc ======= */
.cursor .clic-animation .shape.disc {
    width: 8.5px;
    height: 8.5px;
    background: #d563f8;
    border-radius: 50%;    
}

.cursor.active .clic-animation .shape.disc {
    animation: click-animation-disc 3s ease-out infinite;
}

@keyframes click-animation-disc {
    0% {
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    40% {
        opacity: 0;
        transform: scale(2) translate(-70px, -30px);
    }
}

/* ======= Home section ======= */