.main-image {
    width: 100%;
}

.detail-bubbles a {
    max-width: 200px;
    aspect-ratio: 1;
    border-radius: 50%;
    text-decoration: none;
    color: white;
}
    
.bubble {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: darkblue;
    text-align: center;
    align-content: center;
    vertical-align: middle;
    font-size: 2rem;
}

/* If width < 600 px */
/*  use stacked layout and hidden nav menu */
@media screen and (max-width: 699px) {
    .detail-bubbles a {
        width: 100%;
    }

    @media screen and (max-width: 599px) {
        .bubble {
            font-size: 3rem;
        }
    }
}

/* ElseIf width >= 600 px  */
/*  use tiled layout with full nav menu */
@media screen and (min-width: 700px) {
    .detail-bubbles a {
        width: 80%;
    }

    @media screen and (min-width: 700px) and (max-width: 799px) {
        .detail-bubbles a {
            width: 60%;
        }

        .bubble {
            font-size: 1rem;
        }
    }

    @media screen and (min-width: 800px) and (max-width: 999px) {
        .detail-bubbles a {
            width: 65%;
        }

        .bubble {
            font-size: 1.7rem;
        }
    }
}