media queries are not being applied on site

Question

I am new to this and i'm probably doing something wrong

This is my css with my media queries:

.box h3 {
    position: absolute;
    left: 11%;
    top: 12%;
    font-size: 2rem;
    color: white;
    text-shadow: 0rem 1rem 1.9rem #888888;
    z-index: 10;
}

.box p {
    position: absolute;
    left: 11%;
    top: 38%;
    font-size: 0.8rem;
    color: white;
    text-shadow: 0rem 1rem 1.9rem black;
    z-index: 10;
}

@media (min-width: 97rem;) {
.box h3 {
    position: absolute;
    left: 11%;
    top: 12%;
    font-size: 6rem;
    color: white;
    text-shadow: 0rem 1rem 1.9rem #888888;
    z-index: 10;
}

.box p {
    position: absolute;
    left: 11%;
    top: 38%;
    font-size: 1.8rem;
    color: white;
    text-shadow: 0rem 1rem 1.9rem black;
    z-index: 10;
}
}

I only am chaning the font size to test my code but it doesn't work.

I have added the viewport tag in my html head.

Edit:

Answer 1

I used px instead of rem and now it works, is this explainable?

@media (min-width: 970px) {