@font-face {
  font-family: 'Berkeley Mono';
  src: url('https://hyperclay.com/public/fonts/BerkeleyMonoVariable-Regular.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

body {
  font-size: 19px;
  font-family: "Berkeley Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 100;
  color: #fff;
}

[name="contact-me-by-fax-only"] {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 0;
  width: 0;
  z-index: -1;
}

[contenteditable]:focus {
  outline: 1px solid #fff;
}

/* button border slide */
.slide-left {
  display: block;
  position: relative;
  height: 10px;
  animation: slideLeft 1.5s linear infinite;
}

.hover-slide-left:hover .slide-left {
  animation-play-state: paused;
}

@keyframes slideLeft {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-11px);
  }
}

.web {
  overflow: hidden;
}

.web.web--entangling {
  overflow: visible;
}

.web [class*="connection--"] {
  opacity: 1;
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
}

.web.web--entangling [class*="connection--"] {
  animation: reveal-hide-connection .75s linear 1s forwards;
}

@keyframes reveal-hide-connection {
  30% { stroke-dashoffset: 0; }
  50% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 30; }
}

.web [class*='line--'] {
  display: none;
}

.web.web--entangling [class*='line--'] {
  display: block;
}

.web.web--entangling .line--top-left {
  stroke-dasharray: 130.05311584472656;
  stroke-dashoffset: 130.05311584472656;
  animation: dash2 2.5s ease-in-out forwards;
}

.web.web--entangling .line--top-right {
  stroke-dasharray: 130.04995727539062;
  stroke-dashoffset: 130.04995727539062;
  animation: dash2 2.5s ease-in-out forwards;
}

.web.web--entangling .line--bottom-left {
  stroke-dasharray: 130.15782165527344;
  stroke-dashoffset: 130.15782165527344;
  animation: dash2 2.5s ease-in-out forwards;
}

.web.web--entangling .line--bottom-right {
  stroke-dasharray: 130.00970458984375;
  stroke-dashoffset: 130.00970458984375;
  animation: dash2 2.5s ease-in-out forwards;
}

.web.web--entangling .line--right-top {
  stroke-dasharray: 155.4753875732422;
  stroke-dashoffset: 155.4753875732422;
  animation: dash1 2.5s ease-in-out forwards;
}

.web.web--entangling .line--right-bottom {
  stroke-dasharray: 155.43792724609375;
  stroke-dashoffset: 155.43792724609375;
  animation: dash1 2.5s ease-in-out forwards;
}

.web.web--entangling .line--left-top {
  stroke-dasharray: 155.42050170898438;
  stroke-dashoffset: 155.42050170898438;
  animation: dash1 2.5s ease-in-out forwards;
}

.web.web--entangling .line--left-bottom {
  stroke-dasharray: 155.46189880371094;
  stroke-dashoffset: 155.46189880371094;
  animation: dash1 2.5s ease-in-out forwards;
}

@keyframes dash1 {
  30% { stroke-dashoffset: 0; }
  70% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 155.45; }
}

@keyframes dash2 {
  30% { stroke-dashoffset: 0; }
  70% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 130.01; }
}