:root {
    --shadow: rgba(0,0,0,0.5);
    --overlay: rgba(0,0,0,0.8);

    /* http://paletton.com/#uid=73O1C0kpDPq5GSwhHNBDnTPYVGk */

    --active: royalblue;
    --active-border: #144AEC; /* royalblue + 1 */

    --header: #0133C9; /* royalblue + 2 */
    --header-text: white;

    --disabled-highlight: hsl(0,0%,80%);
    --disabled: hsl(0,0%,70%);
    --disabled-border: hsl(0,0%,60%);

    --window: white;
    --window-border: hsl(0,0%,90%);

    --menu: hsl(0,0%,98%);

    --page: whitesmoke;

    /* Lightest of their color */
    --info-message: #DFF7CB;
    --warning-message: #FFF1D2;
    --error-message: #F8CCD9;

    /* Darkest of their color */
    --info-border: #67EC00;
    --warning-border: #FFAE00;
    --error-border: #EF0044;
}

@font-face {
    font-family: Password;
    src: url(Password.woff);
}

html {
    background-color: var(--page);
    margin: 0;
    padding: 0;
}

html, html * {
    font: 20pt sans-serif;
}

body {
    z-index: 0;
    max-width: 24em;
    margin: 2.5rem auto 0 auto;
    border-radius: 0.5em;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    background-color: var(--window);
    box-sizing: border-box;
}

body, #menu {
    padding: 1em 1em 2em 1em;
    border: 1px solid var(--window-border);
    border-top: 0;
}

#header, #header * {
    color: var(--header-text);
    text-shadow: 0 0 0.2em var(--shadow);
}

#header {
    background-color: var(--header);
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    box-shadow: 0 0 0.5em var(--shadow);
    width: 100%;
    height: 2.5rem;
    z-index: 20;
}

#header > h1 {
    text-align: center;
    font-weight: bold;
    line-height: 1.25em;
}

#footer {
    /* Hangs below the body. */
    position: relative;
    height: 0;
    top: 6em; /* body.padding-bottom * 1/footer.font-size */
    font-size: 50%;
    line-height: 300%;
    background-color: none;
    text-align: center;
    color: var(--disabled);
    text-shadow: 0 1px 0 white;
}

#footer a, #footer a:visited {
    color: var(--disabled);
    font-size: inherit;
    margin: 0 1em;
    padding: 0;
    white-space: nowrap;
    text-decoration: none;
    border-bottom: 1px solid var(--disabled);
}

#footer a:hover, #footer a:active {
    color: var(--disabled-highlight);
    border-bottom: 1px solid var(--disabled-highlight);
}

.bi {
    font-size: inherit;
    vertical-align: middle;
}

button {
    position: relative;
    background: transparent;
    border: 0;
    top: 0;
    left: 0;
}

button:focus {
    outline: none;
}

button:active {
    top: 0.1em;
    left: 0.1em;
    color: inherit;
}

button, button:active {
    transition: left 200ms, top 200ms;
}

#menuButton {
    position: absolute;
    width: 2.5em;
    height: 2.5em;
    box-sizing: border-box;
    text-shadow: 0 0 0.5em var(--shadow);
}

#menuButton:hover {
    text-shadow: 0 0 0.5em var(--header-text);
}

#menuButton:active {
    text-shadow: -0.1em -0.1em 0.5em var(--shadow);
}

#menuButton, #menuButton:hover, #menuButton:active {
    transition: text-shadow 200ms, left 200ms, top 200ms;
}

#menu {
    z-index: 40;
    min-width: 10em;
    max-width: 80%;
    max-width: calc(100% - 2em);
    position: fixed;
    margin: 0;
    top: 0;
    bottom: 0;
    left: -120%;
    border-top: 0;
    border-left: 0;
    border-bottom: 0;
    box-shadow: -0.2em 0 0.5em var(--shadow);
    background-color: var(--menu);
    overflow: scroll;
    box-sizing: border-box;
}

#menu.open {
    left: 0;
}

#menu, #menu.open {
    transition: left 200ms;
}

#menu > *:first-child {
    margin-top: 0;
}

#overlay {
    visibility: hidden;
    position: fixed;
    background-color: var(--shadow);
    opacity: 0;
}

#menu.open + #overlay {
    visibility: visible;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 1;
    z-index: 30;
}

#overlay, #menu.open + #overlay {
    transition: opacity 200ms;
}

/* Screen is big enough to show the menu and the app */
@media screen and (min-width: 640px) {
    #menu {
        z-index: 10;
        position: absolute;
        top: 0;
        left: 0;
        min-width: 10em;
        min-height: 100%;
        padding-top: 3.5em;
    }

    #menu.open + #overlay {
        display: none;
    }

    #menuButton {
        display: none;
    }

    html {
        margin-left: 10em;
    }
}

/* Screen is big enough to show both, but not big enough to add padding to the app */
@media screen and (max-width: 900px) {
    body {
        border-left: 0;
        border-right: 0;
        border-radius: 0;
    }
}

/* Screen is too small to fit an overlay */
@media screen and (max-width: 320px) {
    #menu {
        top: 2.5em;
        min-width: 100%;
        max-width: 100%;
        z-index: 10;
    }

    #menu.open + #overlay {
        display: none;
    }
}

/*********************
 * Main input fields *
 *********************/

input[type=text],
input[type=password],
input[type=number] {
    border: 0;
    border-bottom: 0.1em solid var(--shadow);
    background-color: transparent;
    box-sizing: border-box;
    width: 100%;
    height: 1.5em;
    padding: 0.2em 0.1em;
    margin: 0.5em 0;
    font: 20pt sans-serif;
}

#result:not(:placeholder-shown) {
    font-family: Password;
}

input[type=text]:invalid,
input[type=password]:invalid,
input[type=number]:invalid {
    border-bottom-color: var(--error-border);
    box-shadow: none;   /* Overrides mozilla default. */
}

input[type=text]:focus,
input[type=password]:focus,
input[type=number]:focus {
    outline: none;      /* Overrides webkit outline. */
    border-bottom-color: var(--active);
}

input[type=text],
input[type=password],
input[type=number],
input[type=text]:focus,
input[type=password]:focus,
input[type=number]:focus {
    transition: border-bottom-color cubic-bezier(1, -1, 0, 2) 200ms;
}

/*******************
 * Toggle Switches *
 *******************/

#menu label {
    display: block;
    width: 100%;
    box-sizing: border-box;
    clear: right;
    margin: 1em 0 0 0;
}

input[type=number] {
    float: right;
    text-align: right;
    padding: 0.2em;
    position: relative;
    width: 2.5em;
    margin: -1.375em 0 0 0;
    right: 0;
    box-sizing: border-box;
}

input[type=checkbox] {
    -webkit-appearance: none;
    -moz-appearance: none;
    float: right;
    width: 1.5em;
    height: 1.5em;
    margin: -1.28em 0.5em 0 0;
    right: 0;
    position: relative;
}

input[type=checkbox]:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0.5em;
    height: 0.5em;
    width: 1.5em;
    border: 1px solid var(--disabled-border);
    background-color: var(--disabled);
    border-radius: 0.5em;

    transition: background-color 200ms, border-color 200ms;
}

input[type=checkbox]:after {
    position: absolute;
    content: "";
    left: -0.25em;
    top: 0.25em;
    height: 1em;
    width: 1em;
    border: 1px solid var(--window-border);
    background-color: var(--window);
    box-shadow: 0 0.05em 0.1em var(--shadow);
    border-radius: 50%;

    transition: left 200ms;
}

input[type=checkbox]:checked:before {
    background-color: var(--active);
    border-color: var(--active-border);

    transition: all 200ms;
}

input[type=checkbox]:checked:after {
    left: 0.75em;

    transition: all 200ms;
}

/************************
 * Show Password Button *
 ************************/

.input-group {
    display: flex;
    flex-flow: row nowrap;
}

.input-group > input {
    /* Allow the input element to shrink until the @media tag takes over. */
    min-width: 0;
}

@media screen and (max-width: 320px) {
    .input-group {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .input-group > input:first-child {
        min-width: unset;
    }
}

/* Toggle the button icon depending on the state of the result. */
#result:not(.show) ~ * ~ #show-password > .hide,
#result.show ~ * ~ #show-password > .show {
    display: none;
}
#result:not(.show) ~ * ~ #show-password > .show,
#result.show ~ * ~ #show-password > .hide {
    display: unset;
}

#result.show {
    font-family: monospace;
}

/******************
 * Flash Messages *
 ******************/

@keyframes fadeZoomSlideInOut {
    0% {
        transform: scale(1.5,1.5) translateY(-100%);
        opacity: 0;
    }
    10% {
        transform: none;
        opacity: 1;
    }
    90% {
        transform: none;
        opacity: 1;
    }
    100% {
        transform: translateY(-100%) scale(1.5,1.5);
        opacity: 0;
    }
}

#flash-messages {
    position: absolute;
    top: 2.5em;
    left: 0;
    right: 0;
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    z-index: 10;
}

#flash-messages > * {
    border-radius: 0.5em;
    box-shadow: 0 0.1em 0.5em var(--shadow);
    margin: 1em 0 0 0;
    padding: 0.5em;

    animation: fadeZoomSlideInOut 2s ease-in-out none 1;
}

#flash-messages > *.info {
    background-color: var(--info-message);
    border-color: var(--info-border);
}

#flash-messages > *.warning {
    background-color: var(--warning-message);
    border-color: var(--warning-border);
}

#flash-messages > *.error {
    background-color: var(--error-message);
    border-color: var(--error-border);
}

/******************************
 * 3-color hash of the secret *
 ******************************/

#secret {
    background-position: 100% 0;
    background-size: 0.5em 100%;
    background-repeat: no-repeat;
}