distribution-calc/public/styles.scss

/* --------------------- Open Props --------------------------- */

/* the props */
@import "https://unpkg.com/open-props";

/* optional imports that use the props */
@import "https://unpkg.com/open-props/normalize.min.css";
@import "https://unpkg.com/open-props/buttons.min.css";

/* ------------------------------------------------------------ */

body {
  font-family: sans-serif;
  text-align: center;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

header {
  display: flex;
  align-items: center;
  justify-content: end;
}

header > select {
  margin: 0 1em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-align: center;
  margin: 0 auto;
  padding: 2rem;
}

h1.title {
  width: 80vw;
  max-inline-size: 80vw;
  padding-top: 1rem;
}

p {
  margin: var(--size-6);
}


form {
  display: table;
  text-align: left;
}

form > p {
  display: table-row;
  margin-bottom: 0.5em;
}

form > p > label, form > p > input{
  display: table-cell;
}

form input {
  margin-left: 1em;
  margin-bottom: 0.5em;
  width: 4em;
}

div.results {
  display: grid;
  grid-template-columns: 1fr 7em 1rem 5em 1fr;
  padding-top: 1em;
  min-width: 20em;
  max-width: 30em;
  width: 30vw;
  font-size: 1.2em;
}

div.results > span.left {
  grid-column: 2 / 3;
  text-align: right;
}

div.results > span.right {
  grid-column: 4 / 5;
  text-align: left;
}