html{
	font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}
body {
        font-family: 'Nunito', sans-serif;
}

.blob-container {
    min-height: 100vh;
    overflow: hidden;
    position:absolute;
    width: 100%;
  filter: blur(3px);
}

.blob {
  border-radius: 50%;
    opacity: 0.8;
    position: absolute;
}

.blob.one{
    background: #ccf6c8;
    height: 200px;
    width: 200px;
    left: 10px;
    top: 10px;
    animation: movement_two 18s ease-in-out infinite both;
}

.blob.two{
    background: #e8d5fd;
    height: 200px;
    width: 200px;
    left: 1000px;
    top: 30px;
    animation: movement_two 21s ease-in-out infinite both;
}

.blob.three{
    background: #bce1f1;
    height: 160px;
    width: 160px;
    left: 500px;
    top: 60px;
    animation: movement_one 12s ease-in-out infinite both;
}

.blob.four{
    background: #cdefe7;
    height: 120px;
    width: 120px;
    left: 480px;
    top: 250px;
    animation: movement_one 16s ease-in-out infinite both;
}

.blob.five{
    background: #ffcef5;
    height: 100px;
    width: 100px;
    left: 150px;
    top: 400px;
    animation: movement_two 7s ease-in-out infinite both;
}

.blob.six{
    background: #e8d5fd;
    height: 130px;
    width: 130px;
    left: 400px;
    top: 400px;
    animation: movement_two 12s ease-in-out infinite both;
}

.blob.seven{
    background: #ffe083;
    height: 130px;
    width: 130px;
    left: 280px;
    top: 90px;
    animation: movement_two 13s ease-in-out infinite both;
}

.blob.eight{
    background: #fdffbc;
    height: 130px;
    width: 130px;
    left: 700px;
    top: 400px;
    animation: movement_two 16s ease-in-out infinite both;
}

.blob.nine{
    background: #fdcedf;
    height: 160px;
    width: 160px;
    left: 750px;
    top: 20px;
    animation: movement_two 10s ease-in-out infinite both;
}

.blob.ten{
    background: #cdefe7;
    height: 120px;
    width: 120px;
    left: 920px;
    top: 400px;
    animation: movement_one 11s ease-in-out infinite both;
}

@keyframes movement_one
{
    0%,
  100% { transform: none; }
   50% { transform: translate(50%, 20%) scale(1); }
}

@keyframes movement_two
{
    0%,
  500% { transform: none; }
   50% { transform: translate(20%, 80%) scale(1.3);}
}