body {
  transition: background 300ms, color 300ms;
  color: black; }
  body a {
    color: black; }

body.workSection {
  background: black;
  color: white; }
  body.workSection a {
    color: white; }
  body.workSection .arrow svg {
    stroke: white; }

.work {
  --gap: 10px;
  --margin:12px;
  min-height: 100vh;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  padding: var(--margin);
  padding-top: 30px;
  margin-top: 100px;
  font-family: 'VerizonNHG', Helvetica, sans-serif; }
  .work .project-item {
    --thumbWidth: calc(25vw - var(--gap)*3/4 - var(--margin)*2/4 - 4px);
    width: var(--thumbWidth);
    border-radius: 10px;
    text-align: center;
    color: white; }
    .work .project-item a, .work .project-item li, .work .project-item ul, .work .project-item h3 {
      color: white; }
    .work .project-item h3 {
      font-family: 'VerizonNHG', Helvetica, sans-serif;
      margin: 6px 0px; }
    .work .project-item h4 {
      font-weight: 400; }
    .work .project-item a:hover img {
      border: 1px solid white; }
    .work .project-item img {
      width: 100%;
      height: calc(var(--thumbWidth)*1.4);
      border-radius: 10px;
      object-fit: cover;
      border: 1px dotted #333333; }
    .work .project-item .project-tag {
      text-transform: uppercase;
      font-size: 11px; }
    .work .project-item ul {
      margin: 0;
      padding: 0;
      display: flex; }
    .work .project-item h3, .work .project-item h4 {
      margin: 0; }
    .work .project-item .project-subtitle {
      color: #666666;
      margin-bottom: 30px; }

.everything:hover {
  text-decoration: underline; }