*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body
{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #607d86;
}
.container
{
    position: relative;
    top: 50px;
}

.helmetbase {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 280px;
    height: 300px;
    background: linear-gradient(to right, #0437F2, #0437F2);
    border-top-left-radius: 45%;
    border-top-right-radius: 45%;
}

.lefthelmet {
    position: absolute;
    top: 150px;
    left: -50px;
    width: 100px;
    height: 150px;
    background: linear-gradient(to right, #0437F2, #0437F2);
    border-top-left-radius: 45%;
    border-top-right-radius: 45%;
}

.righthelmet {
    position: absolute;
    top: 150px;
    right: -50px;
    width: 100px;
    height: 150px;
    background: linear-gradient(to right, #0437F2, #0437F2);
    border-top-left-radius: 45%;
    border-top-right-radius: 45%;
}
.tophelmet {
    position: absolute;
    top: -20px; /* Adjust to align with the cup */
    right: 90px;
    width: 100px;
    height: 100px;
    background: linear-gradient(to right, #0437F2, #0437F2);
    border-top-left-radius: 20%;
    border-top-right-radius: 20%;
}
.lens1 {
    position: absolute;
    top: 120px; /* Adjust to align with the cup */
    right: 15px;
    width: 100px;
    height: 45px;
    background: linear-gradient(to right, #090000, #a62728);
    border-radius: 0 0 50% 80%;
    transform: rotate(20deg)
}
.lens2 {
    position: absolute;
    top: 120px; /* Adjust to align with the cup */
    right: -120px;
    width: 100px;
    height: 45px;
    background: linear-gradient(to left, #090000, #a62728);
    border-radius: 0 0 80% 50%;
    transform: rotate(-20deg)
}
.vent1 {
    position: absolute;
    top: 200px; /* Adjust to align with the cup */
    right: -50px;
    width: 100px;
    height: 100px;
    background: linear-gradient(to left, #090000, #090000);
    border-top-left-radius: 40%;
    border-top-right-radius: 40%; 
}
.line1{
    position: absolute;
    top: 0px; /* Adjust to align with the cup */
    right: 20px;
    width: 10px;
    height: 100px;
    background: linear-gradient(to left, #4e4646, #4e4646);
    border-top-right-radius: 40%;
}
.line2{
    position: absolute;
    top: 0px; /* Adjust to align with the cup */
    right: 45px;
    width: 10px;
    height: 100px;
    background: linear-gradient(to left, #4e4646, #4e4646);
}
.line3{
    position: absolute;
    top: 0px; /* Adjust to align with the cup */
    right: 70px;
    width: 10px;
    height: 100px;
    background: linear-gradient(to left, #4e4646, #4e4646);
    border-top-left-radius: 40%;
}
.vent2 {
    position: absolute;
    top: -10px; /* Adjust to align with the cup */
    right: -40px;
    width: 80px;
    height: 30px;
    background: linear-gradient(to right, #090000, #090000);
    border-top-left-radius: 20%;
    border-top-right-radius: 20%;
}
.pipe1 {
    position: absolute;
    top: 260px ;/* Adjust to align with the cup */
    right: 50px;
    width: 110px;
    height: 50px;
    background: linear-gradient(to right, #b6b6b6, #121111);
    border-top-right-radius: 20%;
    border-bottom-left-radius: 20%;
    border-bottom-right-radius: 20%;
}
.pipe2 {
    position: absolute;
    top: 260px ;/* Adjust to align with the cup */
    right: -160px;
    width: 110px;
    height: 50px;
    background: linear-gradient(to left, #b6b6b6, #121111);
    border-top-left-radius: 20%;
    border-bottom-left-radius: 20%;
    border-bottom-right-radius: 20%;
}
.smoke
{
    position: relative;
    display: flex;
    z-index: 1;
    padding: 0 20px;
}
.smoke span
{
    position: relative;
    right: 30px;
    bottom: 30px;
    display: block;
    margin: 0 2px 50px;
    min-width: 8px;
    height: 120px;
    background: #ffff;
    border-radius: 50%;
    animation: animate 5s linear infinite;
    opacity: 0;
    filter: blur(8px);
    animation-delay: calc(var(--i)* -0.5s);
}
@keyframes animate
{
    0%
    {
        transform: translateY(0) scaleX(1);
        opacity: 0;
    }
    15%
    {
        opacity: 1;
    }
    50%
    {
        transform: translateY(-150px) scaleX(5);
    }
    95%
    {
        opacity: 0;
    }
    100%
    {
        transform: translateY(-300px) scaleX(10);
    }
}