: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-glassy: #fff9;
    --red-gradient: linear-gradient(45deg, #ffd2cc, #ffcccc);
    --magical: linear-gradient(45deg, #e0f2ff, #e4fff0, #eee0ff);
}

* {
    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,
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,
main a.return-button,
main a.delete-button,
main a.cancel-button,
main a.magic-button
{
    text-decoration: none;
    border-radius: 15px;
    color: #000;
    text-align: center;
    font-weight: 700;
    margin: 4px;
    margin-top: 0;
    padding: 10px 20px 10px 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,
main a.return-button,
main a.cancel-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.scary-button,
main a.delete-button
{
    background: var(--red-gradient);
    color: #500;
}


main a.magic-button
{
    background: var(--magical);
    /*
    animation-name: magic-ani;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    */
}

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

main .piece-of-stats .header
{
    display: block;
    font-size: 16pt;
    font-weight: 600;
    margin-bottom: 10px;
}

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 form label
{
    display: block;
    margin-bottom: 10px;
    font-size: 12pt;
}

main form input,
header .lower-half form input
{
    display: block;
    border-radius: 20px;
    padding: 12px 30px 12px 30px;
    font-size: 15pt;
    width: 90%;
    margin: auto;
    border: 1px solid #fff;
    transition-duration: 300ms;
}

main form input:focus,
header .lower-half form input:focus
{
    outline: none;
    border: 1px solid;
    transition-duration: 300ms;
}


main form input[type=submit]
{
    width: auto;
    border: none;
    border-radius: 20px;
    padding: 12px 30px 12px 30px;
    background: var(--yellow-gradient);
    font-weight: 600;
    font-size: 15pt;
}

main form input[type=submit]:hover
{
    cursor: pointer;
    background: var(--yellow-gradient-bright);
}

main * .response-option-short-list
{
    margin-top: 12px;
}

main * .response-option-short
{
    display: inline-block;
    margin-top: 7px;
    background: #F1F1F1;
    border-radius: 6px;
    padding: 4px;
    font-weight: 500;
}

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;
}

main .return-button-centerer
{
    display: grid;
}

main a.return-button,
main a.delete-button,
main a.cancel-button
{
    margin: auto;
    margin-bottom: 15px;
}

header .lower-half form input
{
    transition-duration: 300ms;

@keyframes magic-ani
{
    0% {
        filter: hue-rotate(0deg);
    }
    100% {
        filter: hue-rotate(360deg);
    } 
}