body {
			font-family: Arial, sans-serif;
			margin: 0;
			padding: 0;
			background-color: #f9f9f9;
		}

		h1 {
			font-size: 48px;
			font-weight: bold;
			color: #333333;
			text-align: center;
			margin-top: 50px;
			margin-bottom: 50px;
		}

		p {
			font-size: 24px;
			color: #666666;
			line-height: 1.6;
			margin-bottom: 30px;
			text-align: justify;
			padding: 0 50px;
		}

		.button {
			display: inline-block;
			padding: 10px 20px;
			background-color: #000000;
			color: #ffffff;
			border-radius: 5px;
			font-size: 24px;
			text-decoration: none;
			transition: background-color 0.2s ease-in-out;
		}

		.button:hover {
			background-color: #959a9f;
		}

		@media screen and (max-width: 767px) {
			h1 {
				font-size: 36px;
				margin-top: 30px;
				margin-bottom: 30px;
			}

			p {
				font-size: 20px;
				padding: 0 20px;
			}

			.button {
				font-size: 20px;
				padding: 8px 16px;
			}
		}





  header img {
  max-width: 200px;
  height: auto;
}

  /*Add some margin to the top and bottom of the form to give it some breathing room*/
  form {
  margin-top: 20px;
  margin-bottom: 20px;
}
/*Make the input fields a little bigger to make them easier to read and use*/
input[type="text"] {
  font-size: 1.5rem;
  padding: 10px 15px;
}
/*Add some padding to the left and right sides of the form to make it look more balanced*/
form {
  padding: 20px;
}
/*Make the submit button more prominent*/
button[type="submit"] {
  background-color: #000000;
  color: #fff;
  border: none;
  padding: 10px 20px;
  font-size: 1.5rem;
  border-radius: 5px;
}
button[type="submit"]:hover{
    background-color: #999ea3;
}
button[type="submit"]:active:hover{
    background-color: #959a9f;
}
/*Add some spacing between the different form groups to make them easier to distinguish*/
.form-group {
  margin-bottom: 20px;
}
/*Center the "Custo da viagem" and "Distância total" labels*/
#resultado {
  text-align: center;
}
/*Style the "Custo da viagem" and "Distância total" labels to make them stand out*/
#resultado label {
  font-weight: bold;
  font-size: 1.5rem;
}
/*Add some padding to the bottom of the "Custo da viagem" and "Distância total" labels to make them easier to read*/
#resultado label {
  padding-bottom: 10px;
}
/*Style the link to make it more noticeable*/
#share-link {
  color: #007bff;
  font-weight: bold;
  text-decoration: underline;
}
/*Make the "Adicionar parada" button more prominent:*/
#add-parada {
  background-color: #000000;
  color: #fff;
  border: none;
  padding: 10px 20px;
  font-size: 1.5rem;
  border-radius: 5px;
}
    #map {
      height: 500px;
      width: 100%;
    }
/*.distancia-valor {
  font-size: 2rem;
  font-weight: bold;
  color: #007bff;
  text-align: center;
  margin-top: 20px;
  padding: 10px;
  border: 2px solid #007bff;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0,0,0,0.3);
}*/
/*.distancia-valor {
  font-size: 2rem;
  font-weight: bold;
  color: #007bff;
  margin-top: 20px;
}*/
/*.distancia-valor {
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  color: #fff;
  background: linear-gradient(45deg, #00d4ff, #00a6ff);
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease-in-out;
}

.distancia-valor:hover {
  transform: scale(1.1);
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.5);
}*/
.distancia-valor {
  display: inline-block;
  font-size: 2rem;
  font-weight: bold;
  background-color: #24f65a;
  color: #fff;
  border-radius: 5px;
  padding: 10px;
  margin: 20px 0;
  text-align: center;
  box-shadow: 0px 2px 5px rgba(0,0,0,0.5);
  transition: all 0.3s ease;
}

.distancia-valor:hover {
  background-color: #eaecef;
  box-shadow: 0px 4px 8px rgba(0,0,0,0.5);
  transform: translateY(-2px);
}

.share-button {
  background-color: #000000;
  color: #fff;
  border: none;
  padding: 10px 15px;
  font-size: 1.5rem;
  border-radius: 5px;
}

.share-button:hover {
  background-color: #0056b3;
  box-shadow: 0px 4px 8px rgba(0,0,0,0.5);
  transform: translateY(-2px);
}