/* Some root colors and styles for the overall site "theme"
By referencing these CSS variables and using rems we can
easily change the overall appearance of the site simply
by modifying this one spot.

Color credits: material.io design tool:
https://material.io/resources/color/#!/?view.left=1&view.right=1&primary.color=9fe8aa&secondary.color=212121
*/

/* https://developer.mozilla.org/en-US/docs/Web/CSS/var */
:root {
  --background: #ffffff;
  --card-background: #f4f4f4;
  --primary: #9fe8aa;
  --primary-light: #d2ffdc;
  --primary-dark: #6eb57b;
  --secondary: #212121;
  --secondary-light: #484848;
  --secondary-dark: #001100cc;
  --primary-text: #111111;
  --secondary-text: #efefee;
  /* Font size will be relative to this "root" em of 16px */
  font-size: 16px;
}

html,
body,
h1,
h2,
h3,
h4,
h5,
div,
input,
form {
  margin: 0px;
  padding: 0px;
}

body,
html {
  width: 100%;
}

body {
  background-color: var(--background);
  color: var(--primary-text);
  font-family: "Open Sans", "Helvetica", "sans-serif";
  font-size: 1rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Oxygen", "Helvetica";
  font-weight: 700;
  margin: 0px;
  width: 100%;
  word-break: break-all;
}

h1 {
  font-size: 3rem;
  margin-bottom: 24px;
  text-align: center;
}

h2 {
  font-size: 2.7rem;
}

h3 {
  font-size: 2.4rem;
}

h4 {
  font-size: 2rem;
}

h5 {
  font-size: 1.7rem;
}

h6 {
  font-size: 1.4rem;
}

div,
p,
a {
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
}

/* Form elements */
input,
select,
textarea {
  border: 1px solid var(--secondary-dark);
  border-radius: 6px;
  font-family: "Open Sans";
  font-size: 1.2rem;
  margin: 8px;
  padding: 4px;
}

input:focus,
select:focus,
textarea:focus {
  border: 1px solid var(--primary-dark);
}

textarea {
  min-height: 8rem;
  width: 75%;
}

label {
  font-size: 1.2rem;
  font-weight: 700;
}

button {
  background-color: var(--primary);
  border: var(--primary-light);
  border-radius: 6px;
  color: var(--primary-text);
  cursor: pointer;
  font-size: 1.4rem;
  margin: 8px auto;
  padding: 8px;
  width: 100%;
}

button:hover {
  background-color: var(--secondary-dark);
  color: var(--secondary-text);
  transition: 500ms all ease-in-out;
}

p {
  margin: 16px 0px;
}

i {
  font-family: "Material Icons";
}

form {
  width: 100%;
}

/* Page Header */
header {
  align-items: center;
  background-color: var(--secondary-dark);
  box-shadow: 1px 1px 1px 1px rgba(244, 245, 246, 0.22);
  color: var(--secondary-text);
  display: flex;
  flex-flow: row wrap;
  font-size: 1.2rem;
  justify-content: flex-start;
  min-height: 72px;
  padding: 0px 16px;
}

/* Header link list */
header ul {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
  width: 100%;
}

/* No bullet points for header links. */
header ul li {
  list-style: none;
}

/* Make active links underlined so you can see the page you're on. */
header ul li.active {
  border-bottom: 2px solid var(--primary-light);
  color: dotted;
  cursor: text;
}

header a {
  color: var(--secondary-text);
  cursor: pointer;
  padding: 8px;
}

/* On link hover, make the color different */
header a:hover {
  color: var(--primary-light);
  transition: all 500ms ease-in-out;
}

/* Wraps content of entire page. */
div.content-wrapper {
  display: flex;
  flex-flow: column;
  padding: 48px;
}

/* Horizontal line with gradient built using https://cssgradient.io/ :) */
div.hr {
  background: rgb(63, 94, 251);
  background: radial-gradient(
    circle,
    rgba(63, 94, 251, 1) 0%,
    rgba(252, 70, 107, 1) 100%
  );
  height: 1px;
  margin: 48px auto;
  width: 95%;
}

/* A narrower margin line. */
div.hr.-small-margin {
  margin: 24px auto;
}

div#pageHeader {
  align-items: center;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

div#pageHeader h1 {
  margin-top: -64px;
  text-align: center;
  width: 100%;
}

/* A card wraps a "section" of content on the page. It has a box shadow and basic margin. */
div.card {
  background-color: var(--card-background);
  border: 1px solid var(--secondary-dark);
  border-radius: 6px;
  box-shadow: 1px 1px 1px 1px rgba(1, 1, 1, 0.22);
  display: flex;
  flex-flow: row wrap;
  margin: 16px;
  padding: 48px;
}

/* Margin between all children but not the first */
div.card ul li:not(:first-child) {
  margin: 16px 0px;
}

div.card-content {
  width: 100%;
}
/* form styles */

/* form-element wraps a form element (input of some sort and possibly a label) */
form div.form-element {
  margin: 8px 0px;
  padding: 8px 0px;
}

/* If this .-flex modifier is applied, label will appear on separate row
from the input itself. Useful for textareas and other larger input fields. */
form div.form-element.-flex {
  align-items: center;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
}

form div.form-element label {
  width: 100%;
}

/* Page-specific styles. */

/* Main page logo. */
div.logo {
  align-items: center;
  display: flex;
  justify-content: center;
  margin: 8px auto 64px auto;
  padding: 0px;
  width: 100%;
}

div.logo svg {
  height: 20rem;
  margin: 0px;
  padding: 0px;
  width: 20rem;
}

/* Page Footer */
footer {
  align-items: center;
  background-color: var(--card-background);
  box-shadow: 1px 1px 1px 1px rgba(244, 245, 246, 0.22);
  color: var(--primary-text);
  display: flex;
  flex-flow: row nowrap;
  font-size: 1rem;
  justify-content: center;
  align-items: center;
  min-height: 128px;
  padding: 8px 40px;
}

footer ul {
  width: 50%;
  display: flex;
  flex-flow: row wrap;
}

footer ul li {
  list-style: none;
}

footer a {
  color: var(--secondary-light);
  cursor: pointer;
  padding: 0px;
}

/* On link hover, make the color different */
footer a:hover {
  color: var(--primary-dark);
  transition: 500ms all ease-in-out;
}

table, thead, tbody, th, tr, td {
  border: 1px solid var(--secondary-light);
  font-family: "Open Sans", "sans-serif";
  font-size: 1rem;
}

th, td {
  padding: 8px;
}

th {
  font-weight: 700;
  font-size: 1.2rem;
}

tr:nth-child(2n) {
  background-color: var(--primary-light);
}