html, body, div, ul, li, p, h2 {
  margin: 0;
  padding: 0;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  background-image: url('../images/bg.png');
}

a {
  color: #0077b5;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img {
  vertical-align: bottom;
}

ul, ol {
  list-style: none;
}

/* helper -------------------------- */

.container {
  width: 900px;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

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

.fix-float::after {
  content: '';
  display: block;
  clear: both;
}

/* header ------------------------ */

.title {
  font-size: 3rem;
  color: #999;
  text-shadow: 1px 1px #fff;
}

/* tab ----------------------- */

.tab__btns {
  text-align: center;
}

.tab__btn {
  margin-right: .1rem;
  margin-left: .1rem;
  color: #888;
  font-size: 2em;
  background-color: transparent;
  border: none;
}

.tab__btn:hover {
  color: #333;
  cursor: pointer;
}

.tab__btn:disabled {
  color: #000;
  cursor: default;
}

/* post -------------------- */

.post {
  font-family: Arial, Helvetica, "儷黑 Pro", "微軟正黑體", "新細明體", sans-serif;
}

.post__desc {
  line-height: 1.5;
}

.post__info .fas {
  width: 1rem;
  margin-right: 5px;
  text-align: center;
}

.post__title a:hover {
  color: #f90;
  text-decoration: none;
}

.post__imgs {
  overflow: hidden;
}

.post__img {
  transition-duration: .3s;
  width: 100%;
  height: auto;
}

.post__imgs a:hover img {
  transform: scale(1.2);
}

.layout-0 .post__li {
  margin-top: 1rem;
}

.layout-1 {
  padding-top: 1rem;
}

.layout-2 .post__ul > li {
  padding: .5rem;
}

.layout-2 {
  padding-top: .5rem;
}

.layout-0 .post__content,
.layout-2 .post__content {
  background-color: #fff;
  border-radius: 3px;
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.15),
    -1px 0 0 rgba(0, 0, 0, 0.03),
    1px 0 0 rgba(0, 0, 0, 0.03),
    0 1px 0 rgba(0, 0, 0, 0.12);
}

.layout-0 .post__content {
  padding: 1rem;
}

.layout-2 .post__content {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.layout-0 .post__info,
.layout-2 .post__info {
  color: #888;
  font-size: .9rem;
}

.layout-0 .post__content {
  display: flex;
  flex-wrap: wrap;
}

.layout-0 .post__date {
  width: 10%;
  text-align: center;
}

.layout-0 .post__head {
  width: 90%;
  padding-left: 1rem;
}


.layout-0 .post__summary {
  width: 100%;
}

.layout-0 .post__yearMonth,
.layout-0 .post__day {
  display: block;
  padding: 2px 0;
}

.layout-0 .post__yearMonth {
  background-color: #E7594F;
  border-bottom: solid 3px #C85D56;
  color: #fff;
  font-size: .8rem;
}

.layout-0 .post__day {
  position: relative;
  font-weight: 900;
  color: #333;
  font-size: 2.5em;
  background-color: #ECEDEF;
  text-shadow: -1px -1px 0 #fff;
}

.layout-0 .post__day::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  border: solid 6px #fff;
  border-color: #D1D2D3 #fff #fff #D1D2D3;
}

.layout-0 .post__summary {
  display: flex;
}

.layout-0 .post__imgs {
  width: 30%;
}

.layout-0 .post__excerpt {
  width: 70%;
  padding-left: 1rem;
}

.layout-0 .post__meta {
  margin: .667em 0;
}

.layout-0 .post__info {
  margin-right: 1em;
  display: inline-block;
}

.cr-tr {
  display: none;
  background-color: #F1F1F1;
  border: solid 1px #ccc;
}

.cr-tr span {
  text-align: center;
  line-height: 3;
}

.cr-tr .td1 {
  width: 10%;
}

.cr-tr .td2 {
  width: 75%;
}

.cr-tr .td3 {
  width: 15%;
}

.layout-1 .cr-tr {
  display: flex;
}

.layout-1 .post__summary {
  display: none;
}

.layout-1 .post__date::before {
  content: attr(createdate);
}

.layout-1 .post__yearMonth,
.layout-1 .post__day {
  text-indent: -9999px;
  display: none;
}

.layout-1 .post__info--author,
.layout-1 .post__info--category {
  display: none;
}

.layout-1 .post__date,
.layout-1 .post__head,
.layout-1 .post__title,
.layout-1 .post__meta {
  float: left;
}

.layout-1 .post__date {
  width: 15%;
}

.layout-1 .post__head {
  width: 85%;
}

.layout-1 .post__title {
  width: 85%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 1em;
}

.layout-1 .post__meta {
  width: 15%;
}

.layout-1 .post__ul,
.layout-1 .post__li {
  background-color: #fff;
  overflow: hidden;
}

.layout-1 .post__date,
.layout-1 .post__title,
.layout-1 .post__info--browser {
  padding: 1em;
}

.layout-1 .post__li {
  border: solid 1px #ccc;
  margin-top: -1px;
}

.layout-1 .post__info--browser {
  text-align: right;
}

.layout-1 .post__info--browser span,
.layout-1 .post__info--browser .fas {
  display: none;
}

.layout-1 .post__date,
.layout-1 .post__info--browser {
  color: #999;
}

.layout-2 .post__ul {
  display: flex;
  flex-wrap: wrap;
}

.layout-2 .post__ul>li {
  width: 33.33333%;
}

.layout-2 .post__date,
.layout-2 .post__excerpt {
  display: none;
}

.layout-2 .post__head {
  order: 2;
  padding: 1rem;
}

.layout-2 .post__summary {
  order: 1;
}

.layout-2 .post__title {
  font-size: 1.067em;
  height: 2.6em;
  overflow: hidden;
}

.layout-2 .post__title {
  margin-bottom: 5px;
}

.layout-2 .post__meta li+li {
  margin-top: 3px;
}