::selection {
  background-color: rgba(140, 140, 140, 0.5);
}
::-moz-selection {
  background-color: rgba(140, 140, 140, 0.5);
}
body {
  min-width: 320px;
  max-width: 100%;
  margin: 78px 36px;
  font-family: 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, sans-serif;
  background-color: #a5a5a5;
  zoom: 100%;
  text-size-adjust: none;
  -webkit-text-size-adjust: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body, h1, h2 {
  font-weight: normal;
  font-size: 12px;
  line-height: 14px;
}
body, a {
  color: #333333;
}
a {
  text-decoration: none;
}
#logomark, h1, footer h2 {
  display: inline;
}
#logomark {
  position: absolute;
  width: 12px;
  height: 12px;
  top: 14.5px;
  left: 16px;
}
#logomark {
  filter: grayscale(100%) contrast(0%) brightness(0.3) hue-rotate(0deg);
  animation: none;
}
h1 {
  position: absolute;
  top: 5px;
  left: 36px;
}
#logomark:hover + h1, h1:hover, #work h2:hover > .title {
  text-decoration: underline;
}
#logomark:hover, #logomark:has(+ h1:hover) {
  filter: grayscale(0%) contrast(100%) brightness(1.0);
}
#logomark:hover, #logomark:has(+ h1:hover), #work h2:hover::before, #work h2.open::before, #work a:hover, footer a:hover {
  animation: 0.5s ease-in infinite rainbow;
}
@keyframes rainbow {
  0%   {filter: hue-rotate(0deg);}
  100% {filter: hue-rotate(360deg);}
}
main, footer {
  position: relative;
  max-width: 500px;
  margin: 0 auto;
}
#work h2::before, #work a, footer a {
  background: linear-gradient(bottom, #333333, #333333);
  background: -webkit-linear-gradient(bottom, #333333, #333333);
  animation: none;
}
#work h2::before {
  position: absolute;
  left: -17px;
  content: "□";
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
#work h2:hover {
  cursor: pointer;
}
#work h2:hover::before, #work h2.open::before, #work a:hover, footer a:hover {
  background: linear-gradient(#ffd700, #00d2ff);
  background: -webkit-linear-gradient(#ffd700, #00d2ff);
}
#work h2:hover::before, #work h2.open::before {
  content: "■";
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
#work h2 .date {
  color: #555555;
}
#work p, #work a {
  display: none;
}
#work p.open, #work a.open {
  display: block;
}
#work a, footer a {
  width: 68px;
  margin: 0 0 0 auto;
  padding: 0 11px;
  color: #cccccc;
  line-height: 26px;
  text-align: center;
  border-radius: 12px;
}
#work a:hover, footer a:hover {
  color: #333333;
}
footer a {
  display: block;
  width: 114px;
  margin: 14px auto 0;
}