@font-face {
    font-family: OpenSans;
    src: url(/014/assets/OpenSansRegular.ttf);
  }
  @font-face {
    font-family: Reuben;
    src: url(assets/Reuben.otf);
  }
  
  @font-face {
      font-family:"acier-bat-outline";
      src:url("https://use.typekit.net/af/72ab66/00000000000000007735dfb2/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/72ab66/00000000000000007735dfb2/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/72ab66/00000000000000007735dfb2/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
      font-display:auto;font-style:normal;font-weight:400;font-stretch:normal;
      }
  
  html {
      width:100%;
      background-color: #111;
      font-family: sans-serif;
  }
  body {
      background-color: black;
      width:100%;
      margin:0px;
      padding:0px;
  }
  
  a {
      text-decoration: none;
      outline: none;
  }
  img {
      background: transparent;
      color: rgba(0,0,0,0);
  }
  
  /* ZIM HEADER */
  
  header {
      margin-top:0px;
      padding:2vmin 0px 1.5vmin 0px;
      margin-bottom:0px;
      position:relative;
      width:100%;
      display:inline-block;
      text-align:center;
      vertical-align: bottom;
      background-color:#000;
      box-shadow:0px 10px 20px rgba(0,0,0,.2)
  }
  header h1 {display:none;}
  
  #zim {
      width:100%;
      text-align:center;  
      height:30vmin !important; 
      max-height:200px;            
      margin-bottom:1.5vmin;              
  }
  #zimCanvas {
      width:100% !important;
      height:30vmin !important; 
      max-height:200px;               
  }
  #zimnav {
      margin-top:-.5vh;
      margin-bottom:-.5vh;
      text-align:center;
      color:#ccc;
      font-size:2.5vmin;
      padding:0px;
  }
  #zimnav h2 {display:none;}
  #zimnav a {
      color:#bbb;
      font-family: OpenSans;
      margin:0px .35vw;
      font-size:20px;    
      padding:.2vw 1.5vw;
      display:inline-block;
      text-transform: uppercase;
      text-decoration:none;
  }
  #zimnav a:hover {
      background-color:white;
      color:#333;
  }
  #editor {
      padding-left:1.1vw; 
      padding-right:1.1vw;
  }
  #goldLink {
      border-radius: 5px;
      color: #ebc800 !important;
  }
  #goldLink:hover {
      color: #222 !important;
      background-color: #ffd700 !important;
  }
  #code {
      /* color:#50c4b7 !important; */
  }
  #docs {
      /* color:#e472c4 !important; */
  }
  #code2 {
      /* color:#50c4b7 !important; */
  }
  #docs2 {
      /* color:#e472c4 !important; */
  }
  
  .outer016 {
      margin:0px;
      padding:0px;
      background-image: linear-gradient(#123, #111) !important;
  }
  
  #titlebar {
      display:block;
      /* background-color:#fff;
      background-image: url("../devs/stripes.jpg"); */
      padding:.8vmin;
      margin:3vmin 20px 3vmin 20px;
      font-size:50px;
      /* border-top:thin solid #ccc;
      border-bottom:thin solid #ccc; */
      color:#61b1e0;
      font-family:acier-bat-outline;
  }
  
  .blue {
      background-color: #123 !important;
  }
  
  
  /* ZIM FOOTER */
  
  footer {
      background-color:#111;
      position:relative;
      text-align: center;
      margin:0px;
      margin-top:2em;
      padding-top:2.5em;
      padding-bottom:0em;
  }
  footer #socialmedia {
      width:100%;
      text-align:center;
      margin-bottom:2em;
  }
  footer #socialmedia img {
      width:8%;
      max-width:3.5em;
      margin-bottom:.5em;
      opacity: .7;
      filter: alpha(opacity=70);
  }
  footer #socialmedia img:hover {
      opacity: 1;
      filter: alpha(opacity=100);
  }
  footer h2 {
      display:none;
  }
  footer h3 {
      font-family: OpenSans;
      font-size:20px;
      color:#aaa;
      font-weight:normal;
      margin-bottom:4vh;
      margin-left:.5vw;
      margin-right:.5vw;
  }
  #zimfooternav {
      margin-top:0px;
      margin-bottom:4vh;
  }
  #zimfooternav a {
      background-color: #ebcb35;
      border:none;
      font-family:OpenSans;
      font-size:2.2vmin;
      margin:.2vw;
      padding:.18vw 1.5vw;
      color:#444;
      margin-right:.7vw;
      border-radius:3px;
      text-transform:uppercase;
  }
  #zimfooternav a:hover {
      background-color:#acd241;
      color:#333;
  }
  #footerlogo {
      margin-top:-1.8em;
      margin-bottom:.8em;
      width:14vmin;
      max-width:125px;
  }
  
  #copy {
      text-align:center;
      color:#50c4b7;
      background-color:#222;
      padding:10px;
      margin-bottom:20px;
  }
  #copyyear:before {content:"2025"}
  #copy a {
      color:#acd241
  }
  #copy a:hover {
      color:#e472c4
  }
  
  @media all and (max-width: 640px){
      /* these styles show if screen width is less than or equal to 640 */             
      #zimnav {
          width:100% !important;
          white-space:nowrap;
          overflow:hidden;
      }  
      #zimnav a {
          margin:0px;
          padding:1vw 0px;
          font-size:2.5vw;
          width:14%;
          border-radius:0px !important;
      }     
      #zimfooternav a {
          font-size:2.5vmin;
      }
      #devs {        
          border-right:none !important;
      }                       
      #examples {
          width:17.6% !important; 
      }
      footer #socialmedia img {
          width:6.5%;
      }
  }
  
  @media all and (min-width: 640px) and (max-width: 900px) {
      /* these styles show if screen width is between 640 and 900 */             
      #zimnav a {
          font-size:2vw;
      }     
  }