/* Primitives */

html, body, h1, h2, h3, h4, h5, h6 {
    text-align: left;
    font-weight: 400;
    margin: 0;
}

html, body {
    width: 100%;
    height: 100%;
}

body {
    font-family: 'Raleway', -apple-system, sans-serif;
    /*background-color: #f8f8f8;*/
    background-color: white;
    letter-spacing: 2px;
    line-height: 1.5;
    font-size: 1rem;
    overflow: auto;
    color: #333;
}

h1 {
    font-size: 4em;
    line-height: 1;
}

h2 {
    font-size: 2.8em;
}

h3 {
    font-size: 2em;
}

h4 {
    font-size: 1.5em;
}

h5 {
    font-size: 1em;
}

a, a:link, a:visited {
    text-decoration: none;
    color: #7D480F;
}

a:hover, a:active {
    color: #A26A0F;
}

/* Helpers */

.mt-30 {
    margin-top: 30px;
}

.mt-20 {
    margin-top: 20px;
}

.mb-20 {
    margin-bottom: 20px;
}

.header {
    padding:10px;
}

/* Containers */

.container {
    width: 100%;
    height: 100%;
    padding: 1em 0;
    display: flex;
    justify-content: center;
}

.content {
    margin-top: 2em;
    flex-direction: row;
}

.row {
    margin-top:1em;
}

.column-group {
    padding: 1em 0;
    display: flex;
    min-height: 256px;
    min-width: 1024px;
    justify-content: space-evenly;
}


.img-merch {
    cursor: pointer;
    max-height: 1024px;
    min-height: 256px;
    max-width: 80%;
    width: 100%;
    height: 100%;
    margin:5px;
}

.img-represent-shirt {
    background: url("https://img.represent.com/uploads/cee2d0abf4effdc4bccef784c56076dc.jpeg?auto=format&w=750") center/contain no-repeat;
}

.img-represent-sweatshirt {
    background: url("https://img.represent.com/uploads/ae341fdda86ad04822853214a6dc0e48.jpeg?auto=format&w=750") center/contain no-repeat;
}

.img-represent-sweatshirt-darkstyle {
    background: url("https://img.represent.com/uploads/710a39c3d255053a17be74073e28cea7.jpeg?auto=format&w=750") center/contain no-repeat;
}

.img-redbubble-cherno-pillow {
    background: url("https://ih1.redbubble.net/image.1546085783.6878/throwpillow,small,1000x-bg,f8f8f8-c,0,200,1000,1000.jpg") center/contain no-repeat;
}

.img-redbubble-cherno-bottle {
    background: url("https://ih1.redbubble.net/image.1546085815.6878/ur,water_bottle_metal_lid_on,square,1000x1000.2.jpg") center/contain no-repeat;
}

.img-redbubble-cherno-notebook {
    background: url("https://ih1.redbubble.net/image.1546085756.6878/sn,x1000-pad,1000x1000,f8f8f8.jpg") center/contain no-repeat;
}

.img-redbubble-cherno-mug {
    background: url("https://ih1.redbubble.net/image.1546085748.6878/ur,mug_lifestyle,square,1000x1000.jpg") center/contain no-repeat;
}

.img-redbubble-hazel-notebook {
    background: url("https://ih1.redbubble.net/image.1546057071.6311/sn,x1000-pad,1000x1000,f8f8f8.jpg") center/contain no-repeat;
}

.img-redbubble-hazel-socks {
    background: url("https://ih1.redbubble.net/image.1546057195.6311/ur,socks_flatlay_medium,square,1000x1000-bg,f8f8f8.1.jpg") center/contain no-repeat;
}

.img-redbubble-hazel-mask {
    background: url("https://ih1.redbubble.net/image.1546057094.6311/ur,mask_three_quarter,square,1000x1000.jpg") center/contain no-repeat;
}

.img-redbubble-hazel-mug {
    background: url("https://ih1.redbubble.net/image.1547393993.6132/ur,mug_lifestyle,square,1000x1000.jpg") center/contain no-repeat;
}

.img-redbubble-hazel-coasters {
    background: url("https://ih1.redbubble.net/image.1546048796.6132/ur,coaster_pack_4_flatlay,square,1000x1000.2.jpg") center/contain no-repeat;
}

.img-redbubble-hazel-bottle {
    background: url("https://ih1.redbubble.net/image.1546048871.6132/ur,water_bottle_metal_lid_on,square,1000x1000.2.jpg") center/contain no-repeat;
}

.img-redbubble-hazel-pillow {
    background: url("https://ih1.redbubble.net/image.1546048820.6132/throwpillow,small,1000x-bg,f8f8f8-c,0,200,1000,1000.jpg") center/contain no-repeat;
}

.img-redbubble-cherno-clock {
    background: url("https://ih1.redbubble.net/image.1547397204.6878/clkc,bamboo,black,1000x1000-bg,f8f8f8.jpg") center/contain no-repeat;
}

.img-merch:hover{
    opacity: 70%;
    transition: opacity 0.1s linear;
}


/* Media Queries */

@media only screen and (max-width: 1024px) {

    .column-group {
        flex-direction: row;
        justify-content: normal;
        padding: 1em 0;
        display: flex;
        min-width: 256px;
        min-height: 256px;
        justify-content: space-evenly;
    }

}

@media only screen and (max-height: 850px) {
    .hero {
        margin: 0 0 1em 0;
    }
}

/* Brands */

.fa-chevron-left {
    font-size: 0.8em;
}

.fa-youtube, .fa-twitter, .fa-instagram {
    position: relative;
    margin-right: 0.5em;
    font-size: 1.875em;
    border-radius: 50%;
    height: 2em;
    width: 2em;
}

.fa-youtube:link, .fa-twitter:link, .fa-instagram:link,
.fa-youtube:visited, .fa-twitter:visited, .fa-instagram:visited,
.fa-youtube:hover, .fa-twitter:hover, .fa-instagram:hover,
.fa-youtube:active, .fa-twitter:active, .fa-instagram:active {
    color: #fff;
}

.fa-youtube::before, .fa-twitter::before, .fa-instagram::before {
    transform: translate(-48%, -50%);
    position: absolute;
    left: 50%;
    top: 50%;
}

.fa-youtube, .fa-youtube:link, .fa-youtube:visited {
    background-color: #f00;
}

.fa-youtube:hover, .fa-youtube:active {
    background-color: #e60000;
}

.fa-twitter, .fa-twitter:link, .fa-twitter:visited {
    background-color: #00acee;
}

.fa-twitter:hover, .fa-twitter:active {
    background-color: #009bd5;
}

.fa-instagram, .fa-instagram:link, .fa-instagram:visited {
    background-color: #3f729b;
}

.fa-instagram:hover, .fa-instagram:active {
    background-color: #405982;
}