/*

Reset

http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)

*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  border: 0;
  font-size: 100%;
  font: inherit;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/*

Typography

We use the Augmented Fourth (1.414) as the basis of our typography.
http://www.modularscale.com/?1&em&1.414 will show you bigger and smaller options.

*/

html {
  /*
      On the web, the optimal size is 15–25 pixels.
      https://practicaltypography.com/point-size.html
  */
  font: 400 20px/1.414 Poppins, Helvetica, sans-serif;
}

@media only screen and (max-width: 600px) {
  html {
    font-size: 16px;
  }
}

body {
  /*
    For most text, the optimal line spacing is between 120% and 145% of the point size.
    https://practicaltypography.com/line-spacing.html
  */
  line-height: 1.414;
  margin: auto;
}

h1, h2, h3 {
  font-weight: 900;
  line-height: .500151046;
  padding: 1.414em 0 1em 0;
}

header h1 {
  font-size: 2.827145944rem;
}

main h1 {
  font-size: 1.999396rem;
  margin: 1.414rem 0;
}

main h2 {
  font-size: 1.414rem;
}

main h3 {
  font-weight: 400;
  font-size: 1rem;
}

p {
  margin: .707213579em 0;
  max-width: 30rem;
}

footer {
  border-top: 1px #55431b solid;
  font-size: .707213579rem;
  margin-top: 1.414rem;
  padding: 1.414rem;
  padding-bottom: 1.999396rem;
}

a {
  text-decoration: none;
}

small {
  font-size: .500151046em;
}

/*

Colors

Color palette extracted from image of many different vegetables.

#334523 24.3% Seaweed (Green) <-- Currently unused.
#628434 22.0% Vida Loca (Green) <-- Background. Only shows above mobile width.
#a62c0f 12.8% Fire Brick (Red) <-- Currently unused.
#d6d0a5 7.7% Tahuna Sands (Brown) <-- This is our "white".
#55431b 7.4% Bronze Olive (Brown) <-- This is our "black".
#611c10 7.4% Red Oxide (Red) <-- Currently unused.
#d77221 7.3% Tahiti Gold (Orange) <-- Link/winner color.
#9e7f38 7.1% Reef Gold (Green) <-- Nav background.
#c8b32c 3.8% Old Gold (Yellow) <-- Nav text/highlight.

*/

a {
  color: #d77221;
}

body {
  background: #628434;
  color: #55431b;
}

h1 a, h2 a, h3 a {
  color: #55431b;
}

.content {
  background: #d6d0a5;
  color: #55431b;
  max-width: calc(3.53713611rem * 2 * 9); /* 9 columns of .bracket + margins */
}

/*

Page Structure

*/

div:after, header:after, nav:after, main:after, footer:after, section:after {
  clear: both;
  content: "";
  display: table;
}

header, main {
  padding: 0 1.414rem;
}

nav {
  padding: 1.414rem;
}

/* Phones don't have enough screen real estate to allow for margins. */
@media only screen and (min-width: 1001px) {
  body {
    padding: 0 14.14%;
  }
}

/* Nav */

nav {
  background: #9e7f38;
}

nav svg {
  display: block;
  height: 5.00151046rem;
  margin-bottom: 1rem;
  width: 5.00151046rem;
}

nav a {
  color: #55431b;
}

nav .current a {
  color: #c8b32c;
}

nav svg {
  fill: #55431b;
}

nav .current svg {
  fill: #c8b32c;
}

nav ul {
  display: flex;
  flex: 0 1 auto;
  justify-content: space-around;
}

nav li {
  display: block;
  text-align: center;
}

/* On mobile (<=1000px width) use a bottom menu that disappears on scroll (not a top menu). */
@media only screen and (max-width: 1000px) {
  body {
    width: 100%;
  }

  nav {
    bottom: 0;
    box-sizing: border-box; /* So we can just say 100% width and have the status bar with padding fit the screen. */
    left: 0;
    opacity: 1;
    padding: 0;
    position: fixed;
    text-align: left;
    transition: opacity 1s;
    width: 100%;
    z-index: 100;
  }

  nav ul {
    border-top: 1px solid #55431b;
  }

  nav li {
    border-right: 1px solid #55431b;
    width: 25%;
  }

  nav li svg {
    margin-left: auto;
    margin-right: auto;
    width: 60%;
  }

  nav .item a {
    display: block;
    padding-bottom: 1em;
    padding-top: 2em;
  }

  .fade {
    opacity: 0;
  }
}

/* Shared Behavior */

div.veg.winner {
  border-color: #d77221;
}

.veg.loser {
  opacity: .2;
}

/* Results, Vegetable Detail Page Results */

.results .match {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  align-items: center;
}

.results .match svg {
  height: 7.992754189rem;
  width: 7.992754189rem;
}

.results .match .veg {
  border: .500151046rem #55431b solid;
  border-radius: 50%;
  margin: 1.414rem;
  padding: 1.999396rem;
}

/* List (of Vegetables) */

.list svg {
  height: 7.992754189rem;
  width: 7.992754189rem;
}

.list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.list .veg {
  margin: 1.414rem;
  text-align: center;
}

/* Bracket */

.placeholder {
  border-bottom: 1px #55431b solid;
  width: 3.53713611rem;
}

.bracket {
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
}

.bracket .column {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: calc(3.53713611rem * 12);
  justify-content: flex-start;
}

.bracket .final {
  margin: 0 3.53713611rem;
}

.bracket .match {
  align-items: center;
  display: flex;
  margin: 1px 1rem;
}

.bracket .veg:first-child {
  margin-right: .353713611rem;
}

.bracket .veg svg {
  height: 3.53713611rem;
  width: 3.53713611rem;
}

.bracket .name {
  display: none;
}

.bracket .column-8 .match {
  height: calc(100% / 8);
}

.bracket .column-4 .match {
  height: calc(100% / 4);
}

.bracket .column-2 .match {
  height: calc(100% / 2);
}

.bracket .column-1 .match {
  height: 100%;
}

/* Recipes */

img.recipe {
  border: .500151046rem #55431b solid;
  box-sizing: border-box;
  width: 100%;
  max-width: 30rem;
}

/* Vegetable Detail Page */

.header-img svg {
  height: 7.992754189rem;
  width: 7.992754189rem;
}