:focus{outline:none}
a{color:inherit}
body{background:black url(/i/background-hor.jpg) no-repeat center center;background-size:cover;color:#333;font-family:Sans-serif;font-size:1.2vmax;margin:0;overflow:hidden}
body *{box-sizing:border-box}
body.canopy #navCenter #iconAngle{background-image:url(/i/angle.canopy.png)}
body.gauges #nav nav.gauge{opacity:1}
body.gauges #signal{opacity:.5}
body.inactive *{cursor:none!important}
body.info #info{display:initial}
body.score #nav #score{opacity:1}
body.settings #settings{display:initial}
body.speed #navCenter #iconAngle{background-image:url(/i/angle.speed.png)}
body.video footer{opacity:1;pointer-events:auto}
body.video video{display:block}
body.wingsuit #navCenter #iconAngle{background-image:url(/i/angle.wingsuit.png)}
footer{bottom:0;display:grid;grid-template-columns:1fr 64px 64px;height:64px;left:5px;opacity:0;pointer-events:none;position:absolute;right:5px;transition:500ms opacity;z-index:1}
footer #canopyRange{border-bottom:33px solid rgba(100, 200, 100, .5)}
footer #exitMarker:before{content:'exit'}
footer #fallRange{border-bottom:33px solid rgba(200, 100, 100, .5)}
footer #fullscreenButton{background-image:url(/i/fullscreen.png)}
footer #landingMarker:before{content:'landing'}
footer #openingMarker:before{content:'opening'}
footer #settingsButton{background-image:url(/i/settings.png)}
footer div.marker{background-color:white;border-radius:3px;bottom:12px;box-shadow:1px 0 #d32e2e, -1px 0 black;cursor:pointer;height:42px;left:-100px;margin-left:-7px;opacity:.8;position:absolute;width:12px;z-index:1}
footer div.marker:before{color:white;pointer-events:none;position:absolute;text-shadow:1px 0 #d32e2e, -1px 0 black;transform:rotate(-45deg) translate(10px, -10px);transform-origin:top left}
footer div.range{bottom:16px;color:white;pointer-events:none;position:absolute;text-align:center;text-shadow:1px 0 #d32e2e, -1px 0 black}
footer i{cursor:pointer;height:64px;width:64px}
footer progress{height:100%;width:100%}
html,body{height:100vh}
i{background-position:center center;background-repeat:no-repeat;background-size:contain;display:block;height:100%;margin:0 auto;width:100%}
video{display:none;height:100vh;inset:0;object-fit:cover;position:absolute;width:100vw}
#flySightPicker,#videoPicker{display:none}
#info{backdrop-filter:blur(5px);background-color:rgba(255, 255, 255, .5);border-radius:20px;display:none;font-size:1.2rem;left:50%;max-height:90%;max-width:750px;min-width:360px;overflow:auto;padding:15px 20px 10px;position:absolute;top:50%;transform:translate(-50%, -50%);transition:1s opacity;z-index:1}
#info h1{margin-top:0}
#info summary{cursor:pointer}
#modes #modeAuto{background-image:url(/i/mode.auto.png)}
#modes #modeAuto.active,body.wingsuit #modes #modeWingsuit,body.speed #modes #modeSpeed,body.canopy #modes #modeCanopy,#modes i:hover{background-color:rgba(50, 50, 200, .1);border:1px solid black;opacity:1}
#modes #modeCanopy{background-image:url(/i/mode.canopy.png)}
#modes #modeSpeed{background-image:url(/i/mode.speed.png)}
#modes #modeWingsuit{background-image:url(/i/mode.wingsuit.png)}
#modes i{background-size:auto;border:1px solid transparent;border-radius:5px;cursor:pointer;float:left;height:80px;margin:0 5px;opacity:.3;transition:250ms opacity;width:80px}
#nav{display:grid;grid-template-columns:1fr 30vmax 1fr}
#nav #score{opacity:0;padding-top:1.6vmax;transition:500ms opacity}
#nav .gauge{opacity:0;transition:500ms opacity}
#nav .unit{font-family:'Digital Numbers Regular', 'Courier New';font-size:2vmax;font-weight:bold;text-shadow:.02vmax .02vmax white}
#nav .unit.small{font-size:1vmax}
#nav nav{border-radius:100%;float:left;font-size:1.2vmax;height:9vmax;margin-top:1vmax;pointer-events:none;position:relative;text-align:center;width:9vmax;z-index:1}
#nav nav,#settings{background:radial-gradient(circle, rgba(255, 255, 255, .7) 0%, rgba(120, 120, 160, .5) 100%);border:1px solid black}
#navCenter #iconAlti{background-image:url(/i/alti.png)}
#navCenter #iconAlti,#navCenter #iconAltiHand{height:calc(9vmax - 2px);width:calc(9vmax - 2px)}
#navCenter #iconAltiHand{background-image:url(/i/hand.png)}
#navCenter #iconAngle,#navCenter #iconCompass{margin-top:.5vmax}
#navCenter #iconCompass{background-image:url(/i/compass.png)}
#navCenter #iconNorth{background-image:url(/i/north.png);height:1.5vmax;width:1.5vmax}
#navCenter i{height:90%;width:90%}
#navCenter nav{margin:1vmax .5vmax 0;padding-top:0}
#navCenter nav div{color:white;font-size:2vmax;font-weight:bold;margin-top:-5.5vmax;position:relative;text-shadow:1px 1px black;z-index:1}
#navLeft i.flysight{background-image:url(/i/flysight.png)}
#navLeft i.video{background-image:url(/i/video.png)}
#navLeft nav{margin-left:1vmax}
#navLeft nav.file{cursor:pointer;font-size:1vmax;padding-top:1vmax;pointer-events:auto}
#navLeft nav.file i{height:60%;left:2px;position:relative;width:60%}
#navLeft nav.file:hover i{background-image:url(/i/file.png)}
#navRight .right{padding-right:1vmax;text-align:right}
#navRight nav{float:right;margin-right:1vmax;padding-top:1.8vmax}
#qdev{background-image:url(/i/q-dev.png);bottom:.3vmax;height:71px;left:.6vmax;position:absolute;width:200px}
#settings{border-radius:10px;bottom:69px;display:none;padding:.5vmax;pointer-events:none;position:absolute;right:5px;z-index:2}
#settings #offset{border:0;border-radius:20px;font:inherit;font-size:14pt;margin:12px .3vmax 0 84px;padding:10px 0;text-align:center;width:200px}
#settings #resetColors{float:right}
#settings .range{width:100%}
#settings button,#settings input,#settings i{pointer-events:auto}
#settings header{font-weight:bold;margin:10px 0}
#signal{border:1px solid black;border-radius:100%;cursor:default;font-size:.8vmax;height:2vmax;opacity:0;padding-top:.6vmax;position:absolute;right:.2vmax;text-align:center;top:.2vmax;transition:250ms opacity;width:2vmax;z-index:1}
#signal.bad{background-color:red;color:white}
#signal.good{background-color:lime}
#signal.medium{background-color:orange}
@font-face{font-display:swap;font-family:'Digital Numbers Regular';font-style:normal;font-weight:normal;src:local('Digital Numbers Regular'), url('/DigitalNumbers.woff') format('woff')}
@media (max-width: 380px){
#nav{grid-template-columns:1fr 10vmax 1fr}}
@media (max-width: 600px){
#qdev{display:none}}
@media (orientation: portrait){
body{background-image:url(/i/background-ver.jpg)}}