@font-face {
    font-family: CharisSIL;
    src: url(CharisSIL-Regular.woff2);
}

* {
    margin: 0;
    padding: 0;
}


h1:not(:first-of-type)::before {
    border-top: rgba(0, 0, 0, 0.5) 1px dashed;
    width: 100%;
    position: absolute;
    left: 0;
    display: block;
    height: 1px;
    content: '';
    margin: 0;
    padding: 0;
    margin-top: -30px;
}

h1:not(:first-of-type) {
    margin-top: 20px;

}

h1:not(.no-shadow) {
    padding: 30px 0;
    background: radial-gradient(ellipse at top, white 0%, transparent 75%);
    text-align: center;
}

h1, h2, main > p, main > .reduced > p, p.description, p.spaced {
    margin-bottom: 20px;
}


p.spaced {
    margin-top: 20px;
}

.progress {
    height: 3px;
    background: transparent;
}

main > p, main > .reduced > p, p.description, p.spaced, .problem p.text {
    text-align: justify;
    line-height: 1.5;
}

body {
    padding: 30px;
    padding-top: 0;
    font-family: 'Arial', sans-serif;
    background: linear-gradient(to bottom right, rgb(248, 246, 244), rgb(250, 244, 230));
    background-size: cover;
    background-attachment: fixed;
    color: #111;
}

.box {
    background-color: #EEE;
    padding: 10px;
    /* border: 1px solid gray; */
    box-shadow: 0 0 5px gray;
    border-radius: 5px;
    margin-bottom: 30px;
    position: relative;
}

.gloss {
    margin-bottom: 5px;
    padding: 10px;
    font-style: italic;
    font-size: 16px;
}

.source, .target {
    font-family: CharisSIL;
    border: 1px solid lightslategray;
    padding: 10px;
    vertical-align: bottom;
    font-size: 18px;
    background-color: white;
    min-height: 32px;
    word-break: keep-all;
    white-space: nowrap;
    overflow-x: auto;
}

span[data-key] {
    background-color: #b177a2;
    border: 1px solid #b177a2;
    display: inline-block;
    /* letter-spacing: -2px; */
    margin: 2px;
    padding: 0 2px;
    color: rgba(255, 255, 255, .4);
    /* vertical-align: top; */
    border-radius: 3px;
    transition: background-color 0.05s linear;
    font-family: monospace;
}

.prompt {
    background: linear-gradient(to bottom right, rgb(247, 208, 136), rgb(255, 216, 202));
}

.instruction {
    font-size: 12px;
    color: rgba(0, 0, 0, .5);
    margin: 10px;
    margin-bottom: 0;
    margin-left: 0;
}

main {
    max-width: 900px;
    margin: 0 auto;
}

.problem {
    margin-bottom: 75px;
}

.reduced {
    opacity: 0.4;
}

.box {
    transition: filter 0.3s ease-in-out;
}

.correct {
    animation: correct 1s ease-out;
    filter: hue-rotate(50deg);
}

@keyframes correct {
    25% {
        transform: scale(105%);
    }

    100% {
        transform: none;
    }
}

.language-info {
    text-align: center;
}

.description {
    color: green;
}

.reveal, .grade, .go {
    font-family: inherit;
    text-decoration: none;
    display: inline-block;
    margin-top: 10px;
    padding: 10px 20px;
    margin-right: 15px;
    background: yellowgreen;
    box-shadow: 0 3px 6px lightgray;
    border: none;
    letter-spacing: 1px;
    font-size: 16px;
    color: white;
    text-transform: uppercase;
    border-radius: 5px;
    outline: none !important;    
    text-shadow: 0 0 10px rgba(0, 0, 0, .5);  
    transition: background 0.5s, box-shadow 0.5s, opacity 0.25s;
}

.reveal:hover:not(.disabled), .grade:hover:not(.disabled), .go:not(.disabled):hover {
    box-shadow: 0 3px 9px yellowgreen;
}

.reveal:focus:not(.disabled), .grade:focus:not(.disabled), .go:not(.disabled):focus {
    background: radial-gradient(circle at 75% 75%, yellowgreen 0%, yellowgreen 60%, olivedrab 65%);
    
}

.reveal.disabled, .go.disabled, .grade.disabled {
    cursor: not-allowed;
    background: lightgray;
}

.reveal:not(.disabled), .go:not(.disabled):not(.no-animation) {
    cursor: pointer;
    animation: reveal 1s ease-out;
}

.language-info .description {
    animation: appear 5s linear;
}

@keyframes reveal {
    25% {
        transform: scale(125%) rotate(5deg);
        filter: hue-rotate(90deg);
    }

    50% {
        transform: scale(125%) rotate(-5deg);
        filter: hue-rotate(180deg);
    }

    100% {
        transform: none;
        filter: none;
    }
}

@keyframes appear {
    0% {
        opacity: 0;
        max-height: 0;
    }

    20% {
        opacity: 1;
    }

    100% {
        max-height: 100vh;
    }
}

.classified-words {
    max-width: 490px;
    margin: 30px auto;
    background-color: rgba(255, 255, 255, .5);
    box-shadow: 0 0 5px rgba(0, 0, 0, .25);
    border-radius: 5px;
}

.classified-words > .word {
    display: inline-block;
    padding: 15px 10px;
    width: 140px;
    color: gray;
    margin: 0;
    text-align: center;
}

.classified-words > .word::first-line {
    color: #111;
}

.no {
    color: #A67;
}


.yes {
    color: #7A6;
}

.grading {
    animation: grading 1.5s ease-in-out infinite;
    margin: 0 auto;
}

@keyframes grading {
    0% {
        background: deepskyblue;
        width: 1%;
    }

    50% {
        background: steelblue;
        width: 100%;
    }

    100% {
        background: transparent;
    }
}

.ordering-items {
    /* margin: 30px auto;
    background-color: rgba(255, 255, 255, .5);
    box-shadow: 0 0 5px rgba(0, 0, 0, .25);
    border-radius: 5px;*/
    text-align: center;
}

.ordering-items span {
    display: inline-block;
}

.ordering-items img {
    background-color: white;
    border: 1px solid lightgray;
    vertical-align: middle;
    margin: 10px;
    display: inline-block;
    border-radius: 5px;
}

.mapping {
    margin-left: 30px;
}

.mapping td {
    padding: 5px;
}

.duplicate {
    box-shadow: 0 0 5px red;
    /* background-color: lightpink; */
}

.box.duplicate {
    box-shadow: 0 0 10px red, inset 0 0 5px red;
    /* background-color: lightpink; */
}

.ordering-grades {
    color: lightgray;
}

.ordering-grades > * {
    display: inline-block;
    margin: 20px;
    transition: color 0.3s linear;
}

.ordering-grades > .yes {
    /* animation: correct 1s ease-out; */
}

ol {
    margin: 20px;
    /* list-style-type: parenthesis; */
}

ol li {
    margin-bottom: 10px;
}

ol {
    counter-reset: list;
}

ol > li {
    list-style: none;
}

ol > li:before {
    white-space: pre;
    content: counter(list) ")  ";
    counter-increment: list;
}

ol > li:not(:last-child):after {
    content: ",";
}

ol > li:last-child:after {
    content: ".";
}

header {
    position: fixed;
    top: 0;
    left: 0;
    background: steelblue;
    width: 100%;
    /* margin-top: -50px; */
    /* margin-left: -30px; */
    color: white;
    display: table;
    box-shadow: 0 0 10px white;
    z-index: 10000;


}

header > p {
    display: table-cell;
    padding: 20px 30px;
    vertical-align: middle;
}

#participant {
    text-align: right;
} 

main {
    margin-top: 60px;
}

#score .total, #score .achieved {
    height: 10px;
}

#score .total {
    display: inline-block;
    text-align: left;
    border: 1px solid white;
    border-radius: 3px;
    width: 100px;
    background: rgba(0, 0, 0, .25);
}

#score .achieved {
    display: inline-block;
    vertical-align: top;;
    background: yellowgreen;
    width: 0;
}

#score .score-text {
    display: block;
    font-size: 12px;
    line-height: 12px;
    margin-top: 0;
    margin-left: 10px;
    /* display: none; */
}




form#identify {
    line-height: 1.5;
    margin-top: 100px;

    /* display: table-cell; */
    text-align: center;
    /* vertical-align: middle; */
}

#identify-container {
    /* position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: table; */
}


#identify p {
    margin: 20px;
}

.conditions {
    max-width: 500px;
    background: moccasin;
    height: 150px;
    border-radius: 10px;
    display: inline-block;
    border: 1px dashed lightsalmon;
    padding: 10px;
    margin: 20px;
    overflow-y: auto;
    text-align: left;
    line-height: 1.5;
}

.inflection {
    font-family: CharisSIL;
    font-size: 18px;
    margin: 30px auto;
    background-color: rgba(255, 255, 255, .5);
    box-shadow: 0 0 5px rgba(0, 0, 0, .25);
    border-radius: 5px;
}

.inflection td {
    padding: 5px 10px;
}

.box-container {
    text-align: center;
    margin: 30px;
}

.box-container > .box {
    text-align: left;
    display: inline-block;
    margin: 10px;
}

.points {
    color: #999;
}

.max-points-for-problem {
    font-weight: normal;
    color: #999;
}

.max-points {
    position: absolute;
    right: 10px;
    top: 20px;
    color: #777;
}


@media (min-height: 768px) and (min-width: 900px) {
    form#identify {
        display: table-cell;
        vertical-align: middle;
        margin-top: 0;
    }

    #identify-container {
        position: fixed;
        top: 60px;
        left: 0;
        width: 100vw;
        height: calc(100vh - 60px);
        display: table;
    }

}


@media (max-width: 1024px) {
    header {
        position: static;
        margin: 0 -30px;
        width: calc(100% + 60px);
    }

    main {
        margin-top: 0;
    }
        
    form#identify {
        margin-top: 25px;
    }
}

@media (max-width: 768px) {
    header > p {
        display: block;
        text-align: center !important;
    }
}

@media (max-width: 640px) {
    .max-points {
        position: static;
        padding: 10px;
        margin-top: -20px;
    }
}

.round {
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, .75);
    padding: 0 5px;
    display: inline-block;
}

.test-question p:not(.control) {
    margin-bottom: 15px;
    line-height: 1.5;
}

.test-question hr {
    border: none;
    border-top: 1px solid lightgray;
    margin: 30px 0;
}

.test-question p.control {
    margin-bottom: 15px;
}

.test-question p.control input[type="checkbox"], .test-question p.control input[type="radio"] {
    margin-right: 15px;
    /* display: inline-block; */
}

.test-question p.control span {
    display: inline-block;
    width: 35px;
    margin-left: 15px;
    color: gray;
}

.procedure {
    box-shadow: 0 0 5px rgba(0, 0, 0, .25); border-radius: 5px; padding: 0 20px; border: 1px solid transparent; background: linear-gradient(to bottom, rgba(255, 255,255, .5) calc(100% - 200px), rgba(154,205,50, .25) 100%);
}

.gloss abbr {
    display: inline-block;
    padding: 0 3px;
    border: 1px dotted gray;
    text-decoration: none;
    border-radius: 3px;
}

.control .masked, .control .unmasked {
    text-align: center;
    background: transparent;
    border: none;
    border-bottom: 2px solid yellowgreen;
    margin-right: 2px !important;
    font-size: inherit;
    font-family: inherit;
}

.control .unmasked {
    border-bottom: 2px solid gray;
}

.test-question p.control span.unmasked {
    color: #111;
    margin: 0;
}