/* Skin: "nokia" — the whole page wrapped in a Nokia 3310; you read it through
   the little green screen. No browser chrome — it's a phone. */
.skin-nokia { background: #20242b; }
.skin-nokia .winbar { display: none; }

.skin-nokia .winframe {
  position: relative; max-width: 360px; margin: 28px auto 46px; overflow: visible;
  background: linear-gradient(#54637f, #3c4a63 55%, #313e56);
  border: none; border-radius: 46px 46px 64px 64px / 72px 72px 96px 96px;
  padding: 54px 24px 104px;
  box-shadow: 0 18px 44px rgba(0,0,0,.6), inset 0 2px 5px rgba(255,255,255,.22), inset 0 -3px 8px rgba(0,0,0,.4);
}
/* earpiece slot + NOKIA wordmark */
.skin-nokia .winframe::before {
  content: "NOKIA"; display: block; text-align: center; color: #d2dbeb;
  font: bold 15px Arial, Helvetica, sans-serif; letter-spacing: 4px; padding-top: 14px;
  border-top: 5px solid rgba(0,0,0,.25); width: 60px; margin: -28px auto 16px;
}
/* keypad suggestion */
.skin-nokia .winframe::after {
  content: ""; position: absolute; left: 26px; right: 26px; bottom: 20px; height: 74px;
  border-radius: 8px 8px 42px 42px;
  background:
    radial-gradient(ellipse 70px 30px at 50% 20%, #c9d2e2 0 99%, transparent 100%),
    repeating-linear-gradient(90deg, #4a5870 0 28%, #3a4860 28% 33%);
  box-shadow: inset 0 1px 2px rgba(255,255,255,.2);
}

/* The green LCD screen */
.skin-nokia .viewport {
  background: #aeb84f; border: 3px solid #232b18; border-radius: 5px; padding: 9px;
  box-shadow: inset 0 1px 4px rgba(0,0,0,.45);
}
.skin-nokia .site { max-height: 330px; overflow-y: auto; font-family: "Courier New", monospace; color: #1d2a12; }

/* tiny status header */
.skin-nokia .masthead { padding: 0 0 6px; margin: 0 0 8px; border-bottom: 1px solid #717a35; }
.skin-nokia .brand { margin: 0; font: bold 14px "Courier New", monospace; color: #1d2a12; }
.skin-nokia .brand::before { content: "\1F4F6 "; }
.skin-nokia .brand::after { content: " \1F50B"; float: right; }
.skin-nokia .tag { margin: 3px 0 0; font: 11px "Courier New", monospace; color: #2c3a18; }
.skin-nokia .beta { display: none; }

.skin-nokia .content { font-size: 14px; line-height: 1.5; color: #1d2a12; }
.skin-nokia .content p { margin: 0 0 .8em; }
.skin-nokia .content h2 { font: bold 14px "Courier New", monospace; margin: 1em 0 .3em; text-transform: uppercase; }
.skin-nokia .content a, .skin-nokia .period-links a { color: #1d2a12; text-decoration: underline; font-weight: bold; }
.skin-nokia .period-links { font-size: 13px; margin: 0 0 8px; }
.skin-nokia .inline img, .skin-nokia .tile img { max-width: 100%; height: auto; display: block; filter: grayscale(1) contrast(1.5) brightness(1.1); border: 1px solid #232b18; }
.skin-nokia .period-gallery { display: block; }
.skin-nokia .period-foot { font: 10px "Courier New", monospace; color: #3a4a1e; border-top: 1px solid #717a35; margin-top: 8px; padding-top: 6px; }

/* scrollbar inside the screen */
.skin-nokia .site::-webkit-scrollbar { width: 6px; }
.skin-nokia .site::-webkit-scrollbar-thumb { background: #717a35; border-radius: 3px; }