html,body {
        margin: 0;
        padding: 0;
        overflow-x: hidden;
        height: 100%;
}

body {
        color: #bbb;
        background: #444;
        font-family: sans-serif;
}

h1 {
        font-family: 'Sarpanch', sans-serif;
        font-size: 32pt;
        border-bottom: 2px solid #f80;
        padding: 2.1em 1.5em 0.1em 1.5em;
        box-shadow: inset 0 0 60px 10px #111;
        margin: 0 -1em -1em -1em;
        position: relative;
        top: -2em;
}

h1>em {
        font-style: normal;
        color: #ddd;
}

h1>span {
        font-style: normal;
        color: #777;
}

.box {
        color: black;
        display: inline-block;
        padding: 1em;
        margin: 1.4em;
        box-shadow:6px 6px 10px 2px #111;
        border-radius: 0.5em;
}

.box:hover {
    cursor: pointer;
}

.pass {
        background: #77ee77;
        border: 2px solid #00dd00;
}

.fail {
        background: #ff8888;
        border: 2px solid #ff0000;
}

.active {
        -webkit-animation:active 1s linear infinite;
        animation:active 1s linear infinite;
}

@-webkit-keyframes active {
          0%{box-shadow:0 0 0 1px #444, 0 0 0  4px rgba(255, 255, 78, 0.7),6px 6px 10px 2px #111}
        100%{box-shadow:0 0 0 5px #444, 0 0 0 14px rgba(255, 255, 78, 0  ),6px 6px 10px 2px #111}
}

@keyframes active {
          0%{box-shadow:0 0 0 1px #444, 0 0 0  4px rgba(255, 255, 78, 0.7),6px 6px 10px 2px #111}
        100%{box-shadow:0 0 0 5px #444, 0 0 0 14px rgba(255, 255, 78, 0  ),6px 6px 10px 2px #111}
}

.visualisation {
        font-size: 90%;
        position: absolute;
        text-align: center;
        width: 100%;
        top: 45%;
}

.detail {
    background: #eee;
    color: black;
    display: inline-block;
    padding: 1em;
    border-radius: 0.5em;
    width: 50%;
}

.detail-contents {
    text-align: left;
}

.container {
    height: 85%;
}