.four {
    position: relative;
    width: 100%;
    height: 600px;
    background-color: rgb(241, 241, 241);
    display: flex;
    justify-content: center;
}

.ext-table {
    position: relative;
    width: 700px;
    height: 500px;
    background-color: rgb(241, 241, 241);
    top: 50px;
    border-radius: 30px;
}

.up-table {
    position: relative;
    width: 100%;
    height: 120px;
    background-color: rgba(0, 156, 0, 0.555);
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    text-align: center;
    padding: 30px;
    border: 2px solid black;

}

.up-table h1{
    font-size: 30px;
}

.up-table h5{
    font-size: 20px;
    padding-top: 10px;
}

.down-table {
    position: relative;
    width: 100%;
    height: 380px;
    background-color: rgba(65, 158, 65, 0.199);

    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    text-align: center;
    padding: 10px;
    border: 2px solid black;

}

.down-table p {
    font-size: 30px;
    padding-top: 15px;
}

@media screen and (max-width:800px){
    .four {
        height: 630px;
    }
    .ext-table{
        width: 550px;
        height: 530px;
    }
    .up-table {
        height: 150px; 
    }
}

@media screen and (max-width:600px){
    .four {
        height: 830px;
    }
    .ext-table{
        width: 450px;
        height: 730px;
    }
    .down-table {
        height: 580px;
    }
    .down-table p {
        padding-top: 25px;
    }
}

@media screen and (max-width:500px){
    .ext-table{
        width: 350px;
    }
    .down-table p {
        font-size: 25px;
    }
    .up-table {
        padding: 15px;
    }
    .up-table h1 {
        font-size: 20px;
        padding-top: 20px;
    }
    .up-table h5 {
        font-size: 15px;
    }
}

@media screen and (max-width:370px){
    .four {
        height: 750px;
    }
    .ext-table{
        width: 300px;
        height: 650px;
    }
    .down-table {
        height: 500px;
    }
    .down-table p {
        font-size: 20px;
    }
}