/* setup */

* {
  margin: 0;
  padding: 0;
}

:root {
  --color-one: #0f7f9e;
  --color-two: #c14b9b;
  --color-three: #ffff71;
  --color-four: #feae57;
  --color-five: white;
}

body {
  background-size: contain;
}

/* GENERAL */

p {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;

  padding-top: 5px;
}

/* HEADER */

header {
  background-image: url(/sqf7007/jeffrey/test_2/assets/header-alt.jpg);
  background-color: #efefff;
  background-size: contain;
  padding: 20px;
}

.header-text {
  font-family: "Rubik", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-size: 40px;
  color: var(--color-four);
  text-shadow: 2px 2px var(--color-two);
  margin: 10px;
}

.header-div {
  background-color: white;
  box-shadow: 5px 5px var(--color-four);
  max-width: 510px;
  padding: 10px;
  border-radius: 10px;
  margin: 20px auto;
}

.subtitle {
  font-size: 20px;
  font-weight: 400;
  color: var(--color-one);
  margin: 10px;
}

/* MAIN SECTION */

.main-section {
  max-width: 900px;
  margin: 30px auto;
}

.form-section {
  display: grid;
  margin: 30px;
  row-gap: 30px;
}

textarea {
  border-radius: 10px;
  padding: 10px;
  min-width: 400px;
  height: 300px;
  resize: vertical;
  white-space: pre;

  font-family: "Roboto Mono", monospace;
  background-color: var(--color-three);
}

.step {
  background-color: var(--color-four);

  border-radius: 10px;
  padding: 20px;
}

.results-info {
  display: grid;
  grid-template-columns: 2fr 1fr;
  column-gap: 20px;
}

.result-button-row {
  display: grid;
  row-gap: 10px;
}

/* FONTS */

.step-text {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  font-size: 20px;
}

.hidden {
  display: none;
}

/* BUTTONS */
input[class*="-button"] {
  max-height: 60px;
}

.primary-button {
  padding: 15px;

  background-color: var(--color-two);
  border-style: solid;
  border-color: var(--color-two);
  border-radius: 10px;

  font-size: 14pt;
  font-weight: 700;
  text-transform: uppercase;
  color: white;
}

.secondary-button {
  padding: 15px;

  background-color: var(--color-five);
  border-style: solid;
  border-color: var(--color-two);
  border-radius: 10px;

  font-size: 14pt;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-two);
}

.clickable:hover {
  cursor: pointer;
  background-color: var(--color-one);
  border-color: var(--color-one);
  color: var(--color-three);
}

input[type="radio"] {
  margin-right: 10px;
}

.format-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 30px;
  row-gap: 30px;
}

.format-option {
  background-color: var(--color-three);
  padding: 20px;
  border-radius: 10px;
  border-style: solid;
  border-width: 2px;
  border-color: var(--color-one);
}

/* RESULTS */

.results-list {
  display: grid;
  margin: 30px;
  row-gap: 30px;
}

.result-item {
  border-radius: 10px;
  border-style: solid;
  border-width: 2px;
  border-color: var(--color-one);
  padding: 30px;
  overflow: scroll;

  height: 200px;

  background-color: var(--color-three);

  font-family: "Roboto Mono", monospace;
}