.main-container form {
  margin-top: auto; }

h1 {
  margin: 10px 0; }

h2 {
  margin: 5px 0; }

form {
  display: flex;
  flex-direction: column;
  font-weight: 900;
  gap: 0.5em; }
  form > .field {
    align-self: end; }
    @media all and (orientation: portrait) {
      form > .field {
        margin-right: -15px; } }
  form > label {
    border-radius: 15px;
    max-width: 70vw;
    padding: 0.5em;
    position: relative;
    width: max-content;
    background: #49CABA;
    display: block;
    z-index: 1; }
    form > label::after {
      border: 35px solid transparent;
      border-left: 0;
      border-top: 0;
      content: '';
      position: absolute;
      top: 0;
      z-index: -1; }
    form > label::after {
      border-right-color: #49CABA;
      left: -20px; }

.answer-container {
  border-radius: 15px;
  max-width: 70vw;
  padding: 0.5em;
  position: relative;
  width: max-content;
  background: #ffaa7d;
  font-size: large;
  height: max-content;
  z-index: 1; }
  .answer-container::after {
    border: 35px solid transparent;
    border-left: 0;
    border-top: 0;
    content: '';
    position: absolute;
    top: 0;
    z-index: -1; }
  .answer-container::after {
    border-right-color: #ffaa7d;
    right: -20px;
    transform: scaleX(-1); }
  .answer-container > * {
    max-width: 100%; }
  .answer-container select,
  .answer-container option {
    font-size: inherit;
    font-weight: inherit; }

.formula-widget {
  align-items: center;
  align-self: end;
  display: grid;
  gap: 3px;
  grid-auto-flow: dense;
  grid-template-columns: 1fr;
  justify-items: end;
  text-align: right; }
  .formula-widget .answer-container {
    max-width: unset; }
    .formula-widget .answer-container input[required] {
      background-color: #ffc400; }
  .formula-widget > span.value {
    display: none; }
  .formula-widget label span.period {
    display: none; }
  .formula-widget label.y-1 {
    grid-column: 1; }
  .formula-widget .answer-container.y-1,
  .formula-widget > span.y-1 {
    grid-column: 3; }