body {
    margin: 0;
    height: 100vh;
    overflow: hidden;
    position: relative;

    background:
        url('titlecard/background/background0.png')
        no-repeat center center/cover;

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

body::before {
    content: "";
    position: fixed;
    inset: -1%;

    background: inherit;

    opacity: 0.14;

    filter: blur(2px);

    animation: softWave 10s ease-in-out infinite;

    pointer-events: none;
}

a img {
    width: 450px;
    height: auto;
    cursor: pointer;
    position: relative;
    z-index: 2;

    animation: floating 3s ease-in-out infinite;
}

@keyframes floating {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0px);
    }
}

@keyframes softWave {
    0% {
        transform:
            translateX(0px)
            translateY(0px)
            scale(1);
    }

    25% {
        transform:
            translateX(2px)
            translateY(-1px)
            scale(1.003);
    }

    50% {
        transform:
            translateX(-2px)
            translateY(1px)
            scale(1.005);
    }

    75% {
        transform:
            translateX(1px)
            translateY(-1px)
            scale(1.002);
    }

    100% {
        transform:
            translateX(0px)
            translateY(0px)
            scale(1);
    }
}