html,
body {
    font-family: "Roboto", "Helvetica Neue", "Arial, sans-serif";
    color: #000000;
    font-size: 24px;
    background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
}

.form {
    width: 100%;
}

.google-map-div {
    width: 100%;
}

.page-content {
    margin: 0px auto;
}

.google-map {
    max-width: 600px;
    max-height: 600px;
}

.form {
    box-shadow: 10px 10px 50px rgb(255, 255, 255), -10px -10px 50px rgb(255, 255, 255);
    background-image: linear-gradient(-15deg, #13547a 100%, #80d0c7 100%);
}

.choice-items {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.submit {
    box-shadow: 2px 2px 10px rgb(255, 255, 255), -2px -2px 10px rgb(255, 255, 255);
}

@media (max-width: 576px) {
    .page-content,
    .message {
        width: 95%;
    }
    .choice-items {
        display: grid;
        grid-template-columns: 1fr;
    }
}

@media (min-width: 576px) and (max-width:768px) {
    .page-content,
    .message {
        width: 65%;
    }
    .choice-items {
        display: grid;
        grid-template-columns: 1fr;
    }
}

@media (min-width: 768px) and (max-width:992px) {
    .page-content,
    .message {
        width: 50%;
    }
    .choice-items {
        display: grid;
        grid-template-columns: 1fr;
    }
}

@media (min-width: 992px) and (max-width:1200px) {
    .page-content,
    .message {
        width: 45%;
    }
}

@media (min-width: 1200px) {
    .page-content,
    .message {
        width: 40%;
    }
}