*,
*::before,
*::after {
  box-sizing:border-box;
}

:root {
  --black:#000;
  --white:#fff;
  --header-height:64px;
}

html,
body {
  width:100%;
  max-width:100%;
  margin:0;
  padding:0;
  overflow-x:hidden;
}

body {
  background:var(--white);
  color:var(--black);
  font-family:"futura-pt-condensed", sans-serif;
}

.project-directory-page {
  padding-top:var(--header-height);
}

.project-directory {
  width:440px;
  max-width:100%;
  height:732px;
  margin:0 auto;
  position:relative;
  overflow:hidden;
}

.project-directory-link {
  position:absolute;
  display:inline-block;
  color:var(--black);
  font-size:clamp(32px, 10vw, 44px);
  font-weight:500;
  line-height:1;
  text-decoration:none;
  white-space:nowrap;
}

.project-directory-link::before {
  content:"";
  position:absolute;
  inset:-14px -18px;
}

.project-directory-link:visited,
.project-directory-link:hover,
.project-directory-link:active {
  color:var(--black);
  text-decoration:none;
}

.project-directory-link:nth-child(1) {
  left:282px;
  top:470px;
}

.project-directory-link:nth-child(2) {
  left:128px;
  top:600px;
  font-size:72px;
}

.project-directory-link:nth-child(3) {
  left:168px;
  top:35px;
}

.project-directory-link:nth-child(4) {
  left:248px;
  top:365px;
}

.project-directory-link:nth-child(5) {
  left:38px;
  top:275px;
}

.project-directory-page .footer {
  display:none;
}