* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  --space: 8px;
  --color-primary: #007bff;
  --color-on-primary: #fff;

  font: 14pt/18pt Calibri, Arial, Helvetica, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space);
}

header {
  height: 100px;
  width: 100%;
  background: #6200eb url(img/header.jpg) no-repeat right center;
  background-size: contain;
  display: flex;
  align-items: center;
  flex-direction: row;
  padding: 0 var(--space);
}

.inputs {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space);
  flex-grow: 1;
  width: 100%;
  padding: var(--space);
}

.inputs label {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: calc(var(--space) * 0.5);
  text-align: center;
  height: 100%;
}

.inputs label textarea {
  flex-grow: 1;
  padding: var(--space);
  font: inherit;
  resize: none;
}

.inputs .buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space);
}

.inputs .buttons button {
  cursor: pointer;
  font-size: 1.5em;
  text-transform: uppercase;
  border: none;
  border-radius: calc(var(--space) * 0.5);
  background: var(--color-primary);
  color: var(--color-on-primary);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.inputs .buttons button:hover {
  filter: brightness(90%);
}
.inputs .buttons button svg {
  fill: var(--color-on-primary);
  width: 24px;
  height: 24px;
}
.inputs .buttons button svg.mobile {
  display: none
}

@media (max-width: 800px) {
  .inputs {
    flex-direction: column;
  }
  .inputs label {
    width: 100%;
  }
  .inputs .buttons {
    flex-direction: row;
  }
  .inputs .buttons button svg { display: none }
  .inputs .buttons button svg.mobile { display: inline }
}