:root {
  --transition: background-color 0.5s ease-in-out;
}

html,
body {
  height: 100%;
}

#app-container {
  min-height: 100%;
  min-width: 260px;
}

#app-content-wrapper {
  max-width: 700px;
  border: 5px solid var(--bs-yellow);
  transition: var(--transition);
}

#result {
  height: auto;
  min-height: 2.5rem;
  font-size: 1.5rem;
  transition: var(--transition);
}

@media only screen and (max-width: 600px) {
  body {
    padding: 0rem !important;
  }

  #app-container,
  #app-content-wrapper {
    padding: 2rem !important;
  }
}

@media only screen and (max-width: 400px) {
  body {
    padding: 0rem !important;
  }

  #app-container,
  #app-content-wrapper {
    padding: 0.25rem !important;
  }
}