.container {
    width: 94%;
    margin: 0 auto;
    position: relative;
    padding: 0px;
    z-index: 3;
}
@media (max-width: 1199px) {
    body {
        font-size: 20px;
    }
    .intro-wrapper {
        width: 60%;
        grid-row-gap: 40px;
    }
    .logo-bsi {
        width: 50%;
    }
    .bubble-container {
        width: 38%;
    }
    p {
        line-height: 165%;
        margin: 0px 0 20px 0;
    }
    .game-over-container {
        width: 60%;
        grid-row-gap: 40px;
    }
    #level-display {
        bottom: 15vw;
        height: 80vh;
    }
    #ui-top-row {
        width: 20%;
    }
    #timer-bar-container {
        width: 55%;
        height: 60px;
        border-radius: 60px;
        border: 2px solid rgba(255, 255, 255, 0.8);
    }

    #ui-wrapper {
        width: 100%;
        bottom: 20vw;
    }
}
@media (max-width: 1024px) {}
@media (max-width: 860px) {}
@media (max-width: 767px) {
    .intro-wrapper {
        width: 85%;
        grid-row-gap: 20px;
        padding: 0;
        padding-top: 10px;
    }
    .bubble-container {
        width: 46%;
    }
    .logo-bsi {
        width: 55%;
    }
    #level-display {
        height: 65vh;
    }
    #ui-top-row {
        width: 37%;
    }
    #timer-bar-container {
        width: 50%;
        height: 50px;
        border-radius: 50px;
        border: 2px solid rgba(255, 255, 255, 0.8);
    }
    .game-over-container {
        width: 85%;
        grid-row-gap: 20px;
    }
    .card-logo {
        width: 35%;
    }
}
@media (max-width: 430px) {
    body {
        font-size: 15px;
    }
    .intro-wrapper {
        width: 85%;
        grid-row-gap: 20px; 
        padding: 0;
    }
    
    p {
        line-height: 165%;
        margin: 0px 0 10px 0;
    }
    
    .logo-bsi {
        width: 45%;
    }
    .bubble-container {
        width: 40%;
    }
    
    #ui-top-row {
        width: 30%;
         font-size: 80%;
    }
    #timer-bar-container {
        width: 57%;
        height: 50px;
        border-radius: 50px;
    }
    
    
    
}
/*@media (max-width: 375px) {
    .logo-bsi {
        width: 45%;
    }
    .bubble-container {
        width: 40%;
    }
    
    #ui-top-row {
        width: 30%;
    }
    #timer-bar-container {
        width: 57%;
        height: 50px;
        border-radius: 50px;
    }
}*/