#ProjectIntro {
    position: relative !important; /* Parent positioning */
    overflow: hidden; /* Prevent overflow */

}

.containr{
    width: 300vw; /* Overflowing width */
    position: absolute;
    top: 30vh;
    left: -100%;
    transform: translate(-50%, -50%); /* Fix misalignment */
    display: flex;
    gap: 20px;
    padding: 10px;
}
.midContainer{
    width: 120vw; /* Overflowing width */
    height: 20vh;
    position: absolute;
    top: 40vh;
    transform: translate(-50%, -50%); /* Fix misalignment */
    display: flex;
    gap: 20px;
    padding: 10px;
    border: 2px solid var(--secondary);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size:5vh;
    text-shadow: 0px 0px 20px var(--primary);
    box-shadow: 0px 0px 50px var(--secondary);
    background-color: #3f489b51;
}
.container2 {
    width: 300vw; /* Overflowing width */
    position: absolute;
    top: 47.55vh;
    left: 0%;
    transform: translate(-50%, -50%); /* Fix misalignment */
    display: flex;
    gap: 20px;
    padding: 10px;
}
.containr, .container2, .midContainer {
    transform: rotate(-5deg);
}
.block, .block2 {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 10vw;
    height: 10vh; /* Use vh for better consistency */
    background: linear-gradient(135deg, var(--secondary), #ffffff); /*Color*/
    border-radius: 10px;
    opacity: 0.7;
    transition: transform 0.1s ease-out;
    color: rgba(0, 0, 0, 0.721);
    font-size: auto;
    font-weight: bold;
}
.midContainer span{
    margin-inline: 0;
    padding-inline: 0;
}

@media(aspect-ratio< 1){
    .block, .block2 {
        min-width: 10vh;
        height: 10vw; /* Use vw for better consistency */
        font-size: 1vh;
    }
    .containr{
        top:30vh;
    }
    .midContainer{
        flex-wrap: wrap;
        height: 15vh;
        top:35vh;
        font-size:4vw;
    }
    .container2{
        top:50vh;
    }
}