html,body{
    border:none; padding:0; margin:0;
    background:#000000;
    color:#ffffff;
}
body{
    text-align:center;
    font-family: monospace;
}
h1{
    font-size: 48px;
    color:#ffffff;
}
.redaction { display: inline-block; font-family: 'Redaction', sans-serif; }
.redaction10 { display: inline-block; font-family: 'Redaction 10', sans-serif; }
.redaction20 { display: inline-block; font-family: 'Redaction 20', sans-serif; }
.redaction35 { display: inline-block; font-family: 'Redaction 35', sans-serif; }
.redaction50 { display: inline-block; font-family: 'Redaction 50', sans-serif; }
.redaction70 { display: inline-block; font-family: 'Redaction 70', sans-serif; }
.redaction100 { display: inline-block; font-family: 'Redaction 100', sans-serif; }

#progress {
    background: blue;
    opacity: 0;
    height: 5px;
    transition: width 0.2s;
}

a {
    color:rgb(59, 150, 255)
}

#startStopBtn{
    display:inline-block;
    margin:0 auto;
    color:#ffff;
    font-weight: bold;
    background-color:rgb(59, 150, 255);
    border:3px solid gray;
    animation-delay: 1s;
    -webkit-animation-name: buttonflash; /* Chrome, Safari, Opera */
    -webkit-animation-duration: .15s; /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: 2; /* Chrome, Safari, Opera */
    animation-name: buttonflash;
    animation-duration: .15s;
    animation-iteration-count: 2;
    border-radius:0.3em;
    transition:all 0.3s;
    box-sizing:border-box;
    width:8em; height:3em;
    line-height:2.7em;
    cursor:pointer;
    box-shadow: 0 0 0 rgba(0,0,0,0.1), inset 0 0 0 rgba(0,0,0,0.1);
}
#startStopBtn:hover{
    box-shadow: 0 0 2em rgba(0,0,0,0.1), inset 0 0 1em rgba(0,0,0,0.1);
}
#startStopBtn.running{
    background-color:#FF3030;
    border-color:#FF6060;
    color:#FFFFFF;
}
#startStopBtn:before{
    content:"Start";
}
#startStopBtn.running:before{
    content:"Abort";
}

#container {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
}

#testWrapper {
    background: rgba(32,32,32,0.6);
    max-width: 800px;
    margin: 0px auto; 
}

#test{
    margin-top:2em;
    margin-bottom:2em;
}

div.testArea{
    display:inline-block;
    width:16em;
    height:12.5em;
    position:relative;
    box-sizing:border-box;
    margin: 1em;
}
div.testArea2{
    display:inline-block;
    width:14em;
    height:7em;
    position:relative;
    box-sizing:border-box;
    text-align:center;
    margin: 1em;
}
div.testArea div.testName{
    position:absolute;
    top:0.1em; left:0;
    width:100%;
    font-size:1.4em;
    z-index:9;
}
div.testArea2 div.testName{
    display:block;
    text-align:center;
    font-size:1.4em;
}
div.testArea div.meterText{
    position:absolute;
    bottom:1.55em; left:0;
    width:100%;
    font-size:2.5em;
    z-index:9;
}
div.testArea2 div.meterText{
    display:inline-block;
    font-size:2.5em;
}
div.meterText:empty:before{
    content:"0.00";
}
div.testArea div.unit{
    position:absolute;
    bottom:2em; left:0;
    width:100%;
    z-index:9;
}
div.testArea2 div.unit{
    display:inline-block;
}
div.testArea canvas{
    position:absolute;
    top:0; left:0; width:100%; height:100%;
    z-index:1;
}
div.testGroup{
    display:block;
    margin: 0 auto;
}
#shareArea{
    width:95%;
    max-width:40em;
    margin:0 auto;
    margin-top:2em;
}
#shareArea > *{
    display:block;
    width:100%;
    height:auto;
    margin: 0.25em 0;
}
#privacyPolicy{
    position:fixed;
    top:2em;
    bottom:2em;
    left:2em;
    right:2em;
    overflow-y:auto;
    width:auto;
    height:auto;
    box-shadow:0 0 3em 1em #000000;
    z-index:999999;
    text-align:left;
    background-color:#252525;
    padding:1em;
}
a.privacy{
    text-align:center;
    font-size:0.8em;
    color:#808080;
    padding: 0 3em;
}
div.closePrivacyPolicy {
    width: 100%;
    text-align: center;
}
div.closePrivacyPolicy a.privacy {
    padding: 1em 3em;
}

#ipArea {
    font-family: monospace;
    height: 20px;
}

#sanic-container {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}
#sanic {
display: block;
width: 215px;
height: 215px;
position: absolute;
-webkit-animation: moveX 3.05s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate, spin 3.4s linear 0s infinite alternate;
-moz-animation: moveX 3.05s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate, spin 3.4s linear 0s infinite alternate;
-o-animation: moveX 3.05s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate, spin 3.4s linear 0s infinite alternate;
animation: moveX 3.05s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate, spin 3.4s linear 0s infinite alternate;
}

#rank {
    display: none;
    height: 128px;
    width: 128px;
    position: absolute;
    margin-top: -64px;
    left: 50%;
    transform: translate(-50%, 0);
    background: url('award-olivebranch-rank.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    padding-top: 32px;
    box-sizing: border-box;
    font-size: 48px;
}

#ranktext {
    position: absolute;
    height: 128px;
    width: 128px;
    margin: auto;
    top: 50%;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 4;
    font-weight: bolder;
}

#fireworks {
    position: absolute;
    height: 256px;
    width: 256px;
    top: -64px;
    left: -64px;
    pointer-events: none;
    z-index: 3;
    opacity: 0;
}

.jitter {
    animation: jitter 0.1s 3 linear;
    animation-delay: 1s;
}
.font-scale {
    animation: font-scale 1s linear;
}
.opacity {
    animation: opacity 3.2s linear;
    animation-delay: 1s;
}

@-webkit-keyframes moveX {
from { left: 0; } to { left: calc(100% - 215px); }
}
@-moz-keyframes moveX {
from { left: 0; } to { left: calc(100% - 215px); }
}
@-o-keyframes moveX {
from { left: 0; } to { left: calc(100% - 215px); }
}
@keyframes moveX {
from { left: 0; } to { left: calc(100% - 215px); }
}
@-webkit-keyframes moveY {
from { top: 0; } to { top: calc(100% - 215px); }
}
@-moz-keyframes moveY {
from { top: 0; } to { top: calc(100% - 215px); }
}
@-o-keyframes moveY {
from { top: 0; } to { top: calc(100% - 215px); }
}
@keyframes moveY {
from { top: 0; } to { top: calc(100% - 215px); }
}
@-webkit-keyframes spin {
from { transform: rotate(0) } to { transform: rotate(360deg); }
}
@-moz-keyframes spin {
from { transform: rotate(0) } to { transform: rotate(360deg); }
}
@-o-keyframes spin {
from { transform: rotate(0) } to { transform: rotate(360deg); }
}
@keyframes spin {
from { transform: rotate(0) } to { transform: rotate(360deg); }
}

@-webkit-keyframes jitter { 0% { margin-top: -64px; } 50% { margin-top: -62px; } 100% { margin-top: -64px; } }
@-moz-keyframes jitter { 0% { margin-top: -64px; } 50% { margin-top: -62px; } 100% { margin-top: -64px; } }
@-o-keyframes jitter { 0% { margin-top: -64px; } 50% { margin-top: -62px; } 100% { margin-top: -64px; } }
@keyframes jitter { 0% { margin-top: -64px; } 50% { margin-top: -62px; } 100% { margin-top: -64px; } }

@keyframes font-scale { 0% { font-size: 86px; } 100% { font-size: 48px; } }
@keyframes opacity { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }


@keyframes buttonflash {
    0%   {border:3px solid gray;}
    50%  {border:3px solid #fff;}
    100% {border:3px solid gray;}
}

@media all and (max-width:40em){
    body{
        font-size:0.8em;
    }
}