/* FONT */

body{
    font-family: "Comic Neue", cursive;
}
h1 {
  font-size: 3rem;
  line-height: 0.8;
}

h2 {
  font-size: 1.4rem;
  line-height: 0.9;
}

h3 {
  font-size: 1.2rem;
}

p {
  font-size: 0.9rem;
}

figcaption {
  font-weight: 700;
  font-size: 1.2rem;
}


/* BORDER */

.rsl-border{
    position:relative;
    overflow:hidden;
    isolation:isolate;

    border-radius:20px;
    background:#0d0d12;

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

/* Animated Border */
.rsl-border::before{
    content:"";
    position:absolute;
    width:300%;
    height:300%;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%) rotate(0deg);
    z-index:-2;
    background:var(
        --rsl-border-gradient,
        conic-gradient(
            from 0deg,

            transparent 0deg,
            transparent 35deg,
            #6d28d9 50deg,
            #a855f7 65deg,
            #d946ef 80deg,
            transparent 95deg,

            transparent 180deg,
            transparent 215deg,
            #6d28d9 230deg,
            #a855f7 245deg,
            #d946ef 260deg,
            transparent 275deg,
            transparent 360deg
        )
    );
animation: none;
}

/* Inner Card Background */
.rsl-border::after{
    content:"";
    position:absolute;
    inset:2px;

    border-radius:18px;

    z-index:-1;

    background:
        radial-gradient(
            circle at top left,
            rgba(168,85,247,.08),
            transparent 40%
        ),
        linear-gradient(
            180deg,
            #13131a,
            #0c0c11
        );
}

/* Hover Effect */
.rsl-border:hover{

    transform:translateY(-5px);

    box-shadow:
        0 0 18px rgba(168,85,247,.20),
        0 0 35px rgba(168,85,247,.12),
        0 12px 35px rgba(0,0,0,.35);

}

/* Start Border Animation */
.rsl-border:hover::before{
    animation:rslBorderRotate 2.8s linear infinite reverse;
}

/* Counter Clockwise Rotation */
@keyframes rslBorderRotate{

    from{
        transform:translate(-50%,-50%) rotate(360deg);
    }

    to{
        transform:translate(-50%,-50%) rotate(0deg);
    }

}


/* ==========================================
   PURPLE (#8700FF)
========================================== */

.rsl-border-backgrad-purple{

    --rsl-border-gradient:
    conic-gradient(
        from 0deg,

        transparent 0deg,
        transparent 35deg,
        #6d28d9 50deg,
        #a855f7 65deg,
        #d946ef 80deg,
        transparent 95deg,

        transparent 180deg,
        transparent 215deg,
        #6d28d9 230deg,
        #a855f7 245deg,
        #d946ef 260deg,
        transparent 275deg,

        transparent 360deg
    );

}


/* ==========================================
   ORANGE (#FF8700)
========================================== */

.rsl-border-backgrad-orange{

    --rsl-border-gradient:
    conic-gradient(
        from 0deg,

        transparent 0deg,
        transparent 35deg,
        #ff6a00 50deg,
        #ff8700 65deg,
        #ffb347 80deg,
        transparent 95deg,

        transparent 180deg,
        transparent 215deg,
        #ff6a00 230deg,
        #ff8700 245deg,
        #ffb347 260deg,
        transparent 275deg,

        transparent 360deg
    );

}


/* ==========================================
   GREEN (#36B378)
========================================== */

.rsl-border-backgrad-green{

    --rsl-border-gradient:
    conic-gradient(
        from 0deg,

        transparent 0deg,
        transparent 35deg,
        #1f9d6a 50deg,
        #36b378 65deg,
        #6fd8a5 80deg,
        transparent 95deg,

        transparent 180deg,
        transparent 215deg,
        #1f9d6a 230deg,
        #36b378 245deg,
        #6fd8a5 260deg,
        transparent 275deg,

        transparent 360deg
    );

}


/* ==========================================
   WHITE / SILVER
========================================== */

.rsl-border-backgrad-white{

    --rsl-border-gradient:
    conic-gradient(
        from 0deg,

        transparent 0deg,
        transparent 35deg,
        #bfc3c9 50deg,
        #ffffff 65deg,
        #f5f5f5 80deg,
        transparent 95deg,

        transparent 180deg,
        transparent 215deg,
        #bfc3c9 230deg,
        #ffffff 245deg,
        #f5f5f5 260deg,
        transparent 275deg,

        transparent 360deg
    );

}


.rsl-backgrad-purple{
    background: linear-gradient(45deg,transparent,#8700FF);
    border: 1px solid #8700FF;
}

.rsl-backgrad-orange{
    background: linear-gradient(45deg,transparent,#FF8700);
    border: 1px solid #FF8700;
}

.rsl-backgrad-green{
    background: linear-gradient(45deg,transparent, #36B378);
    border: 1px solid #36B378;
}

.rsl-backgrad-white{
    background: linear-gradient(45deg,transparent, #ffffff);
    border: 1px solid #ffffff;
}