/*  STEAM  */
@keyframes steamRise {
    0% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform-origin: center;
    }
    50%{
        opacity: 0;
        -webkit-transform: scale(1.3);
        transform-origin: center;
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform-origin: center;
    }
}

#cup{
    transform: scale(1.4) translateY(4px) translateX(40px);
    transform-origin: bottom;
}

#flowers{
    transform: scale(1.4) translateY(4px) translateX(60px);
    transform-origin: bottom;
}

.steam1{
    -webkit-animation: steaming 7s linear infinite;
    -moz-animation: steaming 7s linear infinite;
    animation: steaming 7s linear infinite;
}

.steam2{
    -webkit-animation: steaming 5s linear infinite;
    -moz-animation: steaming 5s linear infinite;
    animation: steaming 5s linear infinite;
}

.steam3{
    -webkit-animation: steaming 9s linear infinite;
    -moz-animation: steaming 9s linear infinite;
    animation: steaming 9s linear infinite;
}

.steam4{
    -webkit-animation: steaming 7.5s linear infinite;
    -moz-animation: steaming 7.5s linear infinite;
    animation: steaming 7.5s linear infinite;
}

@-webkit-keyframes steaming {
    0% {
        transform: translateY(0px);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

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

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

    50% {
        opacity: 1;
    }

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

@-moz-keyframes steaming {
    0% {
        transform: translateY(0px);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

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

.wrapped-text{
    display: inline-block;
    background-color: var(--dark-blue-color);
    transform: rotate(-4deg);
    padding: 3px 15px;
    border-radius: 2px;
    font-size: 7vw;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: -1vw;
    transition: background 2s ease, color 2s ease;
}

.wrapped-text:hover{
    background-color: var(--green-color);
    color: var(--yellow-color);
}

#code_left line, #code_right line {
    stroke-opacity: 0;
}

.code-animation {
    animation: line-draw 0s forwards, typing 2s forwards;
}

.code-not-animated {
    stroke-opacity: 1;
}

@keyframes typing {
    from { stroke-dashoffset: 300; }
    to { stroke-dashoffset: 0; }
}

@keyframes line-draw {
    from { stroke-opacity: 0; }
    to { stroke-opacity: 1; }
}

@keyframes wave {
    0% {
        top: 0px;
    }
    50% {
        top: -15px;
    }
    100% {
        top: 0px;
    }
}

.animate{
    animation-name: wave;
    animation-duration: 1.3s;
    animation-timing-function: ease;
    animation-iteration-count: 1;
    position: relative;
    top: 0;
    left: 0;
}