.panel,
.panel-lighter,
.panel-darker,
.panel-inset,
.panel-inset-lighter,
.panel-hole,
.mod-page-info article table,
.panel-hole-inner,
dl.panel-hole > dt,
dl.panel-hole > dd,
table.panel-hole th,
table.panel-hole td,
.mod-page-info article table th,
.mod-page-info article table td {
  background-color: #313031;
  border: none;
  padding: 12px;
  margin-top: 12px;
  margin-bottom: 12px;
  overflow: hidden;
}

.panel {
  background-color: #313031;
  box-shadow: inset 3px 0 3px -3px #201815, inset 2px 0 2px -2px #201815, inset 1px 0 1px -1px #201815,
    inset 0 3px 3px -3px #8f8c8b, inset 0 2px 2px -2px #8f8c8b, inset 0 1px 1px -1px #8f8c8b,
    inset -3px 0 3px -3px #201815, inset -2px 0 2px -2px #201815, inset -2px 0 1px -1px #201815,
    inset 0 -3px 3px -3px #000, inset 0 -2px 2px -2px #000, inset 0 -1px 1px -1px #000, 0 0 2px 0 #201815,
    0 0 4px 0 #201815;
}

// .panel-evenodd:nth-child(even) {
// 	background-color: #424142;
// }

// .panel-evenodd:nth-child(odd) {
// 	background-color: #3b3a3b;
// }

.panel-lighter {
  background-color: #414040;
  box-shadow: inset 3px 0 3px -3px #242324, inset 2px 0 2px -2px #242324, inset 1px 0 1px -1px #242324,
    inset 0 3px 3px -3px #8f8c8b, inset 0 2px 2px -2px #8f8c8b, inset 0 1px 1px -1px #8f8c8b,
    inset -3px 0 3px -3px #242324, inset -2px 0 2px -2px #242324, inset -2px 0 1px -1px #242324,
    inset 0 -3px 3px -3px #000, inset 0 -2px 2px -2px #000, inset 0 -1px 1px -1px #000, 0 0 2px 0 #201815,
    0 0 4px 0 #201815;
}

.panel-darker {
  background-color: #242324;
  box-shadow: inset 3px 0 3px -3px #242324, inset 2px 0 2px -2px #242324, inset 1px 0 1px -1px #242324,
    inset 0 3px 3px -3px #8f8c8b, inset 0 2px 2px -2px #8f8c8b, inset 0 1px 1px -1px #8f8c8b,
    inset -3px 0 3px -3px #242324, inset -2px 0 2px -2px #242324, inset -2px 0 1px -1px #242324,
    inset 0 -3px 3px -3px #000, inset 0 -2px 2px -2px #000, inset 0 -1px 1px -1px #000, 0 0 2px 0 #201815,
    0 0 4px 0 #201815;
}

.panel-inset,
.panel-inset-lighter {
  box-shadow: inset 0 0 3px 0 #000, 0 -2px 2px -1px #000, -2px 0 2px -2px #28221f, -2px 0 2px -2px #28221f,
    2px 0 2px -2px #28221f, 2px 0 2px -2px #28221f, 0 3px 3px -3px #8f8c8b, 0 2px 2px -2px #8f8c8b,
    0 1px 1px -1px #8f8c8b;
  background-color: #242324;
}

.panel-inset-lighter {
  background-color: #414040;
}

// .panel-hole,
// .mod-page-info article table {
//   background-color: #313031;
//   box-shadow: inset 0 2px 2px -2px #000, inset 0 2px 2px -2px #000, inset 0 0 2px 0 #33302f, inset 0 0 2px 0 #33302f,
//     inset 0 -2px 2px -2px #fff, 0 0 2px 0 #2b2b2b;
//   margin: 4px;
//   padding: 2px;
// }

.blog-card,
.blog-card:hover {
  display: flex;
  color: inherit;
  text-decoration: none;
}

/* underline title when card is hovered */
.blog-card:hover .blog-card-text > h3 {
  text-decoration: underline;
}

.blog-card-thumbnail {
  background-color: transparent;
  margin: 0 16px 0 0;
  width: 128px;
  height: 128px;
  flex-shrink: 0;
  padding: 0;
  position: relative;
  box-shadow: 0 -2px 3px -2px #000, -2px 0 4px -2px #28221f, 2px 0 4px -2px #28221f, 0 4px 3px -2px #646261;
  border-radius: 2px;
}

.blog-card-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2px;
}

.blog-card-text {
  width: 100%;
}

.container {
  width: 1200px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-right: 16px;
  padding-left: 16px;
  flex-shrink: 0;
}

.container-inner {
  width: 1200px;
  max-width: 100%;
}

.small-center {
  max-width: 400px;
  margin: auto;
}
