/*
  LOFINERDS THEME
  Change the whole site's visual identity here.
*/

@font-face {
  font-family: "ronda";
  src: url("https://static.tumblr.com/rmj06l2/kcLlo1q2y/pf_ronda_seven.ttf");
}

@font-face {
  font-family: "pixel";
  src: url("https://dl.dropbox.com/s/kmhe7d3n18vdz5e/w95fa.woff?dl=0");
}

:root {

  /* =========================================
     STORM CLOUD
     ========================================= */

  --color-page-bg: #49627A;

  --color-surface: #F3F6F8;
  --color-surface-main: #E7EDF1;
  --color-surface-muted: #CAD5DD;

  --color-text: #1E2B35;
  --color-text-muted: #596B78;

  --color-accent: #3F607C;
  --color-accent-hover: #233E54;

  --color-border: #8499A9;
  --color-title-bg: #AABAC5;

  --color-nav-bg: #182A3A;
  --color-nav-text: #F3F6F8;

  --color-footer-bg: #233E54;
  --color-footer-text: #F3F6F8;

  --color-on-accent: #FFFFFF;

  /*
    Existing site.css uses this for the
    ticker divider and status indicator.
  */

  --color-signal: #607F96;


  /* =========================================
     BACKGROUND TEXTURE
     ========================================= */

  --page-background-image:
    linear-gradient(
      120deg,
      rgba(255,255,255,.10),
      rgba(73,98,122,.08) 55%,
      rgba(24,42,58,.14)
    ),
    repeating-linear-gradient(
      0deg,
      rgba(24,42,58,.035) 0,
      rgba(24,42,58,.035) 1px,
      transparent 1px,
      transparent 5px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.035) 0,
      rgba(255,255,255,.035) 1px,
      transparent 1px,
      transparent 96px
    );


  /* =========================================
     TYPOGRAPHY
     ========================================= */

  --font-body:
    "ronda",
    calibri,
    verdana,
    arial,
    sans-serif;

  --font-pixel:
    "pixel",
    arial,
    sans-serif;

  --font-ui:
    "Silkscreen",
    monospace;

  --font-size-body: 10px;
  --font-size-small: 9px;
  --font-size-title: 12px;
  --font-size-big-title: 18px;
  --font-size-welcome: 19px;

  --line-height-body: 13px;


  /* =========================================
     LAYOUT
     ========================================= */

  --site-width: 760px;
  --sidebar-width: 210px;

  --page-radius: 10px;
  --control-radius: 5px;

  --border-thin: 1px;
  --border-window: 2px;

  --window-shadow:
    3px 3px 0 rgba(24,42,58,.18);
}