@font-face {
  font-family: "Inter";
  src: url("./fonts/Inter-VariableFont_opsz,wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Tilt Warp";
  src: url("./fonts/TiltWarp-Regular-VariableFont_XROT,YROT.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  min-height: 100%;
}

body {
  background: #111;
  font-family: Inter, system-ui, sans-serif;
  overflow-x: auto;
}

.artboard-contributions {
  position: relative;
  width: 1440px;
  height: 2600px;
  margin: 0 auto;
  background: #f5641f;
  overflow: hidden;
}

.top-meta {
  position: absolute;
  left: 0;
  top: 0;
  width: 1440px;
  height: 275px;
  z-index: 10;
}

.top-meta__dot {
  position: absolute;
  width: 24px;
  height: 50px;
  border-radius: 0 24px 24px 0;
  background: #382eed;
}

.top-meta__dot--left {
  left: 10px;
  top: 27px;
}

.top-meta__dot--right {
  left: 42px;
  top: 27px;
}

.top-meta__home-link {
  position: absolute;
  left: 6px;
  top: 21px;
  width: 72px;
  height: 62px;
  z-index: 5;
  cursor: pointer;
}

.top-meta__home-link:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

.asset {
  position: absolute;
  display: block;
}

.asset {
  object-fit: cover;
}

.r20 {
  left: 0;
  top: 0;
  width: 365px;
  height: 663px;
}

.r22 {
  left: 365px;
  top: 663px;
  width: 358px;
  height: 548px;
}

.r23 {
  left: 723px;
  top: 663px;
  width: 359px;
  height: 548px;
}

.r24 {
  left: 1082px;
  top: 663px;
  width: 358px;
  height: 548px;
}

.r21 {
  left: 1095px;
  top: 0;
  width: 345px;
  height: 341px;
}

.r25 {
  left: 0;
  top: 1580px;
  width: 345px;
  height: 518px;
}

.r26 {
  left: 723px;
  top: 1580px;
  width: 361px;
  height: 341px;
}

.r27 {
  left: 1084px;
  top: 1580px;
  width: 356px;
  height: 341px;
}

.r28 {
  left: 345px;
  top: 2098px;
  width: 383px;
  height: 547px;
  object-fit: contain;
}

.title,
.vertical {
  position: absolute;
  margin: 0;
  font-family: "Tilt Warp", cursive;
  font-weight: 400;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
}

.title-main {
  left: 390px;
  top: 0;
  font-size: 300px;
}

.title-sub {
  left: 407px;
  top: 245px;
  font-size: 160.552px;
}

.vertical {
  transform: rotate(-90deg);
  transform-origin: left top;
}

.type {
  left: 379px;
  top: 674px;
  font-size: 300px;
  transform: rotate(90deg);
}

.symmetry {
  left: 575px !important;
  top: 1411px !important;
  font-size: 130px;
  transform: rotate(90deg) !important;
  z-index: 6;
}

.content {
  left: 245px !important;
  top: 2115px !important;
  display: block;
  font-size: 130px;
  transform: rotate(90deg) !important;
  z-index: 6;
}

.copy {
  position: absolute;
  margin: 0;
  color: #fff;
  font: 400 12px/1.2 Inter, sans-serif;
}

.copy-tr {
  left: 1127px;
  top: 360px;
  width: 280px;
}

.copy-lm {
  left: 365px;
  top: 1240px;
  width: 280px;
}

.copy-mm {
  left: 728px;
  top: 1935px;
  width: 280px;
}

.copy-rm {
  left: 1096px;
  top: 1240px;
  width: 280px;
}

.copy-ml {
  left: 730px;
  top: 1240px;
  width: 280px;
}

.copy-rl {
  left: 1095px;
  top: 1935px;
  width: 305px;
}