@import './component-styles.css';
@tailwind base;
@tailwind components;
@tailwind utilities;

[x-cloak] {
    display: none;
}

[x-cloak] {
    display: none;
}

svg {
    width: 100%;
}
.attachment__caption{
    display: none;
}
.wave {
    animation: wave 3s linear;
    animation-iteration-count: infinite;
    fill: #4e80ee;
}

#wave2 {
    animation-duration: 5s;
    animation-direction: reverse;
    opacity: .6
}

#wave3 {
    animation-duration: 7s;
    opacity: .3;
}

@keyframes drop {
    0% {
        transform: translateY(80%);
        opacity: .6;
    }

    80% {
        transform: translateY(80%);
        opacity: .6;
    }

    90% {
        transform: translateY(10%);
        opacity: .6;
    }

    100% {
        transform: translateY(0%) scale(1.5);
        stroke-width: 0.2;
        opacity: 0;
    }
}

@keyframes wave {
    to {
        transform: translateX(-100%);
    }
}