.ralat {
    display: block;
    padding: var(--saiz-ganda);
    padding-bottom: calc( 8svh + var(--saiz-penuh) );
    font-family: var(--rupa-taip-paparan);
    flex-grow: 1;
}
.ralat > svg {
    width: 100%;
    height: auto;
}
.ralat > svg #teks path {
    fill: var(--warna-perdana);
}
.ralat p {
    padding: var(--saiz-penuh) 0;
}


@keyframes placeholder {
    50% {
        opacity: 0;
    }
}

.ralat > svg #teks path:nth-child(odd) {
    animation: bouncing 1.5s linear infinite;
}
@keyframes bouncing {
    0% {
        transform: translateY(0) ;
        fill: var(--warna-info);
    }
    50% {
        transform: translateY(-30svh);
        fill: var(--warna-sekunder);
    }
    100% {
        transform: translateY(0);
        fill: var(--warna-info);
    }
}
.ralat > svg #teks path:nth-child(even) {
    animation: bouncing 1s linear infinite;
}
[data-halaman="ralat404"] .ralat > svg #teks path:nth-child(n + 6) {
    animation: bouncing2 2s linear infinite;
}

@keyframes bouncing2 {
    0% {
        transform: translateY(0);
        fill: var(--warna-perdana);
    }
    50% {
        transform: translateY(30svh);
        fill: var(--warna-amaran);
    }
    100% {
        transform: translateY(0);
        fill: var(--warna-bahaya);
    }
}

.ralat #teks > #kod > path {
    animation: fromright 2s linear infinite;
}

@keyframes fromright {
    0% {
        transform: translateX(100%);
        fill: var(--warna-perdana);
    }
    70% {
        opacity: 1;
        transform: translateX(0%);
        fill: var(--warna-amaran);
    }
    100% {
        opacity: 0;
        fill: var(--warna-bahaya);
    }
}

.ralat #simbol > g:nth-child(1) path {
    animation: kelipkelip 1.5s linear infinite;
}
.ralat #simbol > g:nth-child(2) path {
    animation: kelipkelip 2s linear infinite;
}
@keyframes kelipkelip {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}