html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:#0a1226;
  font-family:Roboto,"Helvetica Neue",Arial,sans-serif;color:#fff;
  -webkit-user-select:none;user-select:none;cursor:none}
#stage{position:absolute;left:0;top:0;width:960px;height:600px;overflow:hidden;
  -webkit-transform-origin:0 0;transform-origin:0 0}
.layer{position:absolute;left:0;top:0;width:960px;height:600px}
#bgA,#bgB{-webkit-transition:opacity 3s linear;transition:opacity 3s linear}
#bgB{opacity:0}
#scrim{background:linear-gradient(to bottom,rgba(0,0,0,.10) 0%,rgba(0,0,0,.10) 40%,rgba(0,0,0,.26) 100%)}
#flash{background:#dfe8ff;opacity:0;-webkit-transition:opacity .5s ease-out;transition:opacity .5s ease-out}
canvas.layer{pointer-events:none}

/* revontulet */
#aurora{opacity:0;-webkit-transition:opacity 4s linear;transition:opacity 4s linear}
.au{position:absolute;display:block;border-radius:50%;
  -webkit-animation:auDrift 26s ease-in-out infinite alternate;animation:auDrift 26s ease-in-out infinite alternate}
.a1{left:-80px;top:20px;width:760px;height:220px;
  background:radial-gradient(ellipse at center,rgba(90,255,170,.55) 0%,rgba(90,255,170,0) 70%)}
.a2{left:260px;top:60px;width:700px;height:200px;-webkit-animation-duration:34s;animation-duration:34s;-webkit-animation-delay:-9s;animation-delay:-9s;
  background:radial-gradient(ellipse at center,rgba(60,210,230,.45) 0%,rgba(60,210,230,0) 70%)}
.a3{left:120px;top:0;width:620px;height:170px;-webkit-animation-duration:41s;animation-duration:41s;-webkit-animation-delay:-17s;animation-delay:-17s;
  background:radial-gradient(ellipse at center,rgba(170,110,255,.38) 0%,rgba(170,110,255,0) 70%)}
@-webkit-keyframes auDrift{from{-webkit-transform:translateX(-60px) scaleY(.8);transform:translateX(-60px) scaleY(.8);opacity:.55}
  to{-webkit-transform:translateX(90px) scaleY(1.25);transform:translateX(90px) scaleY(1.25);opacity:1}}
@keyframes auDrift{from{transform:translateX(-60px) scaleY(.8);opacity:.55}
  to{transform:translateX(90px) scaleY(1.25);opacity:1}}

/* tähdet */
#stars{opacity:0;-webkit-transition:opacity 4s linear;transition:opacity 4s linear}

/* kuu ja aurinko */
#moon,#sun{position:absolute;border-radius:50%;opacity:0;-webkit-transition:opacity 4s linear;transition:opacity 4s linear}
#moon{left:482px;top:46px;width:54px;height:54px;
  background:radial-gradient(circle at 38% 38%,#fffbe6 0%,#f1ebc4 60%,#d9d2a4 100%);
  box-shadow:0 0 30px 8px rgba(255,248,210,.35)}
#sun{left:470px;top:34px;width:78px;height:78px;
  background:radial-gradient(circle,rgba(255,236,160,1) 0%,rgba(255,220,120,.9) 38%,rgba(255,200,90,0) 72%)}

/* pilvet */
#clouds{opacity:0;-webkit-transition:opacity 4s linear;transition:opacity 4s linear}
.cloud{position:absolute;display:block;will-change:transform;
  background:radial-gradient(ellipse closest-side,rgba(var(--cc,200,208,218),.95) 0%,rgba(var(--cc,200,208,218),.55) 55%,rgba(var(--cc,200,208,218),0) 100%);
  -webkit-animation:drift 160s linear infinite;animation:drift 160s linear infinite}
@-webkit-keyframes drift{from{-webkit-transform:translateX(-420px);transform:translateX(-420px)}
  to{-webkit-transform:translateX(1100px);transform:translateX(1100px)}}
@keyframes drift{from{transform:translateX(-420px)}to{transform:translateX(1100px)}}
#fogbank{opacity:0;-webkit-transition:opacity 4s linear;transition:opacity 4s linear;
  background:linear-gradient(to top,rgba(220,226,232,.75) 0%,rgba(220,226,232,.35) 45%,rgba(220,226,232,0) 80%)}

/* tekstit */
#left,#weather,#forecast,#events,#status{position:absolute;text-shadow:0 2px 14px rgba(0,0,0,.35)}
#left{left:40px;top:28px;width:480px}
#greeting{font-size:26px;font-weight:400;opacity:.92;letter-spacing:.5px}
#clock{font-size:172px;font-weight:200;line-height:1.02;margin-left:-6px;letter-spacing:-2px}
#date{font-size:30px;font-weight:300;margin-top:2px}
#sunline{font-size:18px;font-weight:300;opacity:.75;margin-top:14px}

#weather{left:580px;top:30px;width:340px;text-align:right}
#wicon{position:absolute;left:0;top:0;width:104px;height:104px}
#wicon svg{width:104px;height:104px;display:block}
#wtemp{font-size:92px;font-weight:200;line-height:1;margin-top:-4px}
#wdesc{font-size:28px;font-weight:300;margin-top:6px}
#wmeta{font-size:19px;font-weight:300;opacity:.85;margin-top:6px}
#wtip{font-size:18px;font-weight:300;font-style:italic;opacity:.9;margin-top:10px;min-height:22px}

#forecast{left:40px;top:410px;width:480px;height:150px}
.fc{display:block;float:left;width:148px;height:132px;margin-right:12px;box-sizing:border-box;padding:12px 8px 8px;text-align:center;
  background:rgba(8,16,34,.30);border:1px solid rgba(255,255,255,.12);border-radius:18px}
.fc .fd{font-size:17px;font-weight:400;opacity:.9;text-transform:lowercase}
.fc .fi{height:46px;margin:6px 0 2px}
.fc .fi svg{width:46px;height:46px}
.fc .ft{font-size:20px;font-weight:300}
.fc .ft b{font-weight:500}.fc .ft span{opacity:.6}

#events{left:560px;top:318px;width:360px;height:242px;box-sizing:border-box;padding:16px 20px;
  background:rgba(8,16,34,.34);border:1px solid rgba(255,255,255,.14);border-radius:22px}
#evtitle{font-size:19px;font-weight:400;text-transform:uppercase;letter-spacing:2.5px;opacity:.8;margin-bottom:10px}
.ev{display:block;margin-bottom:11px;overflow:hidden;white-space:nowrap}
.ev .et{display:inline-block;width:76px;font-size:19px;font-weight:400;vertical-align:top;padding-top:1px}
.ev .en{display:inline-block;width:244px;font-size:20px;font-weight:300;overflow:hidden;text-overflow:ellipsis;vertical-align:top}
.ev.past{opacity:.45}
.ev.now .et{color:var(--accent,#f2a65a)}
#forecast i,#evlist i{font-style:normal}
#evlist .none{font-size:22px;font-weight:300;opacity:.7;margin-top:36px;text-align:center}
#evlist .demo{font-size:13px;opacity:.5;margin-top:4px;letter-spacing:1px}

#status{left:0;width:960px;top:578px;text-align:center;font-size:12px;opacity:.5;text-shadow:none}
#status.warn{color:#ffd28a;opacity:.85}

/* sääkuvakkeet */
.ray{-webkit-animation:spin 50s linear infinite;animation:spin 50s linear infinite;-webkit-transform-origin:32px 32px;transform-origin:32px 32px}
@-webkit-keyframes spin{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}
@keyframes spin{to{transform:rotate(360deg)}}
.drop{-webkit-animation:fall 1.1s linear infinite;animation:fall 1.1s linear infinite}
.drop.d2{-webkit-animation-delay:-.37s;animation-delay:-.37s}.drop.d3{-webkit-animation-delay:-.74s;animation-delay:-.74s}
@-webkit-keyframes fall{0%{-webkit-transform:translateY(-6px);transform:translateY(-6px);opacity:0}30%{opacity:1}100%{-webkit-transform:translateY(10px);transform:translateY(10px);opacity:0}}
@keyframes fall{0%{transform:translateY(-6px);opacity:0}30%{opacity:1}100%{transform:translateY(10px);opacity:0}}
.flake{-webkit-animation:snowfall 2.2s linear infinite;animation:snowfall 2.2s linear infinite}
.flake.d2{-webkit-animation-delay:-.7s;animation-delay:-.7s}.flake.d3{-webkit-animation-delay:-1.4s;animation-delay:-1.4s}
@-webkit-keyframes snowfall{0%{-webkit-transform:translate(-2px,-6px);transform:translate(-2px,-6px);opacity:0}30%{opacity:1}100%{-webkit-transform:translate(3px,10px);transform:translate(3px,10px);opacity:0}}
@keyframes snowfall{0%{transform:translate(-2px,-6px);opacity:0}30%{opacity:1}100%{transform:translate(3px,10px);opacity:0}}
.bolt{-webkit-animation:bolt 4s linear infinite;animation:bolt 4s linear infinite}
@-webkit-keyframes bolt{0%,60%,100%{opacity:.35}64%,70%{opacity:1}67%{opacity:.5}}
@keyframes bolt{0%,60%,100%{opacity:.35}64%,70%{opacity:1}67%{opacity:.5}}
.cdrift{-webkit-animation:cdrift 9s ease-in-out infinite alternate;animation:cdrift 9s ease-in-out infinite alternate}
@-webkit-keyframes cdrift{from{-webkit-transform:translateX(-2px);transform:translateX(-2px)}to{-webkit-transform:translateX(3px);transform:translateX(3px)}}
@keyframes cdrift{from{transform:translateX(-2px)}to{transform:translateX(3px)}}

/* junakortti */
.ev.tr .et{width:64px}
.ev.tr .et.late{color:var(--accent,#f2a65a)}
.ev.tr .en{width:172px}
.ev.tr .tm{display:inline-block;width:78px;text-align:right;font-size:17px;font-weight:300;opacity:.8;vertical-align:top;padding-top:2px}
.ev.tr .ln{display:inline-block;width:24px;height:24px;line-height:24px;margin-right:10px;text-align:center;font-size:15px;font-weight:500;
  border:1.5px solid rgba(255,255,255,.7);border-radius:50%;vertical-align:1px;box-sizing:border-box;line-height:21px}
.ev.cx{opacity:.5;text-decoration:line-through}