.oswald-<uniquifier> {
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
html {
  margin: 20px;
  padding: 20px;
}

html, body, #map {
  margin: 0;
  padding: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  height: 100%;
  background-color: white;
  width: 80vw;

}

h1 {
  text-align: left;
  margin-top: 5%;
  font-family: 'Oswald', sans-serif;
  font-size: 40px;
  padding: 0%;
  color: #420A60;
}
h2 {
  text-align: left;
  margin-top: 2%;
  font-family: 'Oswald', sans-serif;
  font-size: 24px;
  padding: 0%
}
dt {
  font-family: "Oswald", sans-serif;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
dd {
    font-family: "Inter", sans-serif;
    font-size: 16px;
    padding-bottom: 5px;
}

p {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  padding-bottom: 5px;
  padding-right: 5px;
}

		.container {
      width: 80vw;
			height: 45vh; /* set height to half of the view height */
			margin: 0 auto;
			display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: 50vh 50vh;
      grid-gap: 20px;
			justify-content: left;
			align-items: left;
      display: flex;
      flex-direction: row;
      font-family: "Inter", serif;
      gap: 50px;
}
		.top-container {
			grid-row: 1 / 2;
		}

		.bottom-container {
			grid-row: 2 / 3;
		}

.wrapper {
  display: grid;
  grid-template-columns: repeat(2, minmax(40vw, 1fr));
}

.info-container {
  display: flex;
  justify-content: left;
  width: 80vw;
  margin: 0 auto;
}
.grid-container {
  display: grid;
  grid: auto / auto auto auto;
  gap: 2em;
}

#info {
  display: flex;
  flex-direction: row;
  gap: 30px;
  width: 80vw;
  height: auto;
  margin: 0 auto;
  font-family: "Inter", serif;
 /* padding-left: 30px;*/
}

button {
    font-family: "Oswald", sans-serif;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing:1px;
    background-color: #420A60; /* Purple background */
    border: 1px solid white; /* White border */
    color: white; /* White text */
    padding: 10px 20px; /* Some padding */
    cursor: pointer; /* Pointer/hand icon */
}
button:hover {
  background-color: #420A60;
  border: 3px solid #FDBD2E;/* yellow border */
  color: white; /* white text */
}
button:focus {
  background-color: #FDBD2E;
    color: black; /* black text */

}

.btn-group button {
  background-color: #420A60; /* Purple background */
  border: 1px solid white; /* White border */
  color: white; /* White text */
  padding: 10px 20px; /* Some padding */
  cursor: pointer; /* Pointer/hand icon */
  float: left; /* Float the buttons side by side */
  margin: 5px;
}
/* Clear floats (clearfix hack) */
.btn-group:after {
  content: "";
  clear: both;
  display: table;
}
.btn-group button:not(:last-child) {
  border-right: none; /* Prevent double borders */
}

/* Add a background color on hover */
.btn-group button:hover {
  background-color: #2B2C6C;
}

.btn-group button:focus {
  background-color: #2B2C6C;
}

#procedure-box {
  margin:auto;
  display:block;
  width: 80vw;
  height: auto;
  overflow-y: scroll;
}

#myInput {
  padding: 10px;
  border: none;
  border-bottom: 1px solid #cccccc;
  width: 30vw;
  font-size: 16px;
}

#myInput:focus {
  outline: none;
}

/* Styling for the dropdown */
.dropdown {
  position: absolute;
  z-index: 1;
  width: 30vw;
  margin-top: 0px;
  padding: 0px;
  background-color: white;
  border: 1px solid #cccccc;
  border-top: none;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content {
  display: none;
  position: absolute;
  z-index: 1;
  width:30vw;
  max-height: 200px;
  overflow-y: scroll;
  border: 1px solid #cccccc;
  background-color: #ffffff;
}

.dropdown-content a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #000000;
}

.dropdown-content a:hover {
  background-color: #f1f1f1;
}

.autocomplete {
  position: relative;
  display: inline-block;
    font-family: 'Inter', sans-serif;
  font-size: 16px
}
.map-container {
  display: flex;
  justify-content: center;
  height: 60%;
  bottom: 0;
}
#map {
  position: fixed;
  bottom: 0;
  width: 75%;
  height: 50vh;
  margin-top: 5%;
  margin-bottom: 5%
}

@media only screen and (max-width: 768px) {
  #map {
    width: 100%;
    height: 40vh;
  }
  #myInput {
  width: 50vw;

}

/* Styling for the dropdown */
.dropdown {
width: 50vw;
}

.dropdown-content {
width: 50vw;
}
 /* Popup container */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* The actual popup (appears on top) */
.popup .popuptext {
  font-family: "Inter", sans-serif;
   visibility: hidden;
  width: 160px;
  background-color: #555555;
  color: #ffffff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 100%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555555 transparent transparent transparent;
}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
} 
}