:root {
    box-sizing: border-box;
}




/* ----- */
/* fonts */
/* ----- */

:root {
    font-size: 1rem;
}

body {
    font-size: 150%;
}

* {
    font-size: inherit;
    font-family: monospace;
    font-weight: inherit;
    line-height: normal;
    text-decoration: none;
}

a,
h1, h2,
input[type="button"],
span.file-input > label {
    font-weight: bold;
    letter-spacing: 0.1em;
    font-variant: small-caps;
    font-size: 150%;
}

a {
    font-size: 100%;
    text-transform: uppercase;
}

h1 a {
    text-transform: none;
    font-variant: small-caps;
    font-size: 100%;
}

p.treasure-p a {
    font-variant: none;
}

p.success-message {
    font-weight: bold;
    font-size: 150%;
}


/* ------ */
/* colors */
/* ------ */

* {
    color: inherit;
    border-color: rgb(70%, 70%, 70%);
    --text-color: rgb(40%, 40%, 40%);
    --action-color: hsl(300, 75%, 70%); /* magenta */
    --action-color-dark: hsl(300, 50%, 60%);
    --action-color-light: hsl(300, 50%, 95%);
    --logo-color: hsl(180, 75%, 70%); /* cyan */
    --logo-color-dark: hsl(180, 50%, 60%);
    --logo-color-light: hsl(180, 50%, 95%);
    --header-color: hsl(30, 75%, 70%); /* orange */
    --header-color-dark: hsl(30, 50%, 60%);
    --header-color-light: hsl(30, 75%, 95%);
    --success-color: hsl(90, 75%, 70%); /* green */
    --success-color-dark: hsl(90, 50%, 60%);
    --success-color-light: hsl(90, 75%, 95%);
}

body {
    background-color: white;
}

p {
    color: var(--text-color);
}

header h1 a {
    color: white;
    background-color: var(--logo-color);
    border-color: var(--logo-color-dark);
    box-shadow: 0px 0px var(--box-shadow-border-blur) var(--box-shadow-border-width) var(--logo-color-light) inset;
    text-shadow:
        0px 0px 1px hsla(180, 50%, 25%, 100%),
        0px 0px 1px hsla(180, 50%, 25%, 100%),
        0px 0px 1px hsla(180, 50%, 25%, 100%),

        0px 0px 1px hsla(180, 50%, 0%, 100%),
        0px 0px 2px hsla(180, 50%, 50%, 100%),
        0px 0px 2px hsla(180, 100%, 50%, 100%);
}

header section:nth-of-type(2) {
    color: white;
    background-color: var(--header-color);
    border-color: var(--header-color-dark);
    box-shadow: 0px 0px var(--box-shadow-border-blur) var(--box-shadow-border-width) var(--header-color-light) inset;
    text-shadow:
        0px 0px 1px hsla(30, 50%, 25%, 100%),
        0px 0px 1px hsla(30, 50%, 25%, 100%),
        0px 0px 1px hsla(30, 50%, 25%, 100%),

        0px 0px 1px hsla(30, 50%, 0%, 100%),
        0px 0px 2px hsla(30, 50%, 50%, 100%),
        0px 0px 2px hsla(30, 100%, 50%, 100%);
}

footer section,
header section:nth-of-type(1) {
    box-shadow: none;
}

section {
    box-shadow: 0px 0px var(--box-shadow-border-blur) var(--box-shadow-border-width) rgb(95%, 95%, 95%) inset;
}

p.success-message {
    color: white;
    background-color: var(--success-color);
    border-color: var(--success-color-dark);
    box-shadow: 0px 0px var(--box-shadow-border-blur) var(--box-shadow-border-width) var(--success-color-light) inset;
    text-shadow:
        0px 0px 1px hsla(120, 50%, 25%, 100%),
        0px 0px 1px hsla(120, 50%, 25%, 100%),
        0px 0px 1px hsla(120, 50%, 25%, 100%),

        0px 0px 1px hsla(120, 50%, 0%, 100%),
        0px 0px 2px hsla(120, 50%, 50%, 100%),
        0px 0px 2px hsla(120, 100%, 50%, 100%);
}

a,
input,
span.file-input > label {
    color: white;
    background-color: var(--action-color);
    border-color: var(--action-color-dark);
    box-shadow: 0px 0px var(--box-shadow-border-blur) var(--box-shadow-border-width) var(--action-color-light) inset;
}

a.image-link {
    border-width: 0;
    box-shadow: none;
    background-color: inherit;
    display: block;
}

a.image-link img#github-icon {
    margin-top: 1rem;
    width: 32px;
    height: 32px;
}

input[type="text"] {
    background-color: var(--action-color-light);
    color: var(--text-color);
    text-shadow: none;
}

input[type="text"]:focus {
    outline: none;
}

a,
input,
span.file-input > label {
    text-shadow:
        0px 0px 1px hsla(300, 50%, 25%, 100%),
        0px 0px 1px hsla(300, 50%, 25%, 100%),
        0px 0px 1px hsla(300, 50%, 25%, 100%),

        0px 0px 1px hsla(300, 50%, 0%, 100%),
        0px 0px 2px hsla(300, 50%, 50%, 100%),
        0px 0px 2px hsla(300, 100%, 50%, 100%);
}

header h1 a:hover {
    box-shadow:
        0px 0px var(--box-shadow-border-blur) var(--box-shadow-border-width) var(--logo-color-light) inset,
        0px 0px var(--box-shadow-border-blur) var(--box-shadow-border-width) var(--logo-color-light),
        0px 0px 1px 3px var(--logo-color-dark);
}

a:hover,
input:hover:not(:disabled),
input[type="text"]:focus,
span.file-input > input:not(:disabled) ~ label:hover {
    box-shadow:
        0px 0px var(--box-shadow-border-blur) var(--box-shadow-border-width) var(--action-color-light) inset,
        0px 0px var(--box-shadow-border-blur) var(--box-shadow-border-width) var(--action-color-light),
        0px 0px 1px 3px var(--action-color-dark);
}

a.image-link:hover {
    box-shadow: none;
}

header h1 a:active {
    color: var(--logo-color);
    background-color: var(--logo-color-light);
    text-shadow: none;
}

a:active,
input:active,
span.file-input > label:active {
    color: var(--action-color);
    background-color: var(--action-color-light);
    text-shadow: none;
}

a.image-link:active {
    background-color: inherit;
}

/* TODO: disable file input? */
input:disabled {
    opacity: 50%;
}

span.file-input > input:disabled ~ label {
    opacity: 50%;
}

footer p {
    color: rgb(50%, 50%, 50%);
}

#heart {
    color: var(--action-color);
    -webkit-text-stroke: 1px var(--action-color-light);
    opacity: 90%;
    text-shadow:
        1px 0px 0px var(--action-color-dark),
        0px 1px 0px var(--action-color-dark),
        1px 1px 0px var(--action-color-dark),
        -1px 0px 0px var(--action-color-dark),
        0px -1px 0px var(--action-color-dark),
        -1px -1px 0px var(--action-color-dark),
        -1px 0px 0px var(--action-color-dark),
        0px 1px 0px var(--action-color-dark),
        -1px 1px 0px var(--action-color-dark),
        1px 0px 0px var(--action-color-dark),
        0px -1px 0px var(--action-color-dark),
        1px -1px 0px var(--action-color-dark),


        0px 0px 2px var(--action-color-dark),
        0px 0px 2px var(--action-color-dark),
        0px 0px 2px var(--action-color-dark),
        0px 0px 2px var(--action-color-dark),
        0px 0px 2px var(--action-color-dark),
        0px 0px 2px var(--action-color-dark),
        0px 0px 2px var(--action-color-dark),
        0px 0px 2px var(--action-color-dark),
        0px 0px 2px var(--action-color-dark),
        0px 0px 2px var(--action-color-dark),
        0px 0px 2px var(--action-color-dark),
        0px 0px 2px var(--action-color-dark),
        0px 0px 2px var(--action-color-dark);
}



/* ------ */
/* layout */
/* ------ */

* {
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    padding: 1rem;
}

section {
    margin: 1rem;
}

section {
    max-width: 60ch;
    margin-left: auto;
    margin-right: auto;
}

p, h1, h2 {
    margin: 1rem;
}

/*header h1 {
    text-align: right;
    margin-right: 0rem;
}*/

header section#title-section {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

header section#title-section img {
    height: 100px;
    width: 100px;
}

header section#title-section > h1 {
    text-align: right;
    margin: 0;
}

header section#title-section > h1 > a {
    display: inline-block;
    height: 100px;
}

header section#title-section > h1 > a > span {
    display: flex;
    align-items: center;
}

header section#title-section > h1 > a > span > :nth-child(1) {
    margin-right: 1rem;
}

p.treasure-p {
    text-align: center;
}

p#scan-treasure-link-p.treasure-p {
    margin: 2rem;
}

footer p {
    margin-top: 2rem;
    text-align: center;
}

a {
    padding: 0.2em 0.5em 0.2em 0.5em;
}

a.a-button,
input,
span.file-input > label,
p.success-message {
    padding: 2rem;
}

img,
video {
    max-width: 100%;
}

div.action-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

div.action-row > * {
    margin: 1rem;
}

/* special file input button handling */
/* ala https://stackoverflow.com/a/25825731 */

span.file-input > label {
    display: inline-block;
}

input[type="file"] {
    display: none;
}




/* ------- */
/* borders */
/* ------- */

* {
    border-width: 0;
    border-style: solid;
    --box-shadow-border-width: 3px;
    --box-shadow-border-blur: 0.5px;
}

a,
section,
input,
span.file-input > label,
p.success-message {
    border-width: 1.5px;
    border-radius: 0.8rem;
}

header section:nth-of-type(1) {
    border-width: 0;
}

footer section {
    border-width: 0;
}




/* ----------- */
/* interaction */
/* ----------- */

a,
input:hover,
span.file-input > label:hover {
    cursor: pointer;
}

input:hover:disabled,
span.file-input > input:disabled ~ label:hover {
    cursor: not-allowed;
}

input[type="text"]:hover {
    cursor: text;
}




/* ------------------ */
/* app-specific rules */
/* ------------------ */

.breakable {
    overflow-wrap: break-word;
    word-break: break-word;
}

.qr-key-container {
    text-align: center;
}

.no-display {
    display: none;
}

span.spinner {
    content: url("../images/spinner.svg");
    vertical-align: middle;
}


/* ----- */
/* hacks */
/* ----- */
input {
    -webkit-appearance: none;
}
