:root {
   font-family: "Fira Sans";
   line-height: 1.15;

   --u5:  calc(1em * 1.5 * 1.5 * 1.5 * 1.5 * 1.5 );
   --u4:  calc(1em * 1.5 * 1.5 * 1.5 * 1.5);
   --u3:  calc(1em * 1.5 * 1.5 * 1.5);
   --u2:  calc(1em * 1.5 * 1.5);
   --u1:  calc(1em * 1.5);
   --u0:  calc(1em);
   --u-1: calc(1em * 0.666);
   --u-2: calc(1em * 0.666 * 0.666);
   --u-3: calc(1em * 0.666 * 0.666 * 0.666);
   --u-4: calc(1em * 0.666 * 0.666 * 0.666 * 0.666);


   --root-c-base: #ecf0f1;
   --root-c-base-highlight: #bdc3c7;

   --root-c-primary: #1abc9c;
   --root-c-primary-highlight: #16a085;

   --root-c-secondary: #9b59b6;
   --root-c-secondary-highlight: #8e44ad;

   --root-c-black: #2c3e50;
   --root-c-black-highlight: #34495e;


   --c-base: var(--root-c-base);
   --c-base-highlight: var(--root-c-base-highlight);

   --c-primary:var(--root-c-primary);
   --c-primary-highlight: var(--root-c-primary-highlight);

   --c-secondary: var(--c-secondary);
   --c-secondary-highlight: var(--root-c-secondary-highlight);

   --c-black: var(--root-c-black);
   --c-black-highlight: var(--root-c-black-highlight);
}

.primary {
   --c-base: var(--root-c-base);
   --c-base-highlight: var(--root-c-base-highlight);

   --c-primary:var(--root-c-primary);
   --c-primary-highlight: var(--root-c-primary-highlight);

   --c-secondary: var(--c-secondary);
   --c-secondary-highlight: var(--root-c-secondary-highlight);

   --c-black: var(--root-c-black);
   --c-black: var(--root-c-black-highlight);
}

.secondary {
   --c-base: var(--root-c-base);
   --c-base-highlight: var(--root-c-base-highlight);

   --c-primary:var(--root-c-secondary);
   --c-primary-highlight: var(--root-c-secondary-highlight);

   --c-secondary: var(--root-c-primary);
   --c-secondary-highlight: var(--root-c-primary-highlight);

   --c-black: var(--root-c-black);
   --c-black-highlight: var(--root-c-black-highlight);
}

.inverted {
   --c-base: var(--root-c-black);
   --c-base-highlight: var(--root-c-black-highlight);

   --c-primary:var(--root-c-primary);
   --c-primary-highlight: var(--root-c-primary-highlight);

   --c-secondary: var(--c-secondary);
   --c-secondary-highlight: var(--root-c-secondary-highlight);

   --c-black: var(--root-c-base);
   --c-black-highlight: var(--root-c-base-highlight);
}


* {
    margin: 0em;
    padding: 0em;
    box-sizing: border-box;
}

html, body {
    font-size: var(--u0);
    height: 100%;
    background-color: var(--c-base);
    color: var(--c-black)
}

main {
   min-height: 100%;
}


h1, h2, h3, h4, h5 {
   font-family: "Fira Mono";
   padding-top: 1em;
   padding-bottom: 0.618em;
   text-transform: uppercase;
}

p {
   padding-top: 1em;
}

h1 {
   font-size: var(--u2);
}

h2 {
   font-size: var(--u1);
}

h3, h4, h5 {
   font-size: var(--u0);
}

img {
   width: 100%;
   object-fit: cover;
}

li {
    list-style-type: none;
}

table {
   width: 100%;
   border-collapse: collapse;
}

table td,
table th {
   padding: var(--u0);
   text-align: center;
}

table th {
   background-color: var(--c-primary);
   color: var(--c-base);
}

table tr:nth-child(2n+1) {
   background-color: var(--c-base-highlight);
}

/*
 *  NAV
 */

nav {

}

nav h1 {
   font-size: var(--u0);
   margin: 0rem;
}

nav li {
   display: flex;
   flex-direction: column;
}

nav li li {
   margin-left: var(--u0);
}

nav li a {
   padding: var(--u0);
   transition: all 0.1s ease-out;
}

nav li a:hover,
nav li a.selected {
   padding: var(--u0);
   background-color: var(--c-primary);
   color: var(--c-base);
}
/*
 * FOOTER
 */

footer {
   padding-top: var(--u3);
   padding-bottom:  var(--u1);
}

/*
 * INPUTS
 */

form * {
   width: 100%;
}

input[type="text"],
input[type="password"] {

   background-color: var(--c-base);

   border: none;

   border-radius: var(--u-2);
   margin-top: var(--u0);
   margin-bottom: var(--u0);

   padding: var(--u0);
   font-size: var(--u0);
   color: var(--c-black);

   /* box-shadow: var(--s-0-secondary); */
}

input[type="text"]::placeholder,
input[type="password"]::placeholder  {
  color: var(--c-primary-highlight);
  opacity: 50%;
}

button, .button {
   font-family: "Fira Mono";
   font-weight: bold;

   background-color: var(--c-primary);
   color: var(--c-base);

   border: none;
   border-radius: var(--u-2);

   margin-bottom: var(--u0);
   margin-top: var(--u0);

   padding: var(--u0);

   min-width: 10em;

   font-family: "Fira Mono";
   text-transform: uppercase;
   font-size: var(--u0);

   /* box-shadow: var(--s-0-secondary); */
}

button:active, .button:active {
   background-color: var(--c-primary-highlight);
}

input[type="text"],
input[type="password"],
button,
.button {
   transition: all 0.1s ease-out;
}

label {
   display: block;
   min-width: 10em;
   font-weight: bold;
}

/*
 * HERO
 */

.hero {
   background-color: var(--c-primary);
   color: var(--c-base);
}

.hero-black {
   background-color: var(--c-black);
   color: var(--c-base);
}

/*
 * LAYOUT
 */

.content-width {
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;

    padding-left: var(--u0);
    padding-right: var(--u0);
}

.bar-flex {
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
}

.bar-flex > * {
   margin: var(--u0);
}

.bar-flex > .spacer {
   flex: 1;
}

.sidebar-layout {
   display: flex;
   align-items: stretch;
   justify-content: center;
   flex-wrap: wrap;
}

.sidebar-layout > *:nth-child(2) {
   flex: 1;
}

.grid {
   display: flex;
   justify-content: flex-start;
   flex-wrap: wrap;
}

.grid.vertical-center {
   align-items: center;
   height: 100%;
}

.grid.center {
   justify-content: space-around;
}

.grid > * {
    flex: 1;
    margin: var(--u0);
    padding: var(--u0);
    border-radius: var(--u0);
}

.grid.base > * {
   background-color: var(--c-base);
   color: var(--c-black);
}

.grid.black > * {
   background-color: var(--c-black);
   color: var(--c-base);
}

.grid.primary > * {
   background-color: var(--c-primary);
   color: var(--c-base);
}

.grid.secondary > * {
   background-color: var(--c-primary-highlight);
   color: var(--c-base);
}

.hero-primary .grid.shadow > * {
   /* box-shadow: var(--s-0-secondary); */
}

.hero-black .grid.shadow > * {
   /* box-shadow: var(--s-0-secondary); */
}

.grid.s > .spacer {
   box-shadow: none;

   margin: calc(var(--u0) * 2);
   padding: 0px;

   width: 10rem;
   max-width: 10rem;
   min-width: 7.5rem;
   height: 0px;
}

.grid.s > * {
   max-width: 10rem;
   min-width: 7.5rem;
}


.grid.m > .spacer {
   box-shadow: none;

   margin: calc(var(--u0) * 2);
   padding: 0px;

   width: 20rem;
   max-width: 20rem;
   min-width: 15rem;
   height: 0px;
   padding: 0px;
}

.grid.m > * {
   width: 20rem;
   max-width: 20rem;
   min-width: 15rem;
}

.grid.l > .spacer {
   box-shadow: none;

   margin: calc(var(--u0) * 2);
   padding: 0px;

   width: 40rem;
   max-width: 40rem;
   min-width: 15rem;
   height: 0px;
   padding: 0px;
}

.grid.l > * {
   width: 40rem;
   max-width: 40rem;
   min-width: 15rem;
}

.vertical-spacer.s {
   min-height: 10rem;
}

.vertical-spacer.m {
   min-height: 20rem;
}

.vertical-spacer.l {
   min-height: 40rem;
}

/*
 * Impov
 */

.input-icon {
   /* box-shadow: var(--s-0-secondary); */
   display: flex;
   padding: 0px;

   border-radius: var(--u0);
}

.input-icon > input {
   flex: 1;
   margin: 0px;
   border-top-right-radius: 0px;
   border-bottom-right-radius: 0px;
   box-shadow: none;
}

.input-icon > button {
   margin: 0px;

   border-top-left-radius: 0px;
   border-bottom-left-radius: 0px;
   box-shadow: none;
}


/*
 * CONTENT
 */

.price {
   opacity: 75%;
   font-size: var(--u1);
   text-align: right;
}