@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,400;1,300&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Roboto Condensed", sans-serif;
}

html {
  font-size: calc(15px + 0.390625vw);
}

body {
  background-color: #30504f;
  color: white;
}

.container {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
}
.container .part1 {
  width: 75%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  flex-direction: column;
  margin-top: 3rem;
}
.container .part1 h1 {
  font-size: 3rem;
}
.container .part1 p {
  font-size: 1rem;
  width: 100%;
  text-align: center;
  margin-top: 3rem;
  color: white;
}
.container .part1 .DoubleInputButton {
  margin-top: 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  width: 100%;
  font-size: 0.1rem;
}
.container .part1 .DoubleInputButton input,
.container .part1 .DoubleInputButton button {
  padding: 0.8rem;
  margin-left: 0.8rem;
  margin-right: 0.8rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  width: 100%;
  font-size: 1rem;
}
.container .part1 .DoubleInputButton input {
  font-size: 1rem;
}
@media only screen and (min-width: 768px) {
  .container .part1 .DoubleInputButton {
    flex-direction: row;
  }
}

.part2 .myChart {
  padding: 1rem 0 1rem 0;
  aspect-ratio: 1/5;
}
.part2 .info {
  width: 100%;
  height: 5rem;
}
.part2 #reset {
  background-color: white;
  text-align: center;
  width: 100%;
  margin: auto;
  margin-bottom: 3rem;
  padding: 0.8rem;
  font-size: 2rem;
}
.part2 #ResetForm {
  display: flex;
  align-items: center;
}

.button:hover {
  cursor: pointer;
  color: red;
}

/*# sourceMappingURL=style.css.map */