:root {
  --font-color                  : #313715;
  --bg-color                    : #e2f9b8;
  --link-color                  : #d16014;
  --link-color-hover            : #939f5c;
  --button-color                : #313715;
  --button-border               : #939f5c;
  --button-color-hover          : #d16014;
  --button-border-hover         : #d16014;
  --button-primary-color        : #e2f9b8;
  --button-primary-bg           : #313715;
  --button-primary-border       : #313715;
  --button-primary-color-hover  : #e2f9b8;
  --button-primary-bg-hover     : #d16014;
  --button-primary-border-hover : #d16014;
  --form-input-bg               : var(--bg-color);
  --form-input-border           : #939f5c;
  --form-input-border-focus     : #d16014;
  --code-color                  : #313715;
  --code-bg                     : #bbce8a;
  --code-border                 : #939f5c;
  --table-td                    : #939f5c;
  --neu-bg                      : #e2f9b8;
  --neu-light                   : #f4ffe0;
  --neu-dark                    : #b3c995;
  color-scheme                  : light, dark;
}

.neu {
  background: var(--neu-bg);
  border-radius: 12px;
  box-shadow: 6px 6px 12px var(--neu-dark), -6px -6px 12px var(--neu-light);
}

.neu-inset {
  background: var(--neu-bg);
  border: none;
  border-radius: 8px;
  box-shadow: inset 4px 4px 8px var(--neu-dark), inset -4px -4px 8px var(--neu-light);
}

.neu-btn {
  background: var(--neu-bg);
  border: none;
  border-radius: 8px;
  color: var(--font-color);
  margin: 0;
  box-shadow: 4px 4px 8px var(--neu-dark), -4px -4px 8px var(--neu-light);
  transition: box-shadow .15s ease;
}
.neu-btn:hover,
.neu-btn:focus {
  box-shadow: 2px 2px 4px var(--neu-dark), -2px -2px 4px var(--neu-light);
}
.neu-btn:active {
  box-shadow: inset 3px 3px 6px var(--neu-dark), inset -3px -3px 6px var(--neu-light);
}

.neu-btn-primary {
  background-color: var(--button-primary-bg);
  color: var(--button-primary-color);
  box-shadow: 4px 4px 8px var(--neu-dark), -4px -4px 8px var(--neu-light);
}
.neu-btn-primary:hover,
.neu-btn-primary:focus {
  box-shadow: 2px 2px 4px var(--neu-dark), -2px -2px 4px var(--neu-light);
}
.neu-btn-primary:active {
  box-shadow: inset 3px 3px 6px var(--neu-dark), inset -3px -3px 6px var(--neu-light);
}

.neu-select {
  background: var(--neu-bg);
  border: none;
  border-radius: 8px;
  color: var(--font-color);
  height: 38px;
  padding: 0 12px;
  box-sizing: border-box;
  font-family: "Urbanist", sans-serif;
  font-size: 1.2rem;
  line-height: 38px;
  margin: 0;
  cursor: pointer;
  box-shadow: inset 3px 3px 6px var(--neu-dark), inset -3px -3px 6px var(--neu-light);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

/* Dark Theme - OS preference */
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
    --font-color                  : #e2f9b8;
    --bg-color                    : #313715;
    --link-color                  : #d16014;
    --link-color-hover            : #bbce8a;
    --button-color                : #bbce8a;
    --button-border               : #939f5c;
    --button-color-hover          : #e2f9b8;
    --button-border-hover         : #d16014;
    --button-primary-color        : #313715;
    --button-primary-bg           : #d16014;
    --button-primary-border       : #d16014;
    --button-primary-color-hover  : #313715;
    --button-primary-bg-hover     : #bbce8a;
    --button-primary-border-hover : #bbce8a;
    --form-input-bg               : #313715;
    --form-input-border           : #939f5c;
    --form-input-border-focus     : #d16014;
    --code-color                  : #e2f9b8;
    --code-bg                     : #2a2f12;
    --code-border                 : #939f5c;
    --table-td                    : #939f5c;
    --neu-bg                      : #313715;
    --neu-light                   : #3d431b;
    --neu-dark                    : #252a10;
  }
}

/* Dark Theme - JS toggle */
[data-theme="dark"] {
  --font-color                  : #e2f9b8;
  --bg-color                    : #313715;
  --link-color                  : #d16014;
  --link-color-hover            : #bbce8a;
  --button-color                : #bbce8a;
  --button-border               : #939f5c;
  --button-color-hover          : #e2f9b8;
  --button-border-hover         : #d16014;
  --button-primary-color        : #313715;
  --button-primary-bg           : #d16014;
  --button-primary-border       : #d16014;
  --button-primary-color-hover  : #313715;
  --button-primary-bg-hover     : #bbce8a;
  --button-primary-border-hover : #bbce8a;
  --form-input-bg               : #313715;
  --form-input-border           : #939f5c;
  --form-input-border-focus     : #d16014;
  --code-color                  : #e2f9b8;
  --code-bg                     : #2a2f12;
  --code-border                 : #939f5c;
  --table-td                    : #939f5c;
  --neu-bg                      : #313715;
  --neu-light                   : #3d431b;
  --neu-dark                    : #252a10;
}

/* Body  */

body {
  color: var(--font-color);
  background: var(--bg-color);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}

.container {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

.container::after {
  content: none;
}

footer {
  flex-shrink: 0;
  margin-top: auto;
}

/* Links */

a {
color: var(--link-color);
}
a:hover {
color: var(--link-color-hover);
}

/* Buttons */

.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
color: var(--button-color);
border-color: var(--button-border);
}

.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
color: var(--button-color-hover);
border-color: var(--button-border-hover);
}

.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
color: var(--button-primary-color);
background-color: var(--button-primary-bg);
border-color: var(--button-primary-border);
}

.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
color: var(--button-primary-color-hover);
background-color: var(--button-primary-bg-hover);
border-color: var(--button-primary-border-hover);
}

/* Forms */

input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
background-color:var(--form-input-bg);
border-color: var(--form-input-border);
}

input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
border-color: var(--form-input-border-focus);
}

/* Code */

code {
color: var(--code-color);
background: var(--code-bg);
border: var(--code-border);
}

/* Tables */

th,
td {
border-bottom-color: var(--table-td);
}

/* Dividers */

.divider {
  border: 0;
  border-top: 1px solid var(--table-td);
  margin: 3rem 0;
}

/* Logo */

.hero-row {
  display: flex;
  align-items: stretch;
}

.hero-img {
  width: 100%;
  border-radius: 12px;
}

@media (max-width: 550px) {
  .hero-row {
    flex-direction: column;
  }
  .hero-row .column {
    width: 100%;
    margin-left: 0;
  }
  .hero-img {
    width: 100%;
  }
}

@media (min-width: 550px) and (max-width: 750px) {
  .form-row {
    display: flex;
    flex-direction: column;
  }
  .form-row .nine.columns,
  .form-row .three.columns {
    width: 100% !important;
    margin-left: 0 !important;
  }
  .form-row .three.columns {
    margin-top: 1rem;
  }
}

.brand-logo {
  display: block;
  width: 280px;
  max-width: 100%;
  height: auto;
  align-self: flex-start;
  margin: 0 0 1rem 0;
}

@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) img[src="svg/favicon.svg"] {
    filter: invert(1);
  }
}

[data-theme="dark"] img[src="svg/favicon.svg"] {
  filter: invert(1);
}