:root {
  --text-color: #22333b;
  --bg-color: #e6e8e6;
  --font-size: 16px;
  --font-size-medium: 20px;
  --font-size-big: 40px;
  --bold-weight: 600;
  --black-weight: 900;
  --reg-weight: 300;
  --hover-color: #fc0c3a;
}

body {
  padding: 20px;

  max-width: 600px;
  margin: auto;
  background-color: var(--bg-color);

  font-family: 'Inter', sans-serif;
  font-optical-sizing: auto;
  font-weight: var(--reg-weight);

  p {
    color: var(--text-color);
  }
}

.bio {
  margin-top: 15%;
  margin-bottom: 15%;
}

.bio-name,
.selected-work {
  font-size: var(--font-size-big);
  font-weight: var(--black-weight);
  font-style: italic;
  margin-bottom: 20px;
}

.bio-text {
  font-size: var(--font-size-medium);
  font-weight: var(--red-weight);
  margin-top: 0;
  line-height: 1.6em;
}

.link {
  color: var(--text-color);
}
.link:hover {
  color: var(--hover-color);
}

.date {
  font-size: var(--font-size);
  margin-top: 0;
  margin-bottom: 0;
  display: none;
}
.hed-meta {
  margin-top: 0;
}
.hed {
  font-weight: var(--bold-weight);
  font-size: var(--font-size);
  margin-bottom: 6px;
  margin-top: 4px;
  line-height: 1.3em;
}
/*
.hed:hover,
.dek:hover {
  color: var(--hover-color);
}*/
.publisher {
  margin-top: 10px;
  font-size: var(--font-size);
  font-weight: var(--red-weight);
  line-height: 1.3em;
}

.dek {
  margin-top: 6px;
  font-size: var(--font-size);
  color: #353535;
  display: none;
}

.project-item {
  margin-bottom: 16px;
}

.project-item img {
  height: auto;
  align-self: center;
  border: 0.5px #22333b2a solid;
  border-radius: 2px;
  width: 250px;
  pointer-events: all;
  cursor: pointer;
}

.project-img-meta {
  display: flex;
  gap: 20px;
  align-self: center;
}
.project-img-meta:hover {
  .hed,
  .dek,
  .publisher {
    color: var(--hover-color);
  }
  .hover-box {
    background-color: black;
    opacity: 0.2;
  }
}

.container {
  position: relative;
  height: auto;
}
.hover-box {
  width: 100%;
  height: calc(100% - 4px);
  position: absolute;
  top: 0;
  opacity: 0;

  /* background-color: red;
  height: 200px;
  align-self: center;
  position: absolute;
  width: 300px;
  opacity: 0.5;*/
}

.meta-data-small {
  display: flex;
  gap: 20px;
}

a.project-link {
  text-decoration: none !important;
}

.link {
  white-space: nowrap;
}

footer {
  margin-top: 150px;
  border-top: 0.5px solid var(--text-color);
}

@media only screen and (max-width: 550px) {
  .project-img-meta {
    display: block;
  }
  .container {
    width: 100%;
  }

  .project-img {
    width: 100% !important;
  }
  .hed {
    margin-bottom: 5px;
  }
  .publisher {
    margin-top: 0;
  }
  .project-item {
    margin-bottom: 36px;
  }

  .project-img-meta:hover {
    .hed,
    .dek,
    .publisher {
      color: var(--text-color);
    }
    .hover-box {
      background-color: black;
      opacity: 0;
    }
  }
}