:root {
    --background: #fcfcfcff;
    /* https://coolors.co/77ff72-7ec9ff-0086ed */
    --accent-one: #77ff72ff;
    --accent-two: #7ec9ffff;
    --accent-three: #0086edff;

    --accent-four: #004668ff;
    --accent-five: #011936ff;

    --key: #000;
    --matched: #000000ff;
    --matching: #0086edff;
    --matching-fill: #0086ed88;
    --empty: #f0f0f0ff;
    --threshold: #444444ff;

    --dark-grey: #444444;
    --daark-grey: #121212;
    --cozy-text: #eeeeee;

    --black: #000;
    --white: #fff;

    --title-font: tomorrow, sans-serif;
    --title-shadow-one: -0.2em 0.2em 0 var(--accent-one);
    --title-shadow-two: -0.2em 0.2em 0 var(--accent-two);
    --title-shadow-three: -0.2em 0.2em 0 var(--accent-three);
    --title-shadow-four: -0.2em 0.2em 0 var(--accent-four);
    --title-color: var(--cozy-text);
    --title-background: var(--black);

    --font-stack: montserrat, sans-serif;

    --logo-color-filter: ;

    --breakpoint: 100em;
}

/* colors */

html {
    background: var(--background);
}

body {
    color: var(--black);
    min-height: 100vh;
}

header {
    border-top: 0.5em solid var(--accent-one);
}
footer {
    border-bottom: 0.5em solid  var(--accent-four);
}

h1, h2, h3 {
    background: var(--black);
    color: var(--cozy-text);
}

h1 {
    box-shadow: var(--title-shadow-one) !important;
}
h2 {
    box-shadow: var(--title-shadow-two) !important;
}
h3 {
    box-shadow: var(--title-shadow-three) !important;
}

/* font sizes */

html {
    line-height: 2.0;
}

/* faces */
@font-face {
    font-family: azeret;
    src: url("/fonts/AzeretMono-Variable.woff2") format('woff2');
}

@font-face {
    font-family: tomorrow;
    src: url("/fonts/Tomorrow-Bold.woff2") format('woff2');
}

@font-face {
    font-family: montserrat;
    src: url("/fonts/Montserrat-Regular.woff2") format('woff2');
    font-weight: normal;
}

@font-face {
    font-family: montserrat;
    src: url("/fonts/Montserrat-Italic.woff2") format('woff2');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: montserrat;
    src: url("/fonts/Montserrat-Bold.woff2") format('woff2');
    font-weight: bold;
}

h1, h2, h3, h4 {
    font-family: var(--title-font);
    text-transform: uppercase;
    padding: 0 2% 0 2%;
}

body {
    font-family: var(--font-stack);
}

header .secondary {
    align-self: flex-start;
    font-family: tomorrow;
    text-transform: uppercase;
}

.tagline {
    font-family: tomorrow;
    margin: 0;
}

.columns {
    display: flex;
    margin-top: 1em;
}

column {
    flex: 1;
    flex-direction: column;
    align-items: center;
    display: flex;
    margin-right: 3%;
}

column > h2 {
    box-shadow: none !important;
    color: inherit;
    background: none !important;
    margin-top: 1rem;
}

column > img {
  width: 90%;
  height: auto;
  display: block;
  margin: auto 0 auto 0;
}

amount, time {
    font-family: var(--title-font);
    font-size: 2.0em;
}

/* media queries */
@media (prefers-color-scheme: light) {
    body {
        background: none;
    }
    header img.logo {
        filter: none;
    }
    .conceptual > img {
        filter: none;
    }
}

@media (prefers-color-scheme: dark) {

    :root {
        --matched: #fcfcfcff;
        --matching: #78d1ffff;
        --matching-fill: #78d1ff88;
        --empty: #0f0f0fff;
        --threshold: #c0c0c8ff;
        --key: #fff;
    }

    header img.logo {
        filter: invert(100%) !important;
    }
    .conceptual > img, .big-idea, column > img {
        filter: invert(100%);
    }
    html {
        background: var(--black) !important;
        color: var(--cozy-text);
    }
    main {
        background: var(--black) !important;
    }
    body {
        background: var(--black);
        color: var(--cozy-text);
    }
    h1, h2, h3 {
        color: var(--black);
    }

    h1 {
        box-shadow: var(--title-shadow-four) !important;
        background: var(--accent-one) !important;
    }
    h2 {
        box-shadow: var(--title-shadow-four) !important;
        background: var(--accent-two) !important;
    }
    h3 {
        box-shadow: var(--title-shadow-four) !important;
        background: var(--accent-three) !important;
    }
    column > h2 {
        background: none !important;
        box-shadow: none !important;
        color: inherit;
    }
    img.no-invert {
        filter: none;
    }
    footer {
        background: var(--daark-grey) !important;
    }
}

@media (max-width: 40em) {
    html {
        font-size: 14px;
    }

    h1 {
        font-size: 1.4em;
    }
    h2 {
        font-size: 1.3em;
    }
    h3 {
        font-size: 1.2em;
    }
    h4 {
        font-size: 1.1em;
    }
}

@media (min-width: 30em) {
    html {
        font-size: 14px;
    }
}

@media (max-width: 32em) {
    a.button {
        font-size: 0.7em;
    }
}

@media (min-width: 40em) {
    html {
        font-size: 14px;
    }
    h1 {
        font-size: 1.3em;
    }
    h2 {
        font-size: 1.2em;
    }
    h3 {
        font-size: 1.1em;
    }
    h4 {
        font-size: 1.0em;
    }
}

@media (min-width: 32em) and (max-width: 40em) {
    a.button {
        font-size: 0.8em;
    }
}

@media (max-width: 60em) {
    div.conceptual {
        flex-direction: column;
    }
    .conceptual > img {
        max-width: calc(60%);
        margin: auto;
    }
    .fund-states {
        font-size: 1.4em;
    }
}

@media (min-width: 60em) {
    html {
        font-size: 14px;
    }
    .conceptual > img {
        flex: 0.3;
        max-width: calc(30%);
    }
    .fund-states {
        font-size: 1.8em;
    }
}

@media (min-width: 80em) {
    html {
        font-size: 14px;
    }
}

@media (max-width: 100em) {
    header nav {
        max-width: 100%;
        overflow: hidden;
    }

    header .secondary {
    }

    header img.logo {
        width: 90%;
        margin-top: 1.2em;
    }

    .inner {
        display: flex;
        justify-content: center;
        padding: 0 2em 0 2em;
    }
}

@media (max-width: 64em) {
    .inner {
        margin: 0 auto;
        max-width: 60em;
        padding: 0 2em 0 2em;
    }

    .big-idea {
        display: flex;
        max-width: calc(90%);
        display: block;
        margin: 2em auto 1em auto;
    }
}

@media (min-width: 64em) {
    .inner {
        margin: 0 auto;
        max-width: 60em;
        padding: 0 2em;
    }
}

@media (min-width: 80em) {
    html {
        font-size: 16px;
    }

    .inner {
        margin: 0 auto;
    }

    header img.logo {
        width: 80%;
        margin-top: 1.72em;
    }

    header .inner {
        display: flex;
        justify-content: center;
    }

    header .primary {
        align-items: flex-start;
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 1.0;
    }

    header .secondary {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        flex: 0.7;
    }
    a.button {
        font-size: 0.8em;
    }
    header nav {
        justify-content: right;
    }
}

html {
    box-sizing: border-box;
    height: 100%;
}

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.flex_main {
    flex: 1;
}

header {
    text-align: center;
}

header .primary h1 {
    text-align: center;
    margin-bottom: 0;
}

header .primary h1 span {
    display: block;
}

header .secondary h2 {
    font-size: 2em;
    line-height: 1;
    margin-top: 0;
}

header nav {
    display: flex;
    justify-content: center;
}

header nav .button {
    margin: 0 1px;
    padding: 0.3em 1em;
    border-radius: 0;
}

header nav .button > span {
    display: inline-block;
}

header img.logo {
    filter: var(--logo-color-filter);
}

.top_margin {
    padding-top: 1em;
}

.button {
    background: var(--black);
    border-radius: 3px;
    color: var(--black);
    text-decoration: none;
    padding: 0.5em;
    transition: background 0.3s ease-in-out;
}

.button:hover,
.button:active,
.button:focus {
    background: var(--accent-one);
    color: var(--accent-one);
}

.button.features {
    background: var(--accent-one);
}

.button.features:hover,
.button.features:active,
.button.features:focus {
    background: var(--accent-five);
}

.button.vision {
    background: var(--accent-two);
}

.button.vision:hover,
.button.vision:active,
.button.vision:focus {
    background: var(--accent-five);
}


.button.login {
    background: var(--accent-three);
}

.button.login:hover,
.button.login:active,
.button.login:focus {
    background: var(--accent-five);
}

main {
    padding-bottom: 3em;
}

/* footer */

footer {
    /* border-bottom: 0.5em solid  var(--accent-four);*/
    flex-grow: 1;
    background: var(--daark-grey);
}

footer ul {
    list-style-type: none;
    line-height: 1.5;
    padding: 0 3.0em 0 0;
    margin: 0;
}

footer .bottom-links {
    padding: 1em 1em 2em 1em;
    width: auto;
    display: flex;
}

footer a {
    text-decoration: none;
    color: var(--accent-four);
}

.footer-section {
    font-weight: bold;
    color: var(--cozy-text);
}

/* general */

h1, h2, h3, h4 {
    margin-top: 0.75em;
    margin-bottom: 0.0em;
    line-height: 1.5em;
}

.inner {
    display: block;
}

p {
    font-size: 1.0em;
    margin-top: 1.4em;
    margin-bottom: 0.0em;
    padding: 0 1em 0 1em;
}

ul {
    padding-left: 2.0em;
}

a {
    color: var(--accent-four);
    text-decoration: none;
    transition: text-shadow, color 800ms;
}

a:hover {
    color: var(--accent-one);
    transition: text-shadow, color 800ms;
}

/* unique elements */
.our-mission {
    font-weight: bold;
    font-size: 1.8em;
    text-align: center;
    margin-right: 1.0em;
    margin-left: 1.0em;
    margin-bottom: 0.0em;
    margin-top: 0.8em;
}

div.conceptual {
    display: flex;
}

.conceptual > img {
    margin-top: 2em;
    display: block;
    margin-bottom: 1em;
    height: 100%;
}

.conceptual > p {
    display: block;
    flex: 0.9;
}

.big-idea {
    display: flex;
    max-width: calc(76%);
    display: block;
    margin: 2em auto 1em auto;
}

.fund-states {
    font-family: tomorrow;
    display: block;
    text-align: center;
    margin-top: 1.0em;
}

.centered {
    text-align: center;
}

h1.call-to-action {
}

h2.call-to-action {
    text-align: center;
    margin-right: 1.0em;
    margin-top: 0.6em;
    font-size: 2.0em;
}

img.prizeforge-logo {
    filter: var(--logo-color-filter);
    margin-top: 2.5em;
    margin-right: 1.0em;
    width: 90%;
}

.form {
    display: flex;
    justify-content: center;
    padding-top: 1em;
}

form {
  display: flex;
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
}

input[type="text"],
input[type="password"] {
  font-size: 1.0em;
  padding: 0.4em 0.6em;
  margin: 0.8em;
  border: 1px solid #ccc;
  border-radius: 0;
  outline: none;
  transition: border 0.3s, box-shadow 0.3s;
}

input[type="text"]:focus,
input[type="password"]:focus {
  border: 1px solid #000000;
  box-shadow: 0 0 4px var(--accent-four);
}

input[type="text"]::placeholder,
input[type="password"]::placeholder {
  color: #777;
  opacity: 1;
}

label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
}

input[type="checkbox"] {
  transform: scale(2.0);
  accent-color: var(--accent-four);
}

.errors {
  padding: 0.3em 0.5em;
  border: 1px solid #ee2222;
  border-radius: 0.5rem;
  background-color: #dd8888;
  color: #d00;
}

button {
  background-color: #000;
  color: #fff;
  border: 1px solid #fff;
  margin: 1.0em 0.0em;;
  padding: 0.5em 1.0em;
  cursor: pointer;
  font-size: 1.0em;
  font-family: tomorrow;
  text-transform: uppercase;
  transition: background-color 0.3s;
}

.left-chunk {
    justify-content: left;
}

.pass-strength-container {
    display: flex;
    margin: 0.2em 0.0em 0.2em 0.6em;
    height: 0.4em;
}

.pass-strength-step {
    flex: 0.19;
    margin-right: 5%;
    transition: background-color 0.5s;
    border-radius: 0.2em;
}

.pass-strength-step:last-child {
    margin-right: 0;
}

.pass-strength-step.ohgod {
    background-color: #dd0000;
}

.pass-strength-step.weak {
    background-color: #ef6400;
}

.pass-strength-step.notbad {
    background-color: #efef00;
}

.pass-strength-step.strong {
    background-color: #20ef50;
}

.simulation {
    aspect-ratio: 2.854101;
    width: 100%;
    margin-top: 1.0em;
    font-family: azeret;
}