@media (max-width: 350px) {
    .modal {
        font-size: 0.8rem;
    }

}

@media (max-width: 500px) {
    .modal {
        top: 10%;
        right: 10%;
        bottom: 10%;
        left: 10%;
        width: 80%;
        height: 80%;
    }
}

@media (min-width: 500px) {
    .modal {
        top: 15%;
        right: 15%;
        bottom: 15%;
        left: 15%;
        width: 70%;
        height: 70%;
    }
}

@media (min-width: 1000px){
    .modal {
        position: fixed;
        top: 25%;
        right: 25%;
        bottom: 25%;
        left: 25%;
        width: 45%;
        height: 55%;
    }
}