@font-face {
  font-family: 'VGA';
  src: url('assets/ter-u32n.woff2') format('truetype');
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: 2rem;
  font-family: 'VGA', monospace;
  text-align: center;
}

#bg, #overlay, #noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

#bg {
  background-image: var(--bg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 0;
}

#overlay {
  background: rgba(0, 0, 0, 0.893);
  backdrop-filter: grayscale(100%);
  z-index: 1;
}

#noise {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.08;
  z-index: 2;
}

#logo {
  position: relative;
  z-index: 3;
  width: min(600px, 80vw, 70vh);
  aspect-ratio: 1;
  background-image: var(--bg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 135'%3E%3Cg transform='translate(-54.999968,-112.26486)'%3E%3Cg transform='matrix(0.35718727,0,0,0.35718727,54.999968,-172.2676)' fill='%23fff'%3E%3Cpath d='m273.90306,1086.3191 28.45915,36.2006V848.61663Z'/%3E%3Cpath d='m47.131404,1086.3191 28.459147,36.2006v-95.6262z'/%3E%3Cpath d='m151.1811,967.46786v155.05184l-28.45915-36.2006z'/%3E%3Cpath d='M198.31251,1086.3191 226.77165,908.04224V1122.5197Z'/%3E%3Cpath d='M0,1122.52H377.953'/%3E%3Cpath d='M0,848.617H377.953'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 135'%3E%3Cg transform='translate(-54.999968,-112.26486)'%3E%3Cg transform='matrix(0.35718727,0,0,0.35718727,54.999968,-172.2676)' fill='%23fff'%3E%3Cpath d='m273.90306,1086.3191 28.45915,36.2006V848.61663Z'/%3E%3Cpath d='m47.131404,1086.3191 28.459147,36.2006v-95.6262z'/%3E%3Cpath d='m151.1811,967.46786v155.05184l-28.45915-36.2006z'/%3E%3Cpath d='M198.31251,1086.3191 226.77165,908.04224V1122.5197Z'/%3E%3Cpath d='M0,1122.52H377.953'/%3E%3Cpath d='M0,848.617H377.953'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
}

#contact {
  position: relative;
  z-index: 3;
  color: #fff;
  font-size: 2rem;
  text-decoration: none;
  -webkit-font-smoothing: none;
  font-smooth: never;
}

#contact:hover {
  text-decoration: underline;
}