/* page-footer */
.page-footer {
    position: relative;
    z-index: 1;
    padding-top: 60rem;
    flex-shrink: 0;

    background-image: url('../img/stars.png'), url('../img/sand.svg'), url('../img/sand-dark.svg'), url('../img/mountain.png');
    background-size: 24rem auto, auto 20rem, auto 23rem, 70rem auto;
    background-repeat: no-repeat, repeat-x, repeat-x, no-repeat;
    background-position: calc(100% - 1rem) 33rem, 100% 41rem, 100% 39rem, 100% 23rem;
}

@media (--screen-large) {
    .page-footer {
        background-image: url('../img/stars.png'), url('../img/sand.svg'), url('../img/weed.png'), url('../img/sand-dark.svg'), url('../img/mountain.png');
        background-size: auto, auto 23rem, auto, auto 23rem, 140rem auto;
        background-repeat: no-repeat, repeat-x, no-repeat, repeat-x, no-repeat;
        background-position: calc(100% - 7rem) 17rem, 100% 39rem, 2rem 15rem, 100% 37rem, 100% 6rem;
    }
}

.page-footer__submarine {
    padding-right: 4rem;

    position: absolute;
    left: 3rem;
    top: 10rem;

    .bubble {
        right: 0;
        top: 66%;
        &:nth-child(2) {
            right: -5%;
            top: 56%;
            width: 2rem;
            height: 2rem;
        }
        &:nth-child(3) {
            right: -2%;
            top: 45%;
            height: 2rem;
            width: 3rem;
        }
    }
}

@media (--screen-large) {
    .page-footer__submarine {
        top: 2rem;
        left: 21vw;
    }
}

.page-footer__pipe {
    position: absolute;
    top: 36rem;
    right: 3rem;

    .bubble {
        right: 0;
        top: 70%;
        &:nth-child(1) {
            top: 56%;
            width: 5rem;
            height: 5rem;
        }
        &:nth-child(2) {
            right: 0;
            top: 45%;
            height: 4rem;
            width: 3rem;
            opacity: 0;
            animation-delay: 5s;
        }
    }
}

@media (--screen-large) {
    .page-footer__pipe {
        top: 30rem;
        right: 15rem;
    }
}