/* fonts */

@font-face {
  font-family: "Hybrid Hibiscus";
  src: url(/fonts/HybridHibiscus-qYx6.ttf);
}

@font-face {
  font-family: "Twemoji Colour";
  src: url(/fonts/TwitterColorEmoji-SVGinOT.ttf);
}


/* Desktop layout */
@media (min-width: 800px) {
  
}


/* Mobile layout 
.pageBox {
  margin: 0px;
  background-color: rgba(237, 255, 186, 0.800);
}
.flex-container {
  display: flex;
  flex-direction: column;
  width: 100%;
}*/


/* Structure */

body {
  color: black;
  background-color: #3f2109;
  background: url(/images/DirtBG.png);
  background-repeat: repeat;
  font-family: Arial, Helvetica, sans-serif, "Twemoji Colour";
  font-size: 16px;
}
.pageBox {
  margin: 30px;
  background-color: rgba(237, 255, 186, 0.800);
  border-radius: 15px 15px 0px 0px;
}

header {
  background-image: url(/images/PlantHeader.png);
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
  padding: 15px 0px 15px 0px;
  text-align: center;
  font-family: "Hybrid Hibiscus", Impact, 'Arial Narrow Bold', sans-serif, "Twemoji Colour";
  font-size: 1.5rem;
  border-radius: 15px 15px 0px 0px;
  color: white;
  margin: 0px;
}

/* Navigation */

nav {
  margin-top: -16px;
  text-align: center;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #a9d640;
  text-align: center;
}

nav li {
  float: left;
}

nav ul li::marker {
  content: none;
}

nav li a {
  display: block;
  color: #000;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

nav li a:hover {
  background-color: #2d8d00;
}

nav li a:visited {
  color: #000;
}

.active {
  background-color: #1e5f00;
}

.flex-container {
  padding: 0px 15px;
  display: flex;
  width: fit-content;
  flex-direction: row;
  justify-content: center;
}

aside {
  background: #a9d640;
  padding: .7rem;
  margin: 15px 5px 5px 15px;
  border-radius: 15px;
}

footer {
  text-align: center;
  background: #a9d640;
}

/* Text Stuff */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Hybrid Hibiscus", Impact, 'Arial Narrow Bold', sans-serif;
}

p {
  text-indent: 3%;
}

a {
  color: #2d8d00;
}

a:hover {
  color: #1e5f00;
}

a:visited {
  color: #143f00;
}

q {
  display: block;
  text-align: center;
  font-style: italic;
  font-size: 1.1em;
  min-width: 100%;
}

address {
  font-style: normal;
}

/* Lists */
ul {}

ul li::marker {
  content: "❧ ";
}

ol li::marker {
  font-family: "Hybrid Hibiscus", Impact, 'Arial Narrow Bold', sans-serif, "Twemoji Colour";
  font-size: larger;
}

/* Tables */
table {
  width: 100%;
  text-align: center;
  overflow: scroll;
}

caption {
  border: 1px solid #B73551;
  border-collapse: collapse;
}

th {
  font-size: 1.3rem;
  background: #b7355166;
}

tr:nth-child(odd) {
  background-color: #B7355133;
}

caption {
  font-size: 1.5rem;
  background: #b73551c3
}