body {
    background-color: #eeeeee;
    font-family: sans-serif;
    margin: 0 auto;
    max-width: 1000px;
    padding: 0 2%;
}

h1, h2, h3, h4 {
    color: #f59f00;
}

h1 {
    font-size: 4em;
    line-height: 0.8em;
    margin-bottom: 0;
    margin-top: 0.3em;
    padding-bottom: 0;
    text-align: center;
}

h2 {
    margin-bottom: 0.2em;
    margin-top: 0;
    text-align: center;
}

h4 {
    text-decoration: underline;
}

.tile img {
    border: 3px solid #eeeeee;
    box-sizing: border-box;
    margin-bottom: 0.2em;
    width: 100%;
}

.tile {
    box-sizing: border-box;
    font-size: 1.1em;
    margin: 0 auto;
    margin-top: 1em;
    max-width: 470px;
    padding: 3px;
    text-align: center;
}

.tile img:hover {
    border: 3px solid #f59f00;
}

.post h2 {
    text-align: left;
}

.post h3 {
    text-align: left;
}

.posts h2 {
    text-align: left;
}

.posts h3 {
    text-align: left;
}

.video iframe {
    border: 0; /* clears border iframe gets from user agent stylesheet */
    height: 100%; /* fills height of parent div */

    /* takes own height and width out of containing div initially */
    position: absolute; /* let's div determine its height from its padding */
    width: 100%; /* expands across entire containing div (pane) */

} /* see .video */

.gallery img {
    border: 1px solid #966100;
    box-sizing: border-box;
    margin: 0.5em;
    width: 95%;
} /* see gallery */

footer {
    clear: both;
    padding-top: 0.1em;
    text-align: center;
}

figure img {
    max-width: 470px;
    width: 100%;
}

figcaption {
    font-size: 0.8em;
    max-width: 470px;
}

/* Colors used for links based on Adobe Color CC Compound color rule with #3343cc unused. */
a:link {
    color: #3192cb;
    font-weight: bold;
}

a:visited {
    color: #8c97eb;
}

a:hover {
    color: #FFC092;
}

a:active {
    color: #CC8A70;
}

.logo:link {
    color: #f59f00;
    text-decoration: none;
}

.logo:visited {
    color: #f59f00;
}

.logo:hover {
    color: #f59f00;
}

.logo:active {
    color: #f59f00;
}

.posts a:link {
    color: #f59f00;
}

.posts a:visited {
    color: #f59f00;
    text-decoration: none;
}

.posts a:hover {
    color: #e33636;
}

.motto {
    margin-top: 0;
    text-align: center;
}

.announce {
    color: #e33636;
    text-align: center;
    text-transform: uppercase;
}

/* https://www.smashingmagazine.com/2014/02/making-embedded-content-work-in-responsive-design/ */
/* starts at pane width as block element from user agent stylesheet */
.video { /* starts as zero height because iframe position absolute */
    padding-bottom: 56.25%; /* expands height in 9:16 relation to width */

    /* stop iframe from using height of remaining body to end of pane */
    position: relative;
} /* see iframe */

.quick-description {
    background-color: #e2e2e2;
    box-sizing: border-box;
    padding: 1em;
    /*text-align: center; */
}

.quick-description-text {
    margin-left: 0.5em;
}

.gallery {
    text-align: center; /* center inline elements, including img */
} /* see img */

.indicated-line {
    font-size: 0.75em;
    margin-bottom: 0.3em;
    margin-top: 0.3em;
    padding-left: 1em;
    text-indent: -2.1em;
}

.indicated-item {
    display: inline-block; /* enabeles margin & width */
    margin-bottom: 0.3em;
    margin-top: 0.3em;
    min-width: 150px;
}

.indicator {
    background-color: #f59f00; /* fall through color */
    margin-left: 1.2em; /* keep away from container left and previous label */
    margin-right: 0.8em; /* keep away from own label */
    padding-right: 0.15em; /* occupy colored space */
}

.event {
    background-color: #32cd32;
}

.blueprint {
    background-color: #1e90ff;
}

.map {
    background-color: #f4a460;
}

.texture {
    background-color: #32cd32;
}

.tested {
    background-color: #32cd32;
}

.targeted {
    background-color: #1e90ff;
}

.incompatible {
    background-color: #ff4500;
}

.legend {
    background: #e2e2e2;
    font-size: 0.75em;
    text-align: center;
}

.legend .indicator {
    margin-right: 1.064em; /* keep away from own label */
    padding-right: 0.1995em; /* occupy colored space */
}

.sidebar {
    background-color: #e2e2e2;
    margin-bottom: 10px;
    padding: 1em;
}

.sidebar img {
    max-width: 298px;
    width: 100%;
}

/* Tumblr button */
.sidebar .btn {
    border: 0;
    margin-left: 20px;
    overflow: hidden;
}

.stack {
    font-size: 1.5em;
    margin: 0 auto;
    max-width: 470px;
    text-align: center;
}

.twitter-follow-button {
    margin-left: 10px;
}

.legend .indicated-item {
    min-width: 0;
}

.buy-now {
    text-align: center;
}

.buy-now a {
    background-color: #0aaff1;
    color: white;
    display: inline-block;
    font-size: 0.95em;
    padding: 0.3em 2em 0.3em 2em;
    text-decoration: none;
    text-transform: uppercase;
}

.buy-now a:hover {
    background-color: #05658d;
    transition: background-color 1s;
}

.struck {
    text-decoration: line-through;
}

.shodan {
    font-family: Consolas, Courier, serif;
    font-weight: bold;
}

.sharing {
    margin: 0.5em 0;
}

.facebook:link, .facebook:visited {
    background-color: #3b5998;
    border-color: #34393e;
    border-style: solid;
    border-width: 1px;
    color: #ffffff;
    margin: 0 0.4em 0 0;
    padding: 0.3em;
    text-decoration: none;
}

.reddit:link, .reddit:visited {
    background-color: #cee3f8;
    border-color: #34393e;
    border-style: solid;
    border-width: 1px;
    color: #34393e;
    margin: 0 0.4em 0 0;
    padding: 0.3em 1.1em;
    text-decoration: none;
}

.twitter:link, .twitter:visited {
    background-color: #55acee;
    border-color: #34393e;
    border-style: solid;
    border-width: 1px;
    color: white;
    margin: 0 0.4em 0 0;
    padding: 0.3em 0.8em;
    text-decoration: none;
}

.google:link, .google:visited {
    background-color: #c53929;
    border-color: #34393e;
    border-style: solid;
    border-width: 1px;
    color: #ffffff;
    padding: 0.3em;
    text-decoration: none;
}

#mc_embed_signup {
    color: #f59f00;
    margin-left: 10px;
}

#mc_embed_signup input.email {
    width: 88%;
}

@media screen and (min-width: 300px) {
    .indicated-line {
        font-size: 0.8em;
    }
}



@media screen and (min-width: 370px) {
    .indicated-line {
        font-size: 1em;
    }
}

@media screen and (min-width: 500px) {
    .gallery img {
        border: 2px solid #966100;
        box-sizing: border-box;
        width: 46%;
    }

    .gallery {
        margin: 0 auto;
        max-width: 1200px;
    }
}

@media screen and (min-width: 720px) {
    h2 {
        text-align: center;
    }

    h3 {
        border-bottom: 1px solid #f59f00;
        text-align: center
    }

    footer {
        clear: both;
        font-size: 0.7em;
    }

    .pairing {
        clear: both;
        margin: 0 auto;
    }

    .pairable {
        width: 48%;
    }

    .first {
        float: left;
    }

    .second {
        float: right;
    }

    .theater {
        width: 68%;
    }

    .quick-description {
        font-size: 0.8em;
        width: 28%;
    }

    .gallery {
        clear: both;
    }
    
    .post {
        float: left;
        width: 63%;
    }
    
    .posts {
        float: left;
        width: 63%;
    }
    
    .sidebar {
        background-color: #e2e2e2;
        box-sizing: border-box;
        color: #f59f00;
        float: right;
        /*text-align: center;*/
        width: 33%;
    }
}

@media screen and (min-width: 730px) {
    .quick-description {
        font-size: 0.85em;
    }
}

@media screen and (min-width: 810px) {
    .quick-description {
        font-size: 0.9em;
    }
    
    .sidebar {
        font-size: 1em
    }
}

@media screen and (min-width: 850px) {
    .quick-description {
        font-size: 0.95em;
    }
}

@media screen and (min-width: 910px) {
    .quick-description {
        font-size: 1em;
    }
}


@media screen and (min-width: 970px) {
    .quick-description {
        font-size: 1.05em;
    }
}

@media screen and (min-width: 1000px) {
    .quick-description {
        font-size: 1.1em;
    }
    
    .tile {
        float: left;
    }
}