@media only screen and (min-width:320px) {
    .rules {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 98vw;
        border: 1px solid #9b949b;
    }
}

@media only screen and (min-width:568px) {
    .rules {
        width: 34vw;
    }
}

@media only screen and (min-width:700px) {
    .rules {
        width: unset;
        height: 70vh;
    }
}

@media only screen and (min-width:900px) {
    .rules {
        width: unset;
        height: 90vh;
    }
}