style.css

/*styling.css*/
/*add font family, background image*/

body {
    color: #5bc0de;
    font-family: "Poppins", sans-serif;
}

.fa-map-marker-alt,
.fa-dot-circle {
    color: #5bc0de;
}

/*Jumbotron*/
.jumbotron {
    background-color: transparent;
    margin: 0;
    padding: 10px;
}

.jumbotron h1 {
    letter-spacing: 2.5px;
    font-size: 3.5em;
}

.jumbotron h1,
.jumbotron p {
    text-align: center;
}

/*map*/
#googleMap {
    width: 30%;
    height: 700px;
    margin: 10px auto;
}

/*output box*/
#output {
    text-align: center;
    font-size: 2em;
    margin: 20px auto;
}

#mode {
    color: black;
}

/* For mobile devices */
@media (max-width: 768px) {
    #googleMap,
    #output {
        width: 100%;
    }

    .col-xs-12.col-md-6 {
        width: 100%;
    }
}

#start-button{
    align-items: center;
    text-align: center;
}


.button-container {
    display: flex;
    justify-content: center; /* Centers items horizontally */
    margin-bottom: 20px; /* Optional: Add margin to separate from other elements */
}

/* Adjust button styles as needed */
.btn {
    margin: 0 10px; /* Optional: Add margin between buttons */
    background-color: #5bc0de;
    border: none;
    padding: 10px 20px;
    border-radius: 10px;
    transition: 0.5s ease;
}

.btn:hover{
    cursor: pointer;
    background-color: #13b3e4;
}