body{

body {
    background-image: url('index.JPG');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

}

/* scène */

#blood-system{

    width:100vw;
    height:100vh;
    position:relative;

}

/* blob générique */

.blob{

    position:absolute;

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

    color:white;
    font-weight:bold;

    cursor:pointer;

    background:
    radial-gradient(
        circle at 30% 30%,
        #ff4444,
        #990000
    );

    box-shadow:
    0 0 30px rgba(255,0,0,.3);

}

/* animation liquide */

.blob::before{

    content:"";

    position:absolute;

    inset:-4px;

    border-radius:inherit;

}

/* noyau */

.main{

    width:min(45vw,350px);
    height:min(45vw,350px);


    left:50%;
    top:50%;

    transform:
    translate(-50%,-50%);

    font-size:30px;

    z-index:100;

}

/* formes irrégulières */

.blob{

    animation:
    morph 7s ease-in-out infinite,
    breathing 5s ease-in-out infinite;
    transform:translate(-50%,-50%);

}


@keyframes morph{

0%{

border-radius:
60% 40% 45% 55% /
40% 60% 40% 60%;

}

50%{

border-radius:
40% 60% 65% 35% /
55% 45% 65% 35%;

}

100%{

border-radius:
60% 40% 45% 55% /
40% 60% 40% 60%;

}

}

@keyframes breathing{

0%{
transform:scale(1);
}

50%{
transform:scale(1.04);
}

100%{
transform:scale(1);
}

}

.blood-particle{

    position:absolute;

    width:5px;
    height:5px;

    border-radius:50%;

    background:#cc0000;

    animation:
    drift linear infinite;

}

@keyframes drift{

    from{

        transform:
        translateX(0);

    }

    to{

        transform:
        translateX(120px);

    }

}