body {
    margin: 10px auto;
    font-family: sans-serif;
}

.categoriesFrame {
    height: 600px;
    width:45%;
    margin: 10px auto;
}

.formFrame {
    height: 600px;
    width: 45%;
    /*min-height: 600px; */
    margin: 10px auto;
    
}

.frames {
    margin: 0 auto;
    text-align: center;
    width: 100%;
}

@media screen and (max-width:800px) {
    h1 {
        font-size: 1em;
        margin: 2px auto;
    }
    .formFrame {
        display: block;
        min-height: 375px;
        width: 90%;
        margin: 5px auto;
    }
    .categoriesFrame {
        display: block;
        width: 90%;
        height: 400px;
        margin: 2px auto;
    }
}

@media screen and (max-width:400px) {
    h1 {
        font-size: 1em;
        margin: 2px auto;
    }
    .formFrame {
        display: block;
        height: 300px;
        width: 90%;
        margin: 5px auto 2px 2px;
    }
    .categoriesFrame {
        display: block;
        width: 75%;
        height: 200px;
        margin: 5px auto 2px 12px;;
    }
}