#abrirNemo {
position: fixed;
bottom: 20px;
right: 20px;
display: block;
}

.nemo_bg {
    position: fixed;
    z-index: 9999998;
    /* From https://css.glass */
    /*background: rgba(161, 161, 161, 0.2);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    /* From https://css.glass */
    width: 100%;
    height: 100%;
}

/* Franklin's Container */

.fish {
    width: 150px;
    height: 100px;
    animation: swim 7s;
}


/* Franklin */

.fish-body {
    position: relative;
    margin-top: 30px;
    margin-left: 40px;
    background-color: orange;
    border-radius: 50%;
    width: 150px;
    height: 100px;
}

.eye {
    position: absolute;
    margin-left: 100px;
    margin-top: 20px;
    z-index: 1;
    background-color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
}

.pupil {
    position: absolute;
    z-index: 2;
    margin-left: 5px;
    margin-top: 5px;
    background-color: black;
    border-radius: 50%;
    height: 10px;
    width: 10px;
}

.fin {
    margin-top: -100px;
    background-color: orange;
    border-radius: 50%;
    transform: rotate(40deg);
    width: 80px;
    height: 50px;
}

.fin-bottom {
    margin-top: -10px;
    transform: rotate(-40deg);
}


/* Bubbles */

.bubbles {
    position: absolute;
    bottom: 0;
    z-index: 5;
    margin-right: 50px;
    background-color: white;
    border-radius: 50%;
    opacity: .50;
    width: 40px;
    height: 40px;
    animation: up 4s infinite;
}

.bubble-2 {
    left: 350px;
    animation: up 2s infinite;
}

.bubble-3 {
    left: 750px;
    opacity: .30;
    animation: up 5s infinite;
}

.bubble-4 {
    left: 1150px;
    animation: up 6s infinite;
}

.bubble-5 {
    left: 50px;
    animation: up 5s infinite;
}

.bubble-6 {
    left: 300px;
    opacity: .30;
    animation: up 3s infinite;
}

.bubble-7 {
    left: 670px;
    animation: up 4s infinite;
}

.bubble-8 {
    left: 1050px;
    opacity: .30;
    animation: up 3s infinite;
}


/* Swim Animation */

@keyframes swim {
    0% {
        transform: translateY(-50px) translateX(0) rotate(30deg);
    }
    25% {
        /*transform: translateY(50px) translateX(250px) rotate(20deg);*/
        transform: translateY(15vh) translateX(15vh);
    }
    50% {
        /*transform: translateY(300px) translateX(500px);*/
        transform: translateY(50vh) translateX(50vh);
    }
    75% {
        /*transform: translateY(190px) translateX(850px) rotate(-20deg);*/
        transform: translateY(35vh) translateX(35vh);
    }
    100% {
        transform: translateY(-170px) translateX(1200px) rotate(-40deg);
    }
}


/* Bubbles Animation */

@keyframes up {
    100% {
        transform: translateY(-800px);
    }
}