body{
 background-color: cadetblue;
}
.photos {
    height: 500px; width: 600;
    overflow: hidden;
    margin: auto;
    border-radius:+100 ;
    
    background-color: var(--bubble-bg);
    border: solid 4px var(--bubble-border);

}
.bubble{
    position: fixed;
    z-index: -100;
    width: 100px;
    height: 100px;
    border-radius: 100%;
    background-color: var(--bubble-bg);
    border: solid 4px var(--bubble-border);
}



.bubble:nth-child(1) {
    left: 20%;
    bottom: 0%;
    animation: expand 2s linear infinite;
}

.bubble:nth-child(2) {
    right: 10%;
    bottom: 30%;
    animation: expand 2s linear infinite;
}

.bubble:nth-child(3) {
    right: 50%;
    bottom: 10%;
    animation: expand 2s linear infinite;
}
.bubble:nth-child(3) {
    right: 60%;
    bottom: 10%;
    animation: expand 2s linear infinite;
}
.bubble:nth-child(5) {
    right: 90%;
    bottom: 80%;
    animation: expand 2s linear infinite;
}
.bubble:nth-child(6) {
    right: 50%;
    bottom: 10%;
    animation: expand 2s linear infinite;
}
.bubble:nth-child(7) {
    right: 100%;
    bottom: 00%;
    animation: expand 2s linear infinite;
}
.bubble:nth-child(8) {
    right: 10%;
    bottom: 100%;
    animation: expand 2s linear infinite;
}
@keyframes expand {
    0% {
        opactiy: 0%;
        transform: scale(0) translateY(0) rotate(0deg);
    }

    20% {
        opactiy: 80%;
        transform: scale(0.5) translateY(-10px) rotate(-5deg);
    }

    100% {
        opactiy: 100%;
        transform: scale(1) translateY(-90px) rotate(-deg);
    }

}