/* Reset ==================================================================== */
    * { margin:0; padding:0; border:0; box-sizing:border-box; line-height:1; font-size:100%; font-style:normal; }



/* Mainframe ================================================================ */
    body { background:#eaeaea; color:#111; font:bold 100%/1.5 sans-serif; padding-bottom:3rem;}
    
    header, footer { -webkit-user-select:none; user-select:none; }
    
    .settings, section, .custom-image {
        display:-webkit-flex;
        display:flex;
        -webkit-flex-wrap:wrap;
        flex-wrap:wrap;
    }
    
    .panel, .subject, .url-input {
        background:white;
        border-bottom:thin solid #ccc; 
    }
        
    h2 {
        display:block;
        -webkit-user-select:none;
        user-select:none;
        font-size:.9rem;
        color:#444;
    }
    
    
    
    
/* Header =================================================================== */
    header { padding:3rem 2.5rem 1rem; }
        header:after { display:block; clear:both; width:100%; content:""; }
    
    h1, header i {
        font-size:3.5rem;
        font-size:5vw;
        vertical-align:middle;
    }
    
    h1 { padding-right:1rem; display:inline-block; }
        header h1 { letter-spacing:-.2rem; }
    
    i {
        display:inline-block;
        font-family:'icon';
        cursor:pointer;
        float:right;
        -webkit-transition:.2s;
        transition:.2s;
    }
    
        header i:hover, .settings-open { color:#111; }
        .settings-open { -webkit-animation:wrench 1s ease infinite; animation:wrench 1s ease infinite; }
            @-webkit-keyframes wrench { 50%{ -webkit-transform:rotate(-10deg); } } }
            @keyframes wrench { 50%{ -webkit-transform:rotate(-10deg); } }
   
   
   
   
/* Settings menu ------------------------------ */
    .settings-container { display:none; }
    .settings {
        position:relative;
        padding:1.5rem 2rem 0;
    }
    
    .subject {
        position:relative;
        border-bottom:thin solid #ccc;
        -webkit-transition:.3s;
        transition:.3s;
        margin:.5rem;
        padding:.75rem;
        -webkit-align-self:flex-start;
        align-self:flex-start;
    }
    .subject:hover { border-bottom-color:#888; -webkit-transform:translateY(-.3rem); transform:translateY(-.3rem); box-shadow:0 .3rem 0 #ccc; }

    .subject h2 { padding-bottom:.5rem; }

    .subject img, .subject video { width:8rem; height:8rem; }

    .custom-image {
        -webkit-flex-direction:column;
        flex-direction:column;
        -webkit-align-self:center;
        align-self:center;
        -webkit-flex:1;
        flex:1;
        margin:.5rem;
        padding-left:1rem;
    }
    
    .url-input {
        width:100%;
        padding:1rem;
        margin-top:.5rem;
        font:1.25rem/1 monospace;
    }
        .url-input:focus { outline:0; }
    
    


/* Main section ============================================================= */
    section { padding:1rem 1.5rem; }
        
    .panel, footer {
        -webkit-flex:1 0 22rem;
        flex:1 0 22rem;
        padding:1rem 0 0;
        margin:1rem;
        -webkit-align-self:flex-start;
        align-self:flex-start;
    }
    
    .panel:not(:first-child){ -webkit-align-self:center; align-self:center; }
    
    .large, footer { -webkit-flex:1 0 26rem; flex:1 0 26rem; }

    .holy-opacity-filter-batman {
        color:#aaa;
        float:right;
        display:inline-block;
        cursor:help;
    }

    .panel h2 { padding:0 1rem; }

    .panel figure { padding:1rem; }

    .panel img, .panel video, .panel iframe, .custom {
        display:block;
        width:100%;
        height:auto;
    }
    
    .panel iframe { height:20rem; }
    
    .custom {
        height:50%;
        background-size:cover;
        background-position:center center;
    }

    .panel style {
        display:block;
        height:5rem;
        background:white;
        font:.9rem/1.25 monospace;
        padding:.5rem 1.5rem;
        margin-bottom:1rem;
        white-space:pre;
        -webkit-transition:.25s;
        transition:.25s;
        transition:.3s;
        overflow:auto;
    }
    style.large { height:13rem; }
    
    .panel style:focus {
        outline:0;
        box-shadow:inset .5rem 0 #ABDF80;
        background:#E7FFD3;
    }




/* Footer ============================================================= */
    
    footer { padding:1rem; }
    
    footer h1 { font-size:1.8rem; line-height:1.2; }
    footer h3 { display:block; font-size:1.6rem; padding-top:1rem; color:#888; }
        footer h3 a { text-decoration:none; color:#555; }
        footer h3 a:hover { color:#039; }
        
        footer h3:last-of-type { margin-top:.5rem; }




/* Icon ============================================================= */
    @font-face { font-family:'icon'; src: url('//bennettfeely.com/labs/bigclick/sosa.eot?') format('eot'), url('//bennettfeely.com/labs/bigclick/sosa.woff') format('woff'), url('//bennettfeely.com/labs/bigclick/sosa.ttf') format('truetype'); }