@font-face {
  font-family: OpenSans;
  src: url(assets/OpenSansRegular.ttf);
}
@font-face {
  font-family: Reuben;
  src: url(assets/Reuben.otf);
}

html {
    width:100%;
    background-color: #eee;
    font-family: sans-serif;
}
body {
    width:100%;
    margin:0px;
    padding:0px;
    margin-bottom: 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:#111;
    box-shadow:0px 10px 20px rgba(0,0,0,.2)
}
header h1 {display:none;}

#zim {
    width:100%;
    text-align:center;  
    margin-bottom:1.5vmin;              
}
#zimCanvas {
    width:100% !important;
    height:20vmin !important; 
    max-height:175px;               
}
#zimnav {
    margin-top:0vh;
    margin-bottom:0vh;
    text-align:center;
    color:#ccc;
    font-size:2.5vmin;
}
#zimnav h2 {display:none;}
#zimnav a {
    color:#bbb;
    background-color:#333;
    font-family: OpenSans;
    margin:0vw .35vw;
    /* font-size:20px; */
    border-radius:0px 1.5vw;
    font-size:2vmin;
    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;
}
#code {
    color:#50c4b7 !important;
}
#docs {
    color:#e472c4 !important;
}
#code2 {
    color:#50c4b7 !important;
}
#docs2 {
    color:#e472c4 !important;
}

#titlebar {
    display:block;
    background-color:#fff;
    background-image: url("../devs/stripes.jpg");
    padding:.8vmin;
    margin:4vmin 20px 3vmin 20px;
    font-size:36px;
    border-top:thin solid #ccc;
    border-bottom:thin solid #ccc;
    color:#777;
    font-family:Reuben;
}


/* 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;
}
#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:0px;
}
#copyyear:before {content:"2023"}
#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:1.0em;
      width:11.5%;
      border-radius:0px !important;
      border-right:thin solid #aaa;
  }     
  
  #devs {        
      border-right:none !important;
  }  
                      
  #examples {
      width:17.6% !important; 
  }
}