:root {
  --light-grey: #f5f6f7;
  --dark-blue: #0a0a23;
  --fcc-blue: blue;
  --light-yellow: #fecc4c;
  --dark-yellow: #feac32;
  --light-pink: #ffadad;
  --dark-red: #850000;
  --light-green: #acd157;
}


body {
  font-family: "Lato", Helvetica, Arial, sans-serif;
  font-size: 18px;
  background-color: var(--fcc-blue);
  color: var(--light-grey);
}

h1 {
  text-align: center;
}

.container {
  width: 90%;
  max-width: 680px;
}

/* Centering container and output */
h1,
.container,
.output {
  margin: 20px auto;
}

/* labels and fieldset */
label,
legend {
  font-weight: bold;
}

/* Container where dynamic inputs will appear */
.input-container {
  display: flex;
  flex-direction: column;
}

button {
  cursor: pointer;
  text-decoration: none;
  background-color: var(--light-yellow);
  border: 2px solid var(--dark-yellow);
}

/* inputs, buttons, select */
button,
input,
select {
  min-height: 24px;
  color: var(--dark-blue);
}

/* elements spacing */
fieldset,
label,
button,
input,
select {
  margin-bottom: 10px;
}

/* Output box */
.output {
  border: 2px solid var(--light-grey);
  padding: 10px;
  text-align: center;
}

/* Hidden class */
.hide {
  display: none;
}

/* Result styling */
.output span {
  font-weight: bold;
  font-size: 1.2em;
}

/* Surplus calorie */
.surplus {
  color: var(--light-pink);
}

/* Deficit calorie */
.deficit {
  color: var(--light-green);
}