@media only screen and (max-width: 960px) {
    body { font-size: 0.9em; }
    header { margin: 0; }
    header div#gravatar img { margin: 1em; height: 80px; width: 80px; }
    header div#title h1 { font-size: 1.9em; }
    header div#title blockquote { font-size: 0.9em; }

    #articles { display:grid; grid-template-columns: 1fr; }

    h2 { font-size: 1.4em; }
    h3 { font-size: 1.4em; }
    h4 { font-size: 1.4em; }
    h5 { font-size: 1.4em; }
    h6 { font-size: 1.4em; }

    article.gridwide { grid-column: span 1; }
    article.gridhigh { grid-row: span 1; }
    
    .box {
        font-size:1em;
        margin:0.5em;
        margin-bottom: 2em;
    }

    nav { margin: 0.25em; padding: 0; }
    nav a {
        display: block;
        top: 0;
        padding: 0.25em;
        margin: 0;
        margin-bottom: 0.5em;
        text-align: center;
        box-shadow: var(--box-shadow-simple);
        border-radius: 0;
    }
    
    div#content { grid-template-columns: 1fr; }
    div#articles { margin: 0.5em; }
    .box .info {
        position:absolute;
        margin: 0;
        margin-left:auto;
        margin-right:auto;
        margin-top: 2em;
        text-align: center;
    }

    article figure { display:none; }

    #sidebar { margin: 1em; }
}

@media only screen and (max-width: 480px) {
    body { font-size: 0.9em; }
    header { margin: 0; }
    header div#gravatar img { margin: 0.75em; border-radius: 0; height: 80px; width: 80px; }
    header div#title h1 { font-size: 1.75em; }
    header div#title blockquote { font-size: 0.8em; }

    #articles { display:grid; grid-template-columns: 1fr; }

    nav { margin: 0; padding: 0; }
    nav a { display: block; top: 0; padding: 0.5em; margin: 0; margin-bottom: 0.25em; text-align: center; box-shadow: var(--box-shadow-simple); }

    div#content > div { margin: 0; }
    div#articles { grid-gap: 0; }

    .box {
        box-shadow: var(--box-shadow-simple);
        border-radius: 0;
        margin: 0;
        margin-bottom:2em;
    }
    article.box { border-radius: 0; }

    #sidebar { margin: 1em 1em 0em 1em; }
    article, aside {
        padding: 1em !important;
    }
    aside { margin: 0; border: none; }
}

@media only screen and (max-width: 360px) {
    body { font-size: 0.8em; }
    header { margin: 0; }
    header div#gravatar img {
        margin: 0.5em;
        border-radius: 0;
        height: 64px;
        width: 64px;
    }
    header div#title h1 { font-size: 1.5em; }
    header div#title blockquote { font-size: 0.7em; }

    article { margin-bottom: 1em; }
    article img { box-shadow: var(--box-shadow-simple); border-radius: 0; margin-bottom: 1.5em; }

    .led-red { border-radius: 0; }
    div#articles { display:grid; grid-template-columns: 1fr; }
}