* {
  padding: 0;
  margin: 0;
  list-style: none;
  font-size: 1em;
  box-sizing: border-box; }

body,
html {
  min-height: 100%; }

body {
  flex-grow: 1;
  font: 16px/24px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background: #fff;
  color: #2e2f30; }
  @media (prefers-color-scheme: dark) {
    body {
      background: #000;
      color: #eee; } }
.grid {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  align-content: flex-start; }
  .grid:after {
    content: "";
    display: block;
    flex-grow: 10;
    outline: 2px solid #fff;
    position: relative; }
    @media (prefers-color-scheme: dark) {
      .grid:after {
        outline-color: #000; } }
  .grid .item {
    height: 40vh;
    flex-grow: 1;
    outline: 2px solid #fff;
    position: relative;
    background-size: 100%; }
    @media (prefers-color-scheme: dark) {
      .grid .item {
        outline-color: #000; } }
    .grid .item img {
      max-height: 100%;
      min-width: 100%;
      min-height: 100%;
      width: auto;
      object-fit: cover;
      display: block; }
    .grid .item .open,
    .grid .item .close {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      text-indent: 150%;
      overflow: hidden;
      white-space: nowrap; }
    .grid .item .open {
      cursor: zoom-in;
      background-color: rgba(0, 0, 0, 0);
      transition: background-color .15s ease-out; }
      .grid .item .open:hover, .grid .item .open:focus {
        background-color: rgba(0, 0, 0, 0.25); }
      .grid .item .open:active {
        background-color: rgba(0, 0, 0, 0.5); }
    .grid .item .close {
      display: none;
      cursor: zoom-out; }
    .grid .item .full {
      display: none; }
    .grid .item .previous,
    .grid .item .next {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      z-index: 20;
      width: 80px;
      display: none;
      align-items: center;
      justify-content: center; }
      .grid .item .previous span,
      .grid .item .next span {
        display: block;
        border-radius: 16px;
        text-indent: 150%;
        overflow: hidden;
        white-space: nowrap;
        width: 32px;
        height: 32px;
        background-repeat: no-repeat;
        background-position: 8px;
        background-size: 16px;
        transition: background-color .1s linear;
        -webkit-backdrop-filter: blur(20px);
        -moz-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        background-color: rgba(200, 200, 200, 0.25);
        background-image: url(../img/icon-left.svg);
        pointer-events: none; }
        .grid .item .previous span:hover, .grid .item .previous span:focus,
        .grid .item .next span:hover,
        .grid .item .next span:focus {
          background-color: rgba(200, 200, 200, 0.5); }
        .grid .item .previous span:active,
        .grid .item .next span:active {
          background-color: rgba(200, 200, 200, 0.25); }
      .grid .item .previous:hover span, .grid .item .previous:focus span,
      .grid .item .next:hover span,
      .grid .item .next:focus span {
        background-color: rgba(200, 200, 200, 0.5); }
      .grid .item .previous:active span,
      .grid .item .next:active span {
        background-color: rgba(200, 200, 200, 0.25); }
    .grid .item .next {
      right: 0;
      left: auto; }
      .grid .item .next span {
        background-image: url(../img/icon-right.svg); }
    .grid .item .name {
      display: flex;
      position: absolute;
      right: 4px;
      bottom: 12px;
      color: #fff;
      text-shadow: #000 0 1px 1px, #000 0 2px 4px;
      opacity: 1;
      font-size: larger;
      margin-right: 12px; }
    .grid .item .date {
      display: flex;
      position: absolute;
      left: 4px;
      bottom: 12px;
      color: #fff;
      text-shadow: #000 0 1px 1px, #000 0 2px 4px;
      opacity: 1;
      margin-left: 12px; }
    .grid .item.target {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      height: 100%;
      z-index: 10;
      background: #fff;
      display: flex;
      align-items: center; }
      @media (prefers-color-scheme: dark) {
        .grid .item.target {
          background: #000; } }
      .grid .item.target .open {
        display: none; }
      .grid .item.target .close {
        display: block; }
      .grid .item.target img {
        object-fit: contain;
        animation: fade-in .5s ease-out; }
      .grid .item.target .full {
        display: flex;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        animation: fade-in .5s ease-out; }
        .grid .item.target .full span {
          flex-grow: 1;
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center; }
      .grid .item.target .meta {
        display: none !important; }
      .grid .item.target .previous,
      .grid .item.target .next {
        display: flex; }

.links {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-wrap: wrap;
  margin-left: 16px; }
  .links li {
    margin-left: 8px; }
    .links li a {
      display: block;
      border-radius: 16px;
      text-indent: 150%;
      overflow: hidden;
      white-space: nowrap;
      width: 32px;
      height: 32px;
      background-repeat: no-repeat;
      background-position: 8px;
      background-size: 16px;
      transition: background-color .1s linear;
      -webkit-backdrop-filter: blur(20px);
      -moz-backdrop-filter: blur(20px);
      backdrop-filter: blur(20px);
      background-color: rgba(200, 200, 200, 0.25); }
      .links li a:hover, .links li a:focus {
        background-color: rgba(200, 200, 200, 0.5); }
      .links li a:active {
        background-color: rgba(200, 200, 200, 0.25); }
    .links li.github a {
      background-image: url(../img/icon-github.svg); }
    .links li.rss a {
      background-image: url(../img/icon-rss.svg); }
    .links li.link a {
      text-indent: 0;
      width: auto;
      font-size: 13px;
      line-height: 32px;
      text-transform: uppercase;
      padding: 0 12px;
      color: rgba(0, 0, 0, 0.75);
      font-weight: 600;
      text-decoration: none; }

.four-oh-four {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 64px;
  align-items: center;
  justify-content: center;
  text-align: center; }
  .four-oh-four img {
    width: 64px;
    vertical-align: bottom;
    margin-bottom: 24px; }
  .four-oh-four h1 {
    font-size: 32px;
    line-height: 48px;
    font-weight: 700; }
  .four-oh-four p {
    margin-bottom: 32px; }
  .four-oh-four a {
    display: block;
    border-radius: 16px;
    text-indent: 150%;
    overflow: hidden;
    white-space: nowrap;
    width: 32px;
    height: 32px;
    background-repeat: no-repeat;
    background-position: 8px;
    background-size: 16px;
    transition: background-color .1s linear;
    -webkit-backdrop-filter: blur(20px);
    -moz-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    background-color: rgba(200, 200, 200, 0.25);
    text-indent: 0;
    width: auto;
    font-size: 13px;
    line-height: 32px;
    text-transform: uppercase;
    padding: 0 12px;
    color: rgba(0, 0, 0, 0.75);
    font-weight: 600;
    text-decoration: none; }
    .four-oh-four a:hover, .four-oh-four a:focus {
      background-color: rgba(200, 200, 200, 0.5); }
    .four-oh-four a:active {
      background-color: rgba(200, 200, 200, 0.25); }

@media (max-aspect-ratio: 1/1) {
  .grid .item {
    height: 30vh; } }

@media (max-height: 480px) {
  .grid .item {
    height: 80vh; } }

@media (max-aspect-ratio: 1/1) and (max-width: 480px) {
  .grid {
    flex-direction: row; }
    .grid .item {
      height: auto;
      width: 100%; }
      .grid .item img {
        width: 100%;
        height: auto; }
      .grid .item .previous,
      .grid .item .next {
        width: 25vw;
        max-width: auto; }
        .grid .item .previous span,
        .grid .item .next span {
          display: none; }
      .grid .item .previous {
        cursor: w-resize; }
      .grid .item .next {
        cursor: e-resize; } }

.navbar {
  background-color: #333;
  padding: 10px 16px; }

.navbar a {
  color: white;
  display: block;
  text-align: center;
  text-decoration: none; }

@keyframes fade-in {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }