body .sink .faucets .cold-water {
    top: -4.375rem;
    margin-top: 103%;
    width: 0.625rem;
    height: 3.75rem;
    background: #d7e0e2;
    border-radius: 0.3125em;
    cursor: pointer;
    left: -0.3125rem;
}


body .sink .faucets .cold-water::before {
    content: "";
    position: absolute;
    top: 90%;
    left: -40%;
    width: 200%;
    height: 1.875rem;
    border-top-left-radius: 0.3125em;
    border-top-right-radius: 0.3125em;
    rotate: -90deg;
}

body .sink .faucets .cold-water::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0.75em;
    border-top-left-radius: 0.3125em;
    border-top-right-radius: 0.3125em;

}



@keyframes water {
    0% {
        height: 0;
    }

    25% {
        height: 7.5em;
    }

    50% {
        height: 15em;
    }

    75% {
        height: 22.5em;
    }

    100% {
        height: 30em;
    }
}

@keyframes waterDisappear {
    0% {
        height: 30em;
    }


    100% {
        margin: 30em;
        height: 0;
    }
}

@keyframes timeOut {
    0% {
        pointer-events: none;
    }


    100% {
        pointer-events: auto;
    }
}

@keyframes timeOut2 {
    0% {
        pointer-events: none;
    }


    100% {
        pointer-events: auto;
    }
}



@keyframes camouflage {
    0% {
        background-color: transparent;
    }

    99% {
        background-color: transparent;
    }

    100% {
        background-color: #3498db;
    }
}

@keyframes camouflage2 {
    0% {
        background-color: transparent;
    }

    99% {
        background-color: transparent;
    }

    100% {
        background-color: #3498db;
    }
}

@keyframes camouflage3 {
    0% {
        background-color: transparent;
    }

    99% {
        background-color: transparent;
    }

    100% {
        background-color: #3498db;
    }
}


body .sink,
.sinks {

    position: relative;
    width: 17em;
    height: 0em;
}

body .sink {
    width: 0em;
    height: 0em;
}

body .sink .faucets {
    position: relative;
    top: 40.625rem;
    left: 47vw;
    margin: 0 auto;
    width: 4.5em;
    height: 6em;
}

body .sink .faucets .output,
body .sink .faucets .cold-water {
    position: relative;
    float: left;
}

body .sink .faucets .output {
    margin-top: 18%;
    width: 1.25em;
    height: 6em;
    background: #d7e0e2;
    border-radius: 0.3125em;
}

body .sink .faucets .output::after {
    content: "";
    position: absolute;
    top: -0.0625rem;
    left: 0;
    width: 100%;
    height: 1.618em;
    background: #f2f5f5;
    border-radius: 0.3125em;
    border-bottom: 0.3125rem solid gray;
}



.camouflage {
    position: relative;
    margin: 0 auto;
    width: 50%;
    height: auto;
    background-color: #3498db;
    animation: camouflage 10s forwards ease;
}

body .sink .faucets .cold-water::after {
    background: #3498db;
}

.valve-btn:checked~*.cold-water::after {
    animation: delay 37s ease;
}

.valve-btn:not(:checked)~*.cold-water::after {
    animation: delay2 37s ease;
}

@keyframes delay {
    0% {
        background-color: red;
    }

    100% {
        background: #3498db;
    }
}

@keyframes delay2 {
    0% {
        background-color: red;
    }

    100% {
        background: #3498db;
    }
}


body .sink .faucets .cold-water::before {
    background: #8f9294;
    border-right: 0.0625rem solid black;
}





@keyframes openWater {
    0% {
        left: -5;
        rotate: 0;
    }

    100% {
        left: -1.25rem;
        rotate: -13deg;
    }
}

@keyframes closeWater {
    0% {
        left: -1.25rem;
        rotate: -13deg;
    }

    100% {
        left: -0.3125rem;
        rotate: 0;
    }
}

@keyframes openWaterBase {
    0% {
        left: -40%;
        rotate: -90deg;
    }

    100% {
        top: 95%;
        left: 0.0625rem;
        rotate: -76deg;
    }
}

@keyframes closeWaterBase {
    0% {
        top: 95%;
        left: 0rem;
        rotate: -76deg;
    }

    100% {
        left: -0.25rem;
        rotate: -90deg;
    }

}



.valve-btn:checked~.output .camouflage .water {
    animation: water 4s ease forwards;
}



.valve-btn:checked~.cold-water {
    animation: timeOut 75s ease, openWater 0.5s ease forwards;
}



.valve-btn:checked~.cold-water::before {
    animation: openWaterBase 0.5s ease forwards;
}


.valve-btn:not(:checked)~.output .camouflage .water {
    animation: waterDisappear 4s ease forwards;
}


.valve-btn:not(:checked)~.cold-water::before {
    animation: closeWaterBase 0.5s ease;
}

.valve-btn:not(:checked)~.cold-water {
    animation: timeOut2 65s ease, closeWater 0.5s ease forwards;
}

.sink-body {
    all: initial;
    position: absolute;
    left: 0;
    width: 90%;
    height: 10rem;
    border: 0.625rem solid black;
    border-top: none;
    border-radius: 0.3125em;
    background-color: transparent;
    padding: auto;
}

.sink-body::after {
    content: "";
    position: absolute;
    top: 9.875rem;
    left: 5.9375rem;
    width: 1.875rem;
    height: 10rem;
    border-left: 0.625rem solid black;
    border-top: 0.625rem solid #b6daf2;
    border-right: 0.625rem solid black;
    background-color: transparent;
    background-position-y: 100%;

}




.sinks {
    position: relative;
    top: 19.0625rem;
    left: -6.25rem;
    z-index: 0;
    background-color: transparent;
    height: 21.875rem;
}

.valve-btn:checked~.sinks .sink-body .sink-water {
    position: absolute;
    animation: background-growth 14s forwards;
    animation-delay: 7s;
    z-index: -1;
    height: 100%;
    width: 100%;
}

.valve-btn:not(:checked)~.sinks .sink-body .sink-water {
    position: absolute;
    animation: background-growth2 14s forwards;
    z-index: -10;
    height: 100%;
    width: 100%;
}

@keyframes background-growth {
    0% {
        top: 100%;
        height: 0;
        background-color: #3498db;
    }

    100% {
        top: 0%;
        height: 100%;
        background-color: #3498db;
    }
}

@keyframes background-growth2 {

    0% {
        top: 0%;
        height: 100%;
        background-color: #3498db;
    }

    100% {
        top: 100%;
        height: 0;
        background-color: #3498db;
    }
}

.valve-btn {
    pointer-events: none;
    display: none;
}


.can-water {
    top: -105%;
    height: 100%;
    position: absolute;
    z-index: 1;
    width: 1.875rem;
    top: 105%;
    height: 0%;
    background-color: #3498db;
}

.valve-btn:not(:checked)~* .can-water {
    height: 100%;
    position: absolute;
    left: 6.5625rem;
    top: 105%;
    z-index: 1;
    width: 1.875rem;
    animation: background-can-water2 7s forwards;
    animation-delay: 13s;
}

.valve-btn:checked~* .water-camouflage {
    height: 100%;
    width: 100%;
    z-index: 2;
    animation: water-camouflage 3.6s ease;
}


.valve-btn:checked~* .can-water {
    height: 100%;
    position: absolute;
    left: 6.5625rem;
    top: 105%;
    z-index: 1;
    width: 1.875rem;
    animation: background-can-water 3s forwards;
    animation-delay: 3.5s;
}

body.dark-mode .sink {
    height: 43.75rem;
    width: 50%;
    border: 0.625rem solid #000;
    border-radius: 0.625rem;
    box-shadow: 0.3125rem 0.3125rem 0.625rem #888;
    padding: 1.25rem;
    background-color: #568794;
    position: static;
    max-width: 62.5rem;
}

.sink-div {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3.75rem 0;
}



body.dark-mode .sink .faucets {
    top: 3.125rem !important;
    left: 0 !important;
}

@keyframes water-camouflage {

    0% {
        background-color: #568794;
    }

    99% {
        background-color: #568794;
    }

    100% {
        background-color: #568794;
    }
}

@keyframes water-camouflage2 {

    0% {
        background-color: #568794;

    }

    99% {
        background-color: #568794;

    }

    100% {
        background-color: #568794;
    }
}



@keyframes background-can-water {

    0% {
        top: 105%;
        height: 0%;
        background-color: #3498db;
    }

    100% {
        top: 105%;
        height: 100%;
        background-color: #3498db;
    }
}

@keyframes background-can-water2 {


    0% {
        top: 105%;
        height: 100%;
        background-color: #3498db;
    }

    100% {
        top: 205%;
        height: 0%;
        background-color: #3498db;
    }


}

@keyframes open {
    0% {
        opacity: 0;
    }

    99% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.sink-body {
    animation: open 20s ease !important;
    animation-delay: 0.5s;
}