.project-hero-image img {
    height: 150px;
    width: 150px;;
  }

  .project-hero-image figcaption {
    font-size: 0.8em;
    color: #666;
    margin-top: 0.5em;
  }

  figure {
    float: left;
  }

  article {
    padding-top: 1em;
  }
/**
 * This the the global CSS file.
 * 
 * With WebC you can add <style> tags to any template and have them scoped
 * This is for more global styles.
 * 
 */

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px;
  z-index: 100;
}

.skip-link:focus {
  top: 0;
}

/* Defaults */
:root {
    --font-family: 'Courier New', Courier, monospace;
    --font-family-monospace: 'Courier New', Courier, monospace;
}

/* Theme colors */
:root {
    --background-color: #c0c0c0;
    --text-color: #000000;
    --text-color-link: #0000ff;
    --text-color-link-active: #ff0000;
    --text-color-link-visited: #800080;
    --border-color: #000000;
    --header-background: #808080;
    --header-text: #000000;
    --syntax-tab-size: 2;
}

@media (prefers-color-scheme: dark) {
    :root {
        --background-color: #00001a;
        --text-color: #00ffff;
        --text-color-link: #ffff00;
        --text-color-link-active: #ff00ff;
        --text-color-link-visited: #ffa500;
        --border-color: #00ffff;
        --header-background: #000033;
        --header-text: #00ffff;
    }
}


/* Global stylesheet */
* {
    box-sizing: border-box;
}

html,
body {
    padding: 0;
    margin: 0 auto;
    font-family: var(--font-family);
    color: var(--text-color);
    background-color: var(--background-color);
}

html {
    overflow-y: scroll;
}

body {
    border: 0;
    padding: 0;
    margin: 0;
}

@media (min-width: 40em) { /* ~640px */
    body {
        max-width: 50em;
        border: 5px solid var(--border-color);
        padding: 1rem;
        margin: 1rem auto;
        box-shadow: 5px 5px 0px var(--border-color);
    }
}

/* https://www.a11yproject.com/posts/how-to-hide-content/ */
.visually-hidden {
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

p:last-child {
    margin-bottom: 0;
}

p {
    line-height: 1.5;
}

li {
    line-height: 1.5;
}

a[href] {
    color: var(--text-color-link);
    text-decoration: underline;
}

a[href]:visited {
    color: var(--text-color-link-visited);
}

a[href]:hover,
a[href]:active {
    color: var(--text-color-link-active);
    background-color: var(--text-color);
    color: var(--background-color);
}

main {
    padding: 1rem;
    border: 2px dashed var(--border-color);
    margin: 1rem;
}

main :first-child {
    margin-top: 0;
}

.links-nextprev {
    list-style: none;
    border-top: 1px dashed var(--border-color);
    padding: 1em 0;
}

table {
    margin: 1em 0;
    width: 100%;
    border: 2px solid var(--border-color);
    border-collapse: collapse;
}

table td,
table th {
    padding: 0.5em;
    border: 1px solid var(--border-color);
}

table th {
    background-color: var(--header-background);
    color: var(--header-text);
}

pre,
code {
    font-family: var(--font-family-monospace);
    background-color: #333;
    color: #eee;
    padding: 0.2em 0.4em;
    border-radius: 3px;
    border: 1px solid var(--border-color);
}

pre {
    padding: 1em;
    overflow-x: auto;
}

/* Nav */
.nav {
    display: flex;
    justify-content: center;
    padding: 0;
    margin: 1rem 1rem 0 1rem;
    list-style: none;
    border: 2px solid var(--border-color);
    background-color: var(--header-background);
}

.nav-item {
    margin: 0;
}

.nav-item a {
    display: block;
    padding: 0.5em 1em;
    color: var(--header-text);
    text-decoration: none;
    border-right: 2px solid var(--border-color);
}

.nav-item:last-child a {
    border-right: none;
}

.nav-item a:hover,
.nav-item a[aria-current="page"] {
    background-color: var(--text-color-link);
    color: var(--background-color);
}

/* Posts list */
.postlist {
    list-style: none;
    padding: 0;
}

.postlist-item {
    margin-bottom: 1.5em;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 1em;
}

.postlist-date {
    font-size: 0.9em;
    color: var(--text-color);
    opacity: 0.8;
}

.postlist-link {
    font-size: 1.5em;
    font-weight: bold;
    display: block;
    margin-top: 0.5em;
}

/* Tags */
.post-tag {
    display: inline-block;
    background-color: var(--header-background);
    color: var(--header-text);
    padding: 0.2em 0.5em;
    border-radius: 5px;
    font-size: 0.8em;
    text-transform: uppercase;
    margin-right: 0.5em;
}

/* Direct Links / Markdown Headers */
.header-anchor {
    text-decoration: none;
    font-style: normal;
    font-size: 1em;
    margin-left: .1em;
}

a[href].header-anchor,
a[href].header-anchor:visited {
    color: transparent;
}

a[href].header-anchor:focus,
a[href].header-anchor:hover {
    text-decoration: underline;
}

a[href].header-anchor:focus,
:hover>a[href].header-anchor {
    color: var(--text-color-link);
}

h1, h2, h3, h4, h5, h6 {
  border-bottom: 2px solid var(--border-color);
  padding-bottom: 0.3em;
  margin-top: 1.5em;
}

@media (max-width: 40em) {
    header h1 {
        font-size: 1.8rem;
    }
    .nav {
        flex-direction: column;
        align-items: stretch;
        margin: 1rem 1rem 0 1rem;
    }
    .nav-item a {
        border-right: none;
        border-bottom: 2px solid var(--border-color);
        text-align: center;
    }
    .nav-item:last-child a {
        border-bottom: none;
    }
    main {
        margin: 1rem;
    }
}
.w3rvu5y8v header{display:flex;gap:1em .5em;flex-wrap:wrap;align-items:center;border:2px solid var(--border-color);background-color:var(--header-background);color:var(--header-text);padding:1rem;text-align:center}.w3rvu5y8v header:after{content:"";display:table;clear:both}.w3rvu5y8v h1{margin:0;font-size:2.5rem;text-transform:uppercase;letter-spacing:0.2em}.w3rvu5y8v h1 img{vertical-align:middle}.w3rvu5y8v a.hero-image{display:inline-block;vertical-align:middle;margin-right:0.5em;text-decoration:none}.w3rvu5y8v .feedicon img{width:2em;height:2em;position:absolute;top:1em;right:1em}
.wzt3ehjcu ul{list-style:none;padding:0;text-align:center}.wzt3ehjcu ul>li{display:inline-block}.wzt3ehjcu ul>li>a{display:inline-block;padding:1rem}.wzt3ehjcu p{margin:1rem auto;max-width:30rem;font-size:0.9rem;line-height:1.5;text-align:center}.wzt3ehjcu p img{width:1rem;height:1rem;margin-left:0.5rem;vertical-align:text-bottom}.wzt3ehjcu .greenweb-wrapper{display:flex;justify-content:center;align-items:center;margin-top:4rem}