style.css

body {
  min-width: 300px;
  width: 300px;
  margin: 0;
  padding: 0;
  font-size: 10px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

.container {
  padding: 10px;
}

h1.title {
  font-size: 1.4rem;
  margin: 0;
}

.mapArea {
  margin-top: 10px;
  padding: 0 5px 0 5px;
  display: flex;
  flex-direction: column;
}

.getMapBtn {
  margin-bottom: 5px;
}

#maparea {
  resize: none;
  height: 250px;
}

.imageSection {
  margin-top: 10px;
  padding: 0 5px 0 5px;
}

.embedSection {
  margin-top: 10px;
  padding: 0 5px 0 5px;
}

.generatedKeySection {
  margin-top: 10px;
  padding: 0 5px 0 5px;
}

.tab {
  margin-top: 5px;
  width: 100%;
  display: flex;
}

.tabbtn {
  cursor: pointer;
  border: 0;
  padding: 10px 20px 10px 20px;
  background-color: #c7ecee;
  color: #fff;
  letter-spacing: 0.5px;
}

.active {
  background-color: #a3d2d4;
}

.tabbtn:hover {
  background-color: #dff9fb;
}