*{
    margin: 0;
    padding: 0;
    font-family: 'Fruktur', cursive;
    box-sizing: border-box;
}

#web {
    color: rgb(44, 41, 41);
    word-spacing: 5px;
    text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F,
    0 0 0.2em #87F;
    font-size: 58px;
}

#mobile {
    display: none;
}


#conteiner {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: baseline;
    background-image: url(./assets/bobsponjaweb.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 80%;
    background-position-y: 70%;
}

#conteiner span {
    position: absolute;
    bottom: 20px;
    border-radius: 50px;
    background: transparent;
    box-shadow: inset 0 0 10px #04125f;
    animation: animate 4s linear infinite;
}

#conteiner span:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    transform: scale(0.25) translate(-70%,-70%);
    background: radial-gradient(#ffffff,transparent);
}

@keyframes animate {
    0%{
        transform: translateY(0%);
        opacity: 1;
    }
    100%{
        transform: translateY(-1200%);
    }
}

@media (max-width: 680px)  {

    #conteiner {
    background-image: url(./assets/bobsponjamobile.jpg);
    background-attachment: cover;
    background-position: top;
    }

    #web {
        display: none;
    }

    #mobile {
        display: unset;
        margin-top: 45%;
        color:black;
        word-spacing: 5px;
        text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F,
        0 0 0.2em #87F;
        font-size: 40px;
    }
}