/* CSS Reset */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre,
form, fieldset, input, p, blockquote, table, th, td, embed, object {
  padding: 0;
  margin: 0; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

fieldset, img, abbr {
  border: 0; }

address, caption, cite, code, dfn, em,
h1, h2, h3, h4, h5, h6, strong, th, var {
  font-weight: normal;
  font-style: normal; }

ul {
  list-style: none; }

caption, th {
  text-align: left; }

h1, h2, h3, h4, h5, h6 {
  font-size: 1.0em; }

q:before, q:after {
  content: ''; }

a, ins {
  text-decoration: none; }
  
button {
    display: inline-block;
    border: none;
    padding: 1rem 2rem;
    margin: 0;
    margin-top: .3rem;
    text-decoration: none;
    background: #393939;
    color: #CDC7B5;
    font-size: 1.2rem;
    cursor: pointer;
    text-align: center;
    transition: background 250ms ease-in-out, 
                transform 150ms ease;
    -webkit-appearance: none;
    -moz-appearance: none;
    line-height: 1.5;
}

button:hover,
button:focus {
    background: #726666;
    color: #DDD7C5;
}

button:focus {
    outline: 1px solid #fff;
    outline-offset: -4px;
}

button:active {
    transform: scale(0.99);
}

html {
  font-size: 14px;
  font-family: 'Lato', "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  color: #CDC7B5; }

a:link, a:visited {
  color: #CDC7B5;
  text-decoration: underline; }

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

body {
  margin: 1rem .5rem;
  background-color: #151515; }

h1 {
  font-family: 'Amatic SC', cursive;
  font-weight: bold;
  font-size: 3rem;
  color: #CDC7B5;
  margin-left: 8rem; }

h2 {
  font-size: 1.2rem;
  text-transform: uppercase;
  margin-bottom: .4rem;
  padding: .3rem;
  border-top: #282727 2px solid;
  border-bottom: #282727 2px solid; }

p {
  font-size: 1.2rem;
  line-height: 1.5;
  padding-left: .3rem;
  width: 100%; }

.tagline {
  font-family: 'Amatic SC', cursive;
  color: #CDC7B5;
  font-size: 2rem; }

#gonk-hero {
  margin: 0;
  height: 50%; }

div.content-section {
  margin-top: 1rem; }

#content-intro {
  padding: 0; }
  

@media only screen and (min-width: 45rem) {
  body {
    margin: 3rem 6rem; }

  #gonk-hero {
    display: block;
    border: 0;
    width: 95%;
    height: auto; }

  h1 {
    font-size: 4rem;
    margin-left: 16rem; } }
   
/*--------  CSS Grid  --------*/
@supports (grid-area: auto) {
  #site-content {
    display: grid;
    grid-template-columns: auto; }

  .content-section {
    display: grid;
    grid-template-columns: auto minmax(3rem, 33%);
    grid-gap: 2rem 1rem;
    margin-top: 2.5rem; }
    .content-section .section-title {
      grid-column: 1/3; }
    .content-section .section-desc {
      grid-column: 1/3; }
    .content-section .section-img {
      grid-column: 1/3; }
    .content-section img {
      width: 100%;
      max-width: 29rem;
      height: auto;
      display: block;
      border-radius: 6px;
      padding-right: .3rem; }
    .content-section .section-embed {
      grid-column: 1/4; }

  .gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, 24%);
    grid-auto-rows: minmax(100px, auto);
    grid-gap: 1.3%;
    margin-top: 1rem; }
    .gallery img {
      width: 100%;
      height: auto;
      display: block;
      border-radius: 6px; }

  @media only screen and (min-width: 45rem) {
    #site {
      display: grid;
      grid-template-columns: minmax(25%, 30rem) minmax(auto, 48rem); }
      #site #site-title {
        grid-column: 1/3; }
      #site #site-hero {
        grid-column: 1; }
      #site #site-content {
        grid-column: 2; }

    .content-section {
      grid-template-columns: auto minmax(4rem, 25%);
      column-gap: 1rem; }
      .content-section .section-title {
        grid-column: 1/3; }
      .content-section .section-desc {
        grid-column: 1; }
      .content-section .section-img {
        grid-column: 2; } }
  @media only screen and (min-width: 95rem) {
    #site {
      grid-template-columns: 30rem 1fr; }
      #site h1 {
        font-size: 5rem; }

    #content-intro {
      grid-area: G-intro; }

    #teepublic {
      grid-area: G-tp; }

    #videos {
      grid-area: G-vid; }

    #teepublic-gallery {
      grid-area: G-gal; }

    #twitter {
      grid-area: G-twit; }

    #site-content {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-gap: 1rem 1.5rem;
      grid-template-areas: "G-intro G-intro" "G-tp G-gal" "G-vid G-twit"; }

    #teepublic-gallery {
      margin-top: 5.8rem; } } }