/*                    __                 __
                     /\ \__             /\ \
  ____     __     ___\ \ ,_\      __  __\ \ \/'\
 /',__\  /'_ `\ /' _ `\ \ \/     /\ \/\ \\ \ , <
/\__, `\/\ \L\ \/\ \/\ \ \ \_  __\ \ \_\ \\ \ \\`\
\/\____/\ \____ \ \_\ \_\ \__\/\_\\ \____/ \ \_\ \_\
 \/___/  \/___L\ \/_/\/_/\/__/\/_/ \/___/   \/_/\/_/
           /\____/
           \_/__/
*/

/* global */

:root {
    --liCharcoal: #18332f;
    --liTeal: #007377;
    --liTurquoise: #00b2a9;
    --liOrange: #f1b434;
    --liApple: #97d700;
    --liNeon: #67f394;
    --liHeadings: "Jost", sans-serif;
    --liProse: "Atkinson Hyperlegible", sans-serif;
    --liRadius: 7px;
    --liBig: 14pt;
    --liSmall: 12pt;
    --liLineWidth: 1px;
    --liSpace: 20px;
    --liHalfSpace: calc(var(--liSpace) / 2);
    --liTransition: all 0.4s;
    --liBorder: 1px solid;
    --liShadow: 0 5px 20px rgb(0, 0, 0, 0.5);
    --liLeftGutter: 120px;
}

/* everything */

* {
    transition: var(--liTransition);
    font-smooth: always;
}

/* global selectors */

::selection {
    background-color: var(--liNeon);
}

::backdrop {
    background: white;
}

/* html tags, their children and their selectors */

body {
    overflow-y: scroll;
}

a {
    text-decoration: none;
    color: inherit;
}

button {
    cursor: pointer;
}

input {
    color: inherit;
    border: none;
    border-bottom: var(--liBorder);
    margin: var(--liHalfSpace) 0;
}

input:disabled {
    background: rgb(from var(--liCharcoal) r g b / 0.25);
    opacity: 70%;
    cursor: not-allowed;
}

input:focus {
    background: rgb(from var(--liNeon) r g b / 0.4);
    outline: none;
}

input:hover {
    background: rgb(from var(--liTurquoise) r g b / 0.1);
}

hr {
    opacity: 50%;
}

/* designer classes, their children and their selectors */

.main {
    max-width: 800px;
    color: var(--liCharcoal);
    font-family: var(--liProse);
    text-align: center;
    margin: 0 auto;
    background: white;
}

.header {
    width: 100%;
    vertical-align: middle;
    font-family: var(--liHeadings);
    padding: var(--liHalfSpace) 0;
    display: grid;
    grid-template-columns: 1fr 2fr;
}

.branding {
    vertical-align: middle;
    text-align: left;
    padding: var(--liHalfSpace);
    margin: auto 0;
}

.subtleheading {
    color: rgb(from var(--liCharcoal) r g b / 0.75);
    font-size: var(--liSmall);
    font-weight: 400;
}

.mainheading {
    font-size: var(--liBig);
    font-weight: 500;
}

.headingblock {
    display: inline-block;
    text-align: center;
    line-height: calc(var(--liBig) + var(--liHalfSpace));
}

.headingcell {
    text-align: right;
    vertical-align: middle;
    padding: var(--liHalfSpace);
}

.midpage {
    padding: var(--liSpace) 0;
}

.player {
    margin: var(--liSpace) auto;
    box-shadow: var(--liShadow);
    width: 100%;
    border-radius: var(--liRadius);
    border: var(--liBorder);
    border-color: white;
}

.prompt {
    text-align: left;
    padding: var(--liSpace) 0;
    font-size: var(--liBig);
}

.responsearea {
    margin: var(--liSpace) 0;
    display: grid;
    gap: var(--liSpace);
    grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
}

.response {
    padding: var(--liSpace);
    border-radius: var(--liRadius);
    border: var(--liBorder);
    border-color: var(--liTeal);
    background-color: white;
    background-image: linear-gradient(rgb(from white r g b / 0.95), rgb(from white r g b / 0.9));
    color: rgb(from var(--liTeal) calc(r/3) calc(g/3) calc(b/3));
    font-size: inherit;
    font-family: inherit;
}

.response:hover {
    background-color: var(--liTeal);
}

.correct {
    background-color: var(--liApple);
    border-color: var(--liApple);
    color: rgb(from var(--liApple) calc(r/2) calc(g/2) calc(b/2));
}

.correct:hover {
    background-color: rgb(from var(--liApple) calc(r/1.9) calc(g/1.9) calc(b/1.9));
}

.incorrect {
    background-color: var(--liOrange);
    border-color: var(--liOrange);
    color: rgb(from var(--liOrange) calc(r/2) calc(g/2) calc(b/2));
}

.incorrect:hover {
    background-color: rgb(from var(--liOrange) calc(r/1.9) calc(g/1.9) calc(b/1.9));
}

.notchosen {
    color: lightgray;
    border-color: lightgray;
    background-color: white;
    opacity: 35%;
}

.notchosen:hover {
    color: lightgray;
    border-color: lightgray;
    background-color: white;
}

.navigator {
    padding: var(--liSpace) 0;
    text-align: right;
    width: 100%;
}

.proceed {
    background-color: rgb(from var(--liApple) calc(r/1.1) calc(g/1.1) calc(b/1.1));
    background-image: linear-gradient(rgb(from white r g b / 0.25), rgb(from white r g b / 0));
    color: white;
    display: inline-block;
    padding: 20px;
    border-radius: var(--liRadius);
    font-size: var(--liBig);
    border: var(--liBorder);
    border-color: rgb(from var(--liApple) calc(r/1.5) calc(g/1.5) calc(b/1.5));
    line-height: var(--liBig);
    font-family: inherit;
}

.proceed:hover {
    background-color: rgb(from var(--liApple) calc(r/1.3) calc(g/1.3) calc(b/1.3));
}

.footer {
    margin: var(--liSpace) 0;
    font-family: var(--liHeadings);
}

.hidethis {
    opacity: 0;
    visibility: hidden;
    margin: 0;
    padding: 0;
    height: 0;
}

.certificate {
    border: var(--liBorder);
    margin: var(--liSpace) 0;
    padding: calc(2 * var(--liSpace)) var(--liSpace) calc(3 * var(--liSpace)) var(--liSpace);
    border-color: var(--liCharcoal);
    border-radius: var(--liRadius);
    font-family: var(--liHeadings);
    box-shadow: var(--liShadow);
}

.certificate > img {
    height: calc(2 * var(--liBig));
}

.certificatefield {
    font-size: var(--liBig);
}

.certificatelabel {
    font-size: var(--liSmall);
    opacity: 75%;
}

.certificateinfo {
    line-height: calc(var(--liBig) + var(--liSpace));
    text-align: left;
    font-size: var(--liBig);
    padding: var(--liSpace) 0;
    margin: var(--liSpace) 0;
}
.certificateinfo > * {
    font-family: inherit;
    font-size: inherit;
}

.certificateinfo > label {
    width: var(--liLeftGutter);
    display: inline-block;
}

.certificateinfo > input {
    min-width: calc(100% - var(--liLeftGutter));
}

.feedback {
    width: 100%;
    text-align: center;
}

.keycap {
    border-radius: 5px;
    border-top: 1px lightgray solid;
    border-left: 2px lightgray solid;
    border-right: 2px gray solid;
    border-bottom: 4px gray solid;
    background: white;
    padding: 10px 8px 4px 4px;
    margin: 0 2px 0 2px;
    font-family: monospace;
    font-size: 11pt;
    color: darkslategray;
    box-shadow: inset 0 -4px 4px rgb(0, 0, 0, 0.1), 0 1px 4px rgb(0, 0, 0, 0.1);
    display: inline-block;
    cursor: default;
}

.keycap:hover {
    box-shadow: inset 0 -4px 7px rgb(0, 0, 0, 0.2), 0 1px 7px rgb(0, 0, 0, 0.2);
}

/* by id */

#qrcode_0 {
    margin: 0 auto;
    display: inline-block;
    height: 160px;
}

/* media */

@media print {
    
    .header,
    .prompt,
    .feedback,
    .responsearea,
    .navigator,
    .footer,
    hr,
    video,
    #pre_submission {
        visibility: collapse;
        height: 0;
        overflow: hidden;
        margin:0;
        padding:0;
        line-height:0;
    }
    
    .certificate {
        margin:0 1cm;
    }
    
}

/* Copyright © 2024 Green Lithium Refining Limited and Harry Sargent (sgnt.uk) */