codepens/super-smash-bros-credits/dist/style.css

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

:root {
  font-size: calc(16px + (20 - 16) * (100vw - 320px) / (1280 - 320));
}

body {
  background-color: black;
  color: white;
  font: 1em/1.5 sans-serif;
  display: flex;
  height: 100vh;
  transition: background-color var(--trans-dur), color var(--trans-dur);
}

.credits {
  --crosshairsX: 0;
  --crosshairsY: 0;
  --hitVisibility: visible;
  aspect-ratio: 4/3;
  margin: auto;
  max-width: 100vw;
  max-height: 100vh;
  min-height: 33em;
  object-fit: contain;
  overflow: hidden;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  /* Name selection */
  /* Name rotation */
}
.credits__crosshairs {
  animation: crosshairsEnter 0.5s linear;
  color: rgba(204, 24, 0, 0.7);
  top: calc(50% - 1.875em);
  left: calc(50% - 1.875em);
  width: 3.75em;
  height: 3.75em;
  transform: translate(var(--crosshairsX), var(--crosshairsY));
}
.credits__crosshairs, .credits__crosshairs-top, .credits__crosshairs-right, .credits__crosshairs-bottom, .credits__crosshairs-left {
  position: absolute;
}
.credits__crosshairs-top, .credits__crosshairs-right, .credits__crosshairs-bottom, .credits__crosshairs-left {
  border: 0.75em solid transparent;
  width: 0;
  height: 0;
}
.credits__crosshairs-top {
  border-top: 1.25em solid currentColor;
  top: 0;
  left: calc(50% - 0.75em);
}
.credits__crosshairs-right {
  border-right: 1.25em solid currentColor;
  top: calc(50% - 0.75em);
  right: 0;
}
.credits__crosshairs-bottom {
  border-bottom: 1.25em solid currentColor;
  left: calc(50% - 0.75em);
  bottom: 0;
}
.credits__crosshairs-left {
  border-left: 1.25em solid currentColor;
  top: calc(50% - 0.75em);
  left: 0;
}
.credits__heading, .credits__name {
  display: inline-block;
  padding: 0 1rem 0 0.75rem;
  white-space: nowrap;
}
.credits__heading, .credits__name-box {
  animation: 4s nameRotate cubic-bezier(0.15, 0.6, 1, 1);
  font-size: 2em;
  line-height: 1;
  position: absolute;
  top: 57.5%;
  left: calc(50% - 22rem);
  visibility: hidden;
}
.credits__heading, .credits__name-text {
  font-family: Cabin, sans-serif;
  font-weight: 700;
}
.credits__heading {
  color: #8b8b8d;
}
.credits__hit {
  display: none;
  pointer-events: none;
  position: absolute;
  top: calc(50% - 2.4em);
  left: calc(50% - 3.2em);
  width: 32em;
  height: 24em;
  transform: translate3d(var(--crosshairsX), var(--crosshairsY), 0);
  z-index: 2;
}
.credits__hit-rect {
  box-shadow: 0 0 0 0.25em rgba(204, 24, 0, 0.7) inset;
  width: 0;
  height: 0;
  transform: translate(-8.7em, -6.6em);
}
.credits__input {
  position: fixed;
  top: -1.5em;
  left: -1.5em;
}
.credits__name {
  cursor: pointer;
  position: relative;
  -webkit-tap-highlight-color: #0000;
}
.credits__name:before, .credits__name:after {
  background-color: #000;
  content: "";
  display: block;
  position: absolute;
}
.credits__name:before {
  top: -0.25rem;
  right: 0.5rem;
  bottom: -0.25rem;
  left: 0.5rem;
}
.credits__name:after {
  top: 0.75rem;
  right: -0.25rem;
  bottom: 0.75rem;
  left: -0.25rem;
}
.credits__name-border {
  background-image: linear-gradient(0deg, red 50%, white 50%);
  background-size: 2px 16px;
  display: none;
  position: absolute;
  top: 4px;
  left: 0;
  width: 2px;
  height: calc(100% - 8px);
  z-index: -1;
}
.credits__name-border:nth-child(even) {
  background-image: linear-gradient(90deg, red 50%, white 50%);
  background-size: 16px 2px;
  width: 100%;
  height: 2px;
}
.credits__name-border:nth-child(3) {
  right: 0;
  left: auto;
}
.credits__name-border:nth-child(4) {
  top: auto;
  bottom: 4px;
}
.credits__name-text {
  color: #838de2;
  display: block;
  position: relative;
  z-index: 1;
}
.credits__role {
  color: #bfc1e8;
}
.credits__roles, .credits__role-box {
  position: relative;
  margin-top: 1.25em;
  width: 17em;
  height: 9.25em;
}
.credits__role-box, .credits__wrapper {
  animation: roleBoxEnter 84s steps(1, end);
  visibility: hidden;
}
.credits__role-box {
  box-shadow: 0 0 0 0.25em #4b4644;
}
.credits__role-box-left, .credits__role-box-right {
  stroke: #635e40;
  position: absolute;
  top: -0.5em;
  right: 17.375em;
  width: 1.5em;
  height: 10.75em;
}
.credits__role-box-right {
  right: -2.125em;
}
.credits__roles, .credits__staff-list {
  list-style: none;
}
.credits__roles {
  font-family: Orbitron, sans-serif;
  font-weight: 500;
  display: none;
  flex-direction: column;
  padding: 0 0.375em 0.25em 0.375em;
  z-index: 1;
}
.credits__staff-entry {
  display: block;
}
.credits__org {
  color: #874a86;
  margin-top: auto;
}
.credits__ui, .credits__wrapper {
  display: flex;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.credits__ui {
  pointer-events: none;
  z-index: 3;
}
.credits__input:checked ~ .credits__hit {
  display: block;
  visibility: var(--hitVisibility);
}
.credits__input:checked ~ .credits__hit .credits__hit-rect {
  animation: nameHit 0.12s steps(1, end) 3;
}
.credits__input:checked ~ .credits__roles {
  display: flex;
}
.credits__input:checked + .credits__name-box .credits__name-border {
  display: block;
}
.credits__input:checked + .credits__name-box .credits__name-border:nth-child(2) {
  animation: nameSelect1 0.2s linear infinite;
}
.credits__input:checked + .credits__name-box .credits__name-border:nth-child(3) {
  animation: nameSelect2 0.2s linear infinite;
}
.credits__input:checked + .credits__name-box .credits__name-border:nth-child(4) {
  animation: nameSelect3 0.2s linear infinite;
}
.credits__input:checked + .credits__name-box .credits__name-border:nth-child(5) {
  animation: nameSelect4 0.2s linear infinite;
}
.credits__heading--delay1 {
  animation-delay: 2.5s;
}
.credits__name-box--delay2 {
  animation-delay: 3.18s;
}
.credits__heading--delay3 {
  animation-delay: 4.54s;
}
.credits__name-box--delay4 {
  animation-delay: 5.22s;
}
.credits__heading--delay5 {
  animation-delay: 6.58s;
}
.credits__name-box--delay6 {
  animation-delay: 7.26s;
}
.credits__name-box--delay7 {
  animation-delay: 7.94s;
}
.credits__name-box--delay8 {
  animation-delay: 8.62s;
}
.credits__name-box--delay9 {
  animation-delay: 9.3s;
}
.credits__name-box--delay10 {
  animation-delay: 9.98s;
}
.credits__heading--delay11 {
  animation-delay: 11.34s;
}
.credits__name-box--delay12 {
  animation-delay: 12.02s;
}
.credits__heading--delay13 {
  animation-delay: 13.38s;
}
.credits__name-box--delay14 {
  animation-delay: 14.06s;
}
.credits__name-box--delay15 {
  animation-delay: 14.74s;
}
.credits__name-box--delay16 {
  animation-delay: 15.42s;
}
.credits__name-box--delay17 {
  animation-delay: 16.1s;
}
.credits__name-box--delay18 {
  animation-delay: 16.78s;
}
.credits__name-box--delay19 {
  animation-delay: 17.46s;
}
.credits__name-box--delay20 {
  animation-delay: 18.14s;
}
.credits__name-box--delay21 {
  animation-delay: 18.82s;
}
.credits__name-box--delay22 {
  animation-delay: 19.5s;
}
.credits__name-box--delay23 {
  animation-delay: 20.18s;
}
.credits__name-box--delay24 {
  animation-delay: 20.86s;
}
.credits__name-box--delay25 {
  animation-delay: 21.54s;
}
.credits__name-box--delay26 {
  animation-delay: 22.22s;
}
.credits__name-box--delay27 {
  animation-delay: 22.9s;
}
.credits__name-box--delay28 {
  animation-delay: 23.58s;
}
.credits__name-box--delay29 {
  animation-delay: 24.26s;
}
.credits__name-box--delay30 {
  animation-delay: 24.94s;
}
.credits__name-box--delay31 {
  animation-delay: 25.62s;
}
.credits__name-box--delay32 {
  animation-delay: 26.3s;
}
.credits__heading--delay33 {
  animation-delay: 27.66s;
}
.credits__name-box--delay34 {
  animation-delay: 28.34s;
}
.credits__heading--delay35 {
  animation-delay: 29.7s;
}
.credits__name-box--delay36 {
  animation-delay: 30.38s;
}
.credits__heading--delay37 {
  animation-delay: 31.74s;
}
.credits__name-box--delay38 {
  animation-delay: 32.42s;
}
.credits__name-box--delay39 {
  animation-delay: 33.1s;
}
.credits__name-box--delay40 {
  animation-delay: 33.78s;
}
.credits__name-box--delay41 {
  animation-delay: 34.46s;
}
.credits__name-box--delay42 {
  animation-delay: 35.14s;
}
.credits__name-box--delay43 {
  animation-delay: 35.82s;
}
.credits__name-box--delay44 {
  animation-delay: 36.5s;
}
.credits__name-box--delay45 {
  animation-delay: 37.18s;
}
.credits__name-box--delay46 {
  animation-delay: 37.86s;
}
.credits__heading--delay47 {
  animation-delay: 39.22s;
}
.credits__name-box--delay48 {
  animation-delay: 39.9s;
}
.credits__name-box--delay49 {
  animation-delay: 40.58s;
}
.credits__name-box--delay50 {
  animation-delay: 41.26s;
}
.credits__name-box--delay51 {
  animation-delay: 41.94s;
}
.credits__name-box--delay52 {
  animation-delay: 42.62s;
}
.credits__name-box--delay53 {
  animation-delay: 43.3s;
}
.credits__name-box--delay54 {
  animation-delay: 43.98s;
}
.credits__name-box--delay55 {
  animation-delay: 44.66s;
}
.credits__name-box--delay56 {
  animation-delay: 45.34s;
}
.credits__name-box--delay57 {
  animation-delay: 46.02s;
}
.credits__name-box--delay58 {
  animation-delay: 46.7s;
}
.credits__name-box--delay59 {
  animation-delay: 47.38s;
}
.credits__name-box--delay60 {
  animation-delay: 48.06s;
}
.credits__name-box--delay61 {
  animation-delay: 48.74s;
}
.credits__name-box--delay62 {
  animation-delay: 49.42s;
}
.credits__name-box--delay63 {
  animation-delay: 50.1s;
}
.credits__name-box--delay64 {
  animation-delay: 50.78s;
}
.credits__name-box--delay65 {
  animation-delay: 51.46s;
}
.credits__heading--delay66 {
  animation-delay: 52.82s;
}
.credits__name-box--delay67 {
  animation-delay: 53.5s;
}
.credits__name-box--delay68 {
  animation-delay: 54.18s;
}
.credits__name-box--delay69 {
  animation-delay: 54.86s;
}
.credits__heading--delay70 {
  animation-delay: 56.22s;
}
.credits__name-box--delay71 {
  animation-delay: 56.9s;
}
.credits__name-box--delay72 {
  animation-delay: 57.58s;
}
.credits__name-box--delay73 {
  animation-delay: 58.26s;
}
.credits__name-box--delay74 {
  animation-delay: 58.94s;
}
.credits__name-box--delay75 {
  animation-delay: 59.62s;
}
.credits__name-box--delay76 {
  animation-delay: 60.3s;
}
.credits__name-box--delay77 {
  animation-delay: 60.98s;
}
.credits__name-box--delay78 {
  animation-delay: 61.66s;
}
.credits__name-box--delay79 {
  animation-delay: 62.34s;
}
.credits__name-box--delay80 {
  animation-delay: 63.02s;
}
.credits__name-box--delay81 {
  animation-delay: 63.7s;
}
.credits__name-box--delay82 {
  animation-delay: 64.38s;
}
.credits__name-box--delay83 {
  animation-delay: 65.06s;
}
.credits__name-box--delay84 {
  animation-delay: 65.74s;
}
.credits__name-box--delay85 {
  animation-delay: 66.42s;
}
.credits__name-box--delay86 {
  animation-delay: 67.1s;
}
.credits__heading--delay87 {
  animation-delay: 68.46s;
}
.credits__name-box--delay88 {
  animation-delay: 69.14s;
}
.credits__heading--delay89 {
  animation-delay: 70.5s;
}
.credits__name-box--delay90 {
  animation-delay: 71.18s;
}
.credits__heading--delay91 {
  animation-delay: 72.54s;
}
.credits__name-box--delay92 {
  animation-delay: 73.22s;
}
.credits__name-box--delay93 {
  animation-delay: 73.9s;
}
.credits__name-box--delay94 {
  animation-delay: 74.58s;
}
.credits__name-box--delay95 {
  animation-delay: 75.26s;
}
.credits__heading--delay96 {
  animation-delay: 76.62s;
}
.credits__name-box--delay97 {
  animation-delay: 77.3s;
}
.credits__heading--delay98 {
  animation-delay: 78.66s;
}
.credits__name-box--delay99 {
  animation-delay: 79.34s;
}
.credits__name-box--delay100 {
  animation-delay: 80.02s;
}

/* Beyond Smaller Mobile */
@media (min-width: 375px) {
  .credits__roles, .credits__role-box {
    margin-right: 3em;
  }
  .credits__ui, .credits__wrapper {
    justify-content: flex-end;
  }
}
/* Animations */
@keyframes crosshairsEnter {
  from {
    transform: translateY(-20.25em);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes nameHit {
  from {
    width: 100%;
    height: 100%;
    transform: translate(-8.7em, -6.6em);
  }
  33% {
    width: 60%;
    height: 60%;
    transform: translate(-4.35em, -3.3em);
  }
  67% {
    width: 20%;
    height: 20%;
    transform: translate(0, 0);
  }
  to {
    width: 0;
    height: 0;
    transform: translate(0, 0);
  }
}
@keyframes nameRotate {
  from {
    transform: translateX(-50%) rotateX(65deg) rotateZ(0) translateY(12.5em) rotateZ(0) rotateX(-65deg) rotateZ(20deg) scale(2);
    visibility: visible;
  }
  to {
    transform: translateX(-50%) rotateX(65deg) rotateZ(-185deg) translateY(13em) rotateZ(185deg) rotateX(-65deg) rotateZ(-18deg) scale(0.6);
    visibility: visible;
  }
}
@keyframes nameSelect1 {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 16px 0;
  }
}
@keyframes nameSelect2 {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 16px;
  }
}
@keyframes nameSelect3 {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -16px 0;
  }
}
@keyframes nameSelect4 {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 -16px;
  }
}
@keyframes roleBoxEnter {
  from {
    visibility: hidden;
  }
  2.9761904762%, to {
    visibility: visible;
  }
}