/*
Theme Name: Dawn of hero v7
Author: Terry Xu
*/

html, body {
  font: 17px Gotham, "San Francisco", "Hiragino Sans GB", sans-serif;;
  padding: 0px;
  margin: 0px;
  color: #1C1C1C;
  background: #FFFBF9;
  height: 100%;
  -webkit-font-smoothing: antialiased;
}

ul {
  padding: 0px 0px 0px 20px;
  margin: 0px;
}

li {
  padding: 0px;
  margin: 0px;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

#grid-container {
  display: grid;
  grid-template-columns: [col] 780px [col] auto;
  min-height: 100%;
  box-sizing: border-box;
}

#main {
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 30px 60px 60px;
  background: white;
  box-sizing: border-box;
  box-shadow: 1px 0px 0.5px rgba(0, 0, 0, 0.08),
    3px 0px 0px white,
    4px 0px 0.5px rgba(0, 0, 0, 0.08),
    6px 0px 0px white,
    7px 0px 0.5px rgba(0, 0, 0, 0.08),
    9px 0px 0px white,
    10px 0px 8px rgba(0, 0, 0, 0.05);
}

#header {
  display: flex;
  justify-content: space-between;
}

#main #index {
  color: #FF2D00;
  letter-spacing: 0.2em;
}

#name {
  letter-spacing: 0.2em;
  color: #D4C9BB;
}

#main .date {
  font-size: 64px;
  color: #F2F0EE;
  margin: 20px 0px;
  letter-spacing: 0.05em;
  margin-left: -4px;
}

#main .date em {
  font-style: normal;
  color: #FF2D00;
}

#main .title {
  font-size: 17px;
  font-weight: normal;
  margin: 0px 0px 30px;
  color: #000000;
}

#triangle {
  box-sizing: border-box;
  width: 20px;
  height: 16px;
  border-bottom: solid 16px #FFCF02;
  border-left: solid 10px transparent;
  border-right: solid 10px transparent;
  align-self: flex-end;
}

#main .nav {
  display: flex;
  justify-content: space-between;
  margin: 40px 0px;
}

#main #blogs img {
  display: block;
  width: 100%;
  margin: 16px 0px 24px;
  box-sizing: border-box;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  -webkit-border-radius: 8px; /* Safari 3-4, iOS 1-3.2, Android ≤1.6 */
          border-radius: 8px; /* Opera 10.5, IE9+, Safari 5, Chrome, Firefox 4+, iOS 4, Android 2.1+ */
}

/* Archive */

#main #archive h3 {
  font-weight: normal;
  color: #ee1111;
}

#main #archive ul {
  padding: 0;
}

#main #archive li {
  line-height: 2em;
  list-style: none;
}

#main #blogs {
  flex-grow: 1;
  margin-bottom: 20px;
}

#main a {
  color: #000000;
  text-decoration: none;
}

#main a:hover {
  color: #ee1111;
}

#main .post {
  line-height: 2em;
}

#main .post h1,
#main .post h2,
#main .post h3 {
  font-weight: normal;
}

#green {
  background: url(./images/green-1.png) center no-repeat;
  background-size: 170px 258px;
  min-height: 360px;
  min-width: 240px;
  height: 100vh;
}

@media (max-width: 780px) {

  #grid-container {
    display: flex;
    flex-direction: column;
  }

  #main {
    width: 100%;
    padding: 20px;
  }

  #main .date {
    font-size: 32px;
  }

  #main #blogs img {
    box-shadow: 0 6px 12px rgba(0,0,0,0.25), 0 4px 4px rgba(0,0,0,0.22);
    border-radius: 0px;
    width: 100vw;
    margin-left: -20px;
  }

  #green {
    height: auto;
  }

}