@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:#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: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; */
}

#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:"2024"}
#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:2vw;
        width:11.5%;
        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;
    }     
}