/**
 * Copyright (c) 2020 Joey Blankendaal
 * https://joey.blankendaal.org/
 */

/* Classes */
.container {
    display: block;
    margin: 0 auto;
    max-width: 90%;
    width: 768px;
}

/* Layout */
#top {
    color: #222;
    font: normal 1em serif;
    line-height: 1.6;
    margin: 0;
    overflow-x: hidden;
}

    #header {
        height: 192px;
    }

        #banner {
            background-color: #eee;
            height: 125px;
        }

        #nav {
            background-color: #fff;
            border-bottom: 1px solid #ccc;
            border-top: 1px solid #ccc;
            height: 62px;
            text-align: center;
            width: 100%;
        }

            #nav-input, #nav-label {
                display: none;
            }

            #nav-ul {
                height: 62px;
                margin: 0;
                padding: 0;
            }

                .nav-li {
                    display: inline-block;
                    margin: 0 16px;
                }

                    .nav-a {
                        color: #555;
                        display: block;
                        margin: 18.2px 0;
                        text-decoration: none;
                    }

                    .nav-a:hover {
                        color: #222;
                    }

        #me {
            background-color: #fff;
            background-image: url(placeholder.jpg);
            background-position: center;
            background-size: cover;
            border: 1px solid #ccc;
            height: 112px;
            margin: -172px auto 0 auto;
            width: 112px;

            border-radius: 50%;
            -moz-border-radius: 50%;
            -webkit-border-radius: 50%;
        }

    /* Main */
    #jumbotron {
        margin: 32px 0;
        text-align: center;
    }

        /* Header */
        #h1 {
            font: normal 2.25em serif;
            margin: 0;
        }

        #h1-sub {
            color: #555;
            font-size: 1.125em;
            margin-top: 8px;
        }

        /* Content */
        #jumbotron-ul {
            margin-top: -4px;
            padding: 0;
        }

            .jumbotron-li {
                display: inline;
                margin: 0 4px;
            }

                .jumbotron-a, .jumbotron-img {
                    height: 24px;
                    width: 24px;

                    border-radius: 50%;
                    -moz-border-radius: 50%;
                    -webkit-border-radius: 50%;
                }

                .jumbotron-a {
                    display: inline-block;
                }

        .a {
            color: #337ab7;
            text-decoration: none;
        }

        .a:hover {
            color: #23527c;
        }

    .article {
        display: flex;
        flex-direction: row;
        margin-top: 12px;
    }

        .column-20 {
            width: 20%;
        }

            .h2 {
                font-size: 1em;
                margin: 6px 0 0 0;
                text-transform: uppercase;
                width: 30%;
            }

        .column-80 {
            width: 80%;
        }

            .section {
                margin-bottom: 24px;
            }

                /* Header */
                .h3-icon, .h3-icon-wide {
                    height: 48px;
                    float: left;
                    margin: 4px 14px 0 0;
                }

                .h3-icon {
                    width: 48px;
                }

                .h3-icon-wide {
                    width: 96px;
                }

                .h3 {
                    font: normal 1.5em serif;
                    margin: 4px 0 0 0;
                }

                .h3-sub {
                    color: #555;
                    font-size: 1.125em;
                    margin: 0
                }

                /* Content */
                .date {
                    color: #888;
                    margin: -58px 0 0 0;
                    float: right;
                }

                .ul {
                    margin: 4px 0 0 18px;
                    padding: 0;
                }

                .p {
                    margin: 4px 0 0 0;
                }

    #footer {
        border-top: 1px solid #ccc;
        height: 63px;
        margin-top: 16px;
        text-align: center;
    }

        #footer-p {
            margin: 16.2px auto;
        }

/* Tablet */
@media only screen and (max-width: 768px) {
    #nav-label {
        background-image: url(nav.jpg);
        background-size: cover;
        cursor: pointer;
        display: block;
        float: right;
        height: 32px;
        margin: 15px 0;
        outline: none;
        position: relative;
        width: 32px;
    }

    #nav-input:checked ~ #nav-ul {
        display: block;
        margin: 63px 15px 0 0;
        position: absolute;
        right: 0;
    }

    #nav-ul {
        display: none;
        width: 198px;
    }

        .nav-li {
            background: #fff;
            border: 1px solid #ccc;
            margin-top: -1px;
            width: 196px;
        }

            .nav-a {
                margin: 0;
                padding: 18.2px 0;
                width: 196px;
            }

            .nav-a:hover {
                background: #eee;
            }

    #me {
        margin-top: -128px;
    }

    .article {
        flex-direction: column;
    }

        .column-20, .column-80 {
            width: 100%;
        }
}

/* Phone */
@media only screen and (max-width: 480px) {
    .h3, .h3-sub {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    .h3 {
        font-size: 1.375em;
    }
    
    .h3-sub {
        font-size: 1em;
    }
    
    .h3-icon, .h3-icon-wide {
        margin: 14px 18px 14px 0;
    }
    
    .date {
        float: none;
        margin: 0;
    }
}