body {
    //font-family: "Edu SA Beginner", serif;
    font-family: "Arial";
    //background-image: linear-gradient(#ffffff, #CFEBE2);
}

.tutorial {
    width: 100%;
    margin: auto;
    height: 100vh;
    overflow: auto;
    position: absolute;
    background: #fff;
    z-index: 1;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
}

.closeTutorial {
    cursor: pointer;
    font-size: 4em;
    position: absolute;
    left: 5px;
    top: 5px;
}

video {
    margin: auto;
    width: 800px;
    min-height: 435px;
    flex-grow: 0;
    flex-shrink: 1;
}

.icon {
    cursor: pointer;
    width: 2.5vmax;
    height: 2.5vmax;
    margin: 0.25vmax;
}

.param {
    text-align: center;
    width: 3em;
}

.taskControls {
    position: absolute;
    left: 5px;
    top: 5px;
}

.controls {
    font-size: 1.2em;
    text-align: center;
}

.controls input,
.controls button {
    font-size: 1em;
    margin: 0.2em;
}

.controls div {
    margin: 0.8em;
}

#scorecard {
    text-align: center;
    margin-bottom: 1em;
}

#taskInfo {
    position: absolute;
    right: 0.5em;
    top: 0.5em;
    text-align: center;
}

#taskData,
#expressionData {
    text-align: center;
    font-size: 2em;
    min-height: 2em;
}

.instruction {
    margin: 0.05em;
    font-size: 1em;
}

.instruction p {
    margin: 0.2em;
}

.instruction .qNumber {
    font-size: 0.6em;
}

.options button {
    font-family: "Edu SA Beginner", serif;
    color: #000;
    border: 1px solid #000;
    margin: 0.5em;
    padding: 0;
    font-size: 1em;
    width: 2.5em;
    height: 2.5em;
    text-align: center;
    cursor: pointer;
    background: #F6CD8D;
    border: 5px outset #D6AD6D;
}

.options button:hover {
    background: #E6BD7D;
}

.options button:disabled {
    background: #eeeeee;
    border: 1px solid #000;
    border: 5px outset #999;
}

div.scoreboard {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 750px;
    margin: auto;
}

div.scorePicture {
    flex-basis: 1;
    margin: 1em auto;
    border-left: 1px solid #000;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    width: 600px;
}

.dotLive {
    margin: 0.2em;
    height: 25px;
    width: 25px;
    background-color: #7ECBAC;
    border-radius: 50%;
    display: inline-block;
    animation: greenGlow 1500ms infinite;
}

.dotDead {
    margin: 0.2em;
    height: 25px;
    width: 25px;
    background-color: #ffffff;
    border-radius: 50%;
    display: inline-block;
}

.mark {
    display: inline-block;
    border-right: 1px solid #000;
    box-sizing: border-box;
    width: 60px;
    height: 60px;
}

.mark img {
    width: 100%;
    height: 100%;
}

#log {
    text-align: center;
    padding: 1em;
    display: none;
    z-index: 1;
    position: absolute;
    top: 2em;
    background: #fff;
    min-width: 50%;
    left: 25%;
    border: 1px solid #000;
    border-radius: 0.5em;
}

#log table {
    text-align: center;
    margin: 1em auto;
    font-size: 1.4em;
    border-collapse: collapse;
    background: #fff;
}

#log td,
#log th {
    padding: 0.25em;
    border: 1px solid #000;
    min-width: 2em;
}

.continueButton {
    font-family: "Edu SA Beginner", serif;
    color: #000;
    border: 1px solid #000;
    margin: 0.2em;
    padding: 0;
    font-size: 1.6em;
    width: 2em;
    height: 2em;
    text-align: center;
    cursor: pointer;
    animation: glowing 1500ms infinite;
}

.glowGreen {
    animation: greenGlow 1500ms infinite;
}

.glowRed {
    animation: redGlow 1500ms infinite;
}

.glow {
    animation: glowing 1500ms infinite;
}
.spin {
    animation: spinning 1500ms;
}

.red {
    background: #ffaaaa;
}

.red:hover {
    background: #ee9999;
}

.amber {
    background: #ffffaa;
}

.amber:hover {
    background: #eeee99;
}

.green {
    background: #B2E0CD;
}

.green:hover {
    background: #A2D0BD;
}

.blue {
    background: #aaaaff;
}

.blue:hover {
    background: #9999ee;
}

.original {
    background: #FFF8F0;
}

.original:hover {
    background: #eee7e0;
}

.grey {
    background: #eeeeee;
}

.grey:hover {
    background: #dddddd;
}

button:hover {
    cursor: pointer;
}

button {
    min-width: 1em;
    min-height: 1em;
}

@keyframes glowing {
    0% {
        box-shadow: 0 0 5px #F6CC8D;
    }

    50% {
        box-shadow: 0 0 20px #F6CC8D;
    }

    100% {
        box-shadow: 0 0 5px #F6CC8D;
    }
}

@keyframes spinning {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes greenGlow {

    0% {
        box-shadow: 0 0 5px #7ECBAC;
    }

    50% {
        box-shadow: 0 0 20px #7ECBAC;
    }

    100% {
        box-shadow: 0 0 5px #7ECBAC;
    }
}

@keyframes redGlow {
    0% {
        box-shadow: 0 0 5px #ffaaaa;
    }

    50% {
        box-shadow: 0 0 20px #ffaaaa;
    }

    100% {
        box-shadow: 0 0 5px #ffaaaa;
    }
}