:root {
    --yellow-gradient: linear-gradient(45deg, #ffe88d, #fff8b7);
    --yellow-gradient-bright: linear-gradient(45deg, #ffeba1, #fffacb);
    --blue-gradient-subtle: linear-gradient(45deg, #e7ebff, #e7efff);
    --blue-gradient-glassy: linear-gradient(45deg, #fff9, #fff9);
    --red-gradient: linear-gradient(45deg, #ffd2cc, #ffcccc);
}

* {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

html {
    width: 100%;
    background: var(--blue-gradient-subtle);
}

body {
    max-width: 600px;
    margin: auto;
}

header {
    border: solid 2px;
    padding: 10px;
    margin-top: 20px;
    margin-bottom: 20px;
    border-radius: 8px;
}

header .top-half, header .lower-half {
    text-align: center;
}

header .top-half {
    margin-bottom: 12px;
}

header .lower-half input {
    margin-bottom: 12px;
}

header .top-half .view-test-id-tag {
    color: #333333;
    font-size: 16pt;
    margin-right: 12px;
}

header .top-half .view-test-main-tag {
    color: #000;
    font-size: 20pt;
    font-weight: 600;
}

header .lower-half a.generic-button,
header .lower-half a.sub-button,
main * a.sub-button,
main * a.scary-button
{
    text-decoration: none;
    border-radius: 15px;
    color: #000;
    text-align: center;
    font-weight: 700;
    margin: 4px;
    margin-top: 0;
    padding: 10px;
    padding-left: 20px;
    padding-right: 20px;
    display: inline-block;
}

header .lower-half a.generic-button {
    background: var(--yellow-gradient);
}

header .lower-half a.generic-button:hover {
    background: var(--yellow-gradient-bright);
}

header .lower-half a.sub-button,
main * a.sub-button
{
    border: 1px solid #000;
}

main * div.controls
{
    display: grid;
    grid-auto-flow: column;
    margin-top: 13px;
    grid-auto-columns: max-content;
    justify-content: end;
}

main * a.sub-button {
}

main * a.scary-button
{
    background: var(--red-gradient);
    color: #500;
}

main .test-short,
main .question-short,
main .response-option
{
    padding: 20px;
    background: var(--blue-gradient-glassy);
    margin-top: 16px;
    border-radius: 14px;
    vertical-align: middle;
}

main .test-short a.test-link,
main .question-short a.question-link {
    display: block;
    text-decoration: none;
}

main .test-short a.test-link .main-label {
    color: #002;
    font-weight: 700;
    font-size: 16pt;
}

main .test-short a.test-link .sub-label,
main .question-short a.question-link .sub-label {
    color: #333;
    margin-right: 11px;
}

main .test-short a.test-link {
    display: block;
    text-decoration: none;
}

main .question-short a.question-link .main-label {
    color: #002;
    font-weight: 600;
    font-size: 15pt;
}

main * .sub-title {
    display: block;
    margin-top: 12px;
}

main .response-option a.response-option-mark {
    font-size: 16pt;
    text-decoration: none;
    display: inline-block;
    padding: 2px 10px 3px 10px;
    margin-right: 12px;
    color: #001;
    border-radius: 24px;
    border: solid 1px;
    font-family: monospace;
}