@import url("https://fonts.googleapis.com/css2?family=Lilita+One&display=swap");


:root {
    /* Size */
    --Size10px: 10px;
    --Size12px: 12px;
    --Size14px: 14px;
    --Size16px: 16px;
    --Size18px: 18px;
    --Size20px: 20px;
    --Size22px: 22px;

    --EM-Font_1: 1em;
    --EM-Font_2: 2em;
    --EM-Font_5: 5em;
    --EM-Font_6: 6em;
    --warnaPutih: transparent;

    --int-100: 100%;
    --coffee_color: rgb(111, 78, 55);
    --gelas_coffe: #ff0000;
    /* linear-gradient(to right, #243949 0%, #517fa4 100%) */

}

html,
body {
    overflow: hidden;
    padding: 0px;
    margin: 0px; 
}

#body404 {
    margin: 0;
    padding: 0;
    left: 0;
    padding: 0;
    position: relative;
    height: 100vh;
    width: auto;
    background-color: transparent;
}

.body404_Sub {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.Con_coffee {
    position: relative;
    margin: 0 auto;
    width: var(--EM-Font_6);
    height: var(--EM-Font_5);
    border-radius: .05em .05em 3em 3em;
}

.Con_coffee::after {
    content: '';
    display: block;
    position: absolute;
    left: var(--int-100);
    top: 0.6em;
    width: 1.3em;
    height: var(--EM-Font_2);
    margin-left: 0.5em;
    border-radius: 0 50% 50% 0;
    z-index: -1;
}

.Con_coffee,
.Con_coffee::after {
    box-shadow: 0 0 0 .61em rgb(50, 50, 50);
}

.Con_coffee::before {
    content: ' ';
    display: block;
    position: absolute;
    bottom: -1em;
    width: var(--int-100);
    height: 0.3em;
    background-color: rgb(134, 134, 134);
    border-radius: 50% 50% 50% 50%;
    z-index: 999;
}

.coffee-container {
    position: absolute;
    z-index: 10;
    left: 0;
    top: 0;
    width: var(--int-100);
    height: var(--int-100);
    overflow: hidden;
    background: var(--warnaPutih);
    border-radius: .05em .05em 3em 3em;
}

.coffee {
    position: absolute;
    left: -0.5em;
    top: 80px;
    width: 110%;
    height: var(--int-100);
    background: var(--coffee_color);
    animation: coffee-load 3.9s infinite;
}

.coffee:before {
    content: '';
    display: block;
    width: 200%;
    height: 1em;
    position: absolute;
    left: -50%;
    top: -.2em;
    animation: coffee-wave .2s ease-in-out infinite;
    border-radius: 50%;
}

#anima1 {
    display: flex;
    justify-content: center;
    width: 50px;
    position: absolute;
    top: 0;
}

#anima1 span {
    position: relative;
    top: -20px;
    margin: 0 2px 20px;
    min-width: 8px;
    height: 20px;
    background: rgb(132, 136, 132);
    border-radius: 50%;
    animation: animateSmokeCofee 3s linear infinite;
    opacity: 0;
    filter: blur(8px);
    animation-delay: calc(var(--i) * 1s);
}

/* ! AnimateSmokeCofee */
@-webkit-keyframes animateSmokeCofee {
    0% {
        transform: translateY(0) scaleX(1);
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    50% {
        transform: translateY(-75px) scaleX(5);
    }

    95% {
        opacity: 0.4;
    }

    100% {
        transform: translateY(-150px) scaleX(10);
    }
}

@keyframes animateSmokeCofee {
    0% {
        transform: translateY(0) scaleX(1);
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    50% {
        transform: translateY(-75px) scaleX(5);
    }

    95% {
        opacity: 0.4;
    }

    100% {
        transform: translateY(-150px) scaleX(10);
    }
}

/* coffee-load */
@-webkit-keyframes coffee-load {
    0% {
        -webkit-transform: translateY(-80%);
        transform: translateY(-80%);
        visibility: visible;
    }

    2% {
        -webkit-transform: translateY(-75%);
        transform: translateY(-75%);
        visibility: visible;
    }

    10% {
        -webkit-transform: translateY(-68%);
        transform: translateY(-68%);
        visibility: visible;
    }

    22% {
        -webkit-transform: translateY(-60%);
        transform: translateY(-60%);
        visibility: visible;
    }

    50% {
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    70% {
        -webkit-transform: translateY(-37%);
        transform: translateY(-37%);
    }

    90% {
        -webkit-transform: translateY(-26%);
        transform: translateY(-26%);
    }

    100% {
        -webkit-transform: translateY(-10%);
        transform: translateY(-10%);
    }
}

@keyframes coffee-load {
    0% {
        -webkit-transform: translateY(-80%);
        transform: translateY(-80%);
        visibility: visible;
    }

    2% {
        -webkit-transform: translateY(-75%);
        transform: translateY(-75%);
        visibility: visible;
    }

    10% {
        -webkit-transform: translateY(-68%);
        transform: translateY(-68%);
        visibility: visible;
    }

    22% {
        -webkit-transform: translateY(-60%);
        transform: translateY(-60%);
        visibility: visible;
    }

    50% {
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    70% {
        -webkit-transform: translateY(-37%);
        transform: translateY(-37%);
    }

    90% {
        -webkit-transform: translateY(-26%);
        transform: translateY(-26%);
    }

    100% {
        -webkit-transform: translateY(-10%);
        transform: translateY(-10%);
    }
}

@-webkit-keyframes coffee-wave {
    0% {
        transform: rotate(-2deg);
    }

    50% {
        transform: rotate(2deg);
    }

    100% {
        transform: rotate(-2deg);
    }
}

@keyframes coffee-wave {
    0% {
        transform: rotate(-2deg);
    }

    50% {
        transform: rotate(2deg);
    }

    100% {
        transform: rotate(-2deg);
    }
}


.TextFooter {
    font-size: 10px;
}