body {
    margin: auto;
    background-color: rgb(57, 166, 225);
    transition: 1s;
    overflow: hidden;
}

.wrapper {
    display: flex;
}

.fish1 {
    position: absolute;
    top: 390px;
    transition: .2s;
}

.fish1 img {
    width: 100px;
}

.fish2 {
    position: absolute;
    top: 302px;
    transition: .2s;
}

.fish2-1, .fish2-2, .fish3-1, .fish3-2, .fish3-3 {
    transition: .2s;
}

.fish2-1 img{
    width: 310px;
    transition: .2s;
}

.fish2-2 img {
    width: 310px;
}

.fish3 {
    position: absolute;
    top: 40px;
    transition: .2s;
}

.fish3-1 img{
    width: 720px;
}

.fish3-2 img {
    width: 720px;
}

.fish3-3 img {
    width: 720px;
}

.girl {
    position: absolute;
    top:0;
    right: 0;
    transition: 2s;
}

.girl img {
    height: 80vh;
}

.aquarium {
    transition: 2s;
}

@media (max-width: 310px)  {
    .fish1 {
        transform: translateX(-15vw);
    }

    .fish2 {
        transform: translateX(-140vw);
    }

    .fish2, .fish3 {
        display: none;
    }

    .girl img {
        display: none;
    }

}

@media (min-width: 310px) and (max-width: 600.99px)  {
    .fish1 {
        transform: translateX(5vw);
    }

    .fish2 {
        transform: translateX(-100vw);
    }

    .fish2-2, .fish3 {
        display: none;
    }

    .girl img {
        display: none;
    }

}

@media (min-width: 600px) and (max-width: 800.99px)  {
    .fish1 {
        transform: translateX(5vw);
    }

    .fish2 {
        transform: translateX(-25vw);
    }

    .fish2-2 {
        display: none;
    }

    .fish3 {
        display: none;
    }

    .fish3-1 {
        transform: translateX(-35vw);
    }

    .girl img {
        display: none;
    }
}

@media (min-width:801px) and (max-width: 900.99px)  {
    .fish1 {
        transform: translateX(15vw);
    }
    
    .fish2 {
        transform: translateX(-5vw);
    }

    .fish2-2{
        opacity: 0;
    }

    .fish3 {
        transform: translateX(-130vw);
    }

    .fish3-2, .fish3-3 {
        display: none;
    }

    .fish3-1 {
        transform: translateX(-35vw);
    }

    .girl img {
        display: none;
    }
}

@media (min-width:901px) and (max-width: 1100.99px)  {
    .fish1 {
        display: none;
    }

    .fish2 {
        transform: translateX(20vw);
    }

    .fish2-1 {
        opacity: 0;
    }

    .fish3 {
        transform: translateX(-130vw);
    }

    .fish3-2, .fish3-3 {
        display: none;
    }

    .fish3-1 {
        transform: translateX(-35vw);
    }

    .girl img {
        display: none;
    }
}


@media (min-width:1101px) and (max-width: 1200.99px)  {
    .fish1 {
        display: none;
    }
    .fish2 {
        transform: translateX(20vw);
    }

   .fish2-1 {
        display: none;
    }

    .fish3 {
        transform: translateX(-30vw);
    }

    .fish3-2, .fish3-3 {
        display: none;
    }

    .fish3 {
        transform: translateX(-55vw);
    }

    .girl img {
        display: none;
    }

}


@media (min-width:1201px) and (max-width: 1300.99px)  {
    .fish1 {
        display: none;
    }
    .fish2 {
        transform: translateX(25vw);
    }

   .fish2-1 {
        display: none;
    }

    .fish3 {
        transform: translateX(-35vw);
    }

    .fish3-2, .fish3-3 {
        display: none;
    }

    .girl img {
        display: none;
    }
}

@media (min-width:1301px) and (max-width: 1400.99px)  {
    .fish1 {
        display: none;
    }
    .fish2 {
        transform: translateX(35vw);
    }

   .fish2-1 {
        display: none;
    }

    .fish3 {
        transform: translateX(5vw);
    }

    .fish3-2, .fish3-3 {
        opacity: 0;
    }

    .girl img{
       display: none;
    }

    .girl {
        transform: translateX(50px);
    }

}

@media (min-width:1401px) and (max-width: 1550.99px)  {
    .fish1 {
        display: none;
    }
    .fish2 {
        display: none;
    }

   .fish2-1 {
        display: none;
    }
    .fish3 {
        transform: translateX(20vw);
    }

    .fish3-1, .fish3-3 {
        display: none;
    }

    .fish3-2 {
        opacity: 100%;
    }

    .girl {
        transform: translateX(450px);
    }

    .girl img {
        display: none;
    }
}

@media (min-width:1551px) {
    .fish1 {
        display: none;
    }
    .fish2 {
        display: none;
    }

    .fish2-1 {
        display: none;
    }

    .fish3 {
        transform: scale(0.5) translateX(20vw);
        transition: 1.5s;
    }

    .fish3-1, .fish3-2 {
        display: none;
    }

    .fish3-3 {
        opacity: 100%;
    }

    .girl {
        transform: translateX(0px);
    }

    .aquarium {
        background-image:
        linear-gradient(to top, rgba(52, 176, 242, 0.52), rgba(35, 33, 152, 0.73));
        width: 60%;
        height: 108vh;
        background-size:auto;
        border: 2em solid rgba(166, 224, 255, 0.5);
    }

    body {
        background-color: rgb(164, 223, 255);;
    }
}