.title {
    font-family: comfortaa;
    background: linear-gradient(34deg, #7c57cd, #0f598b);
    font-weight: bolder;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.icon {
    height: 120px;
    margin-top: 20px;
}

:root {
    --pxl-font-main: "DM Sans";
}

#clone>.c-container {
    transform: translateY(5px);
}

#main>.c-container {
    transition: transform .2s ease;
}
#main>.c-container:hover {
    transform: translateY(2px);
}

@keyframes bouncey {
    0% { margin-top: 10px; }
    50% { margin-top: 0px; }
    100% { margin-top: 10px; }
}
@keyframes bouncex {
    0% { margin-left: -5px; }
    50% { margin-left: 5px; }
    100% { margin-left: -5px; }
}

#main >div {animation-delay: -1s;}
#main, #clone {
    animation: bouncex 6s ease-in-out infinite, bouncey 6s ease-in-out infinite;
    animation-delay: -1.5s, 0s;
    
}
#clone {
    animation-delay: -1.5s, -.4s;
}

body {
    background: linear-gradient(34deg, #c0afdf, #77c8ff);
}

@keyframes appear {
	0% {opacity: 0}
	50% {opacity: 0}
	100% {opacity: 1}
}

.popin {animation: appear 2s ease;}
.popin+.popin {animation-delay: -.1s;}