Join the Alliance

<div class="starfield">
  <div class="stars"></div>
</div>
<svg viewBox="0 0 300 200">
  <g id="title" aria-label="join the alliance">
    <path d="M21.995 72.982c-.917 0-1.492.42-1.72 1.261l-8.335 24.43a1.159 1.159 0 0 0-.038.344c0 .152.077.32.23.497a.91.91 0 0 0 .61.23h7.227c.815 0 1.39-.434 1.72-1.3l.956-2.677h9.328l.956 2.677c.33.866.904 1.3 1.72 1.3h7.226a.777.777 0 0 0 .574-.23c.179-.179.268-.344.268-.497a1.13 1.13 0 0 0-.04-.344l-8.333-24.43c-.23-.84-.804-1.261-1.721-1.261zm4.382 4.976c.48.038 1.011.089 1.412.375.288.274.598.516.923.742-.06.173-.315.478-.046.746.252.393.28.897.496 1.325.138.458.443.837.566 1.3.086.426.341.8.39 1.24.14.44.417.808.475 1.269-.417.194-.545.716-.914.956-.161.036-.289.176-.36.34l.233.679c.366.223.556.671.84.99.174.261.502.53.338.87h-6.785c-.152-.009-.39.066-.341-.173.171-.554.471-1.064.794-1.542.469-.255.137-.956.443-1.18.24-.355.491-.826.538-1.262-.265-.97-.664-1.9-1.012-2.843-.148-.354-.228-.798-.652-.869-.252-.15.291-.271.228-.504.047-.438.067-.893.312-1.276.294-.268-.164-.572.196-.763.311.303.655-.26 1.028-.314.288-.095.596-.11.898-.107z" class="letter"/>
    <path class="letter" d="m92.797 72.98-.006.03c-.072.202-.024.25.31.321.92.18 1.23.407 1.623 1.17.215.407.383.813.383.896 0 .095-.335.49-.729.884l-.74.728.072 1.408c.072 1.397.072 1.408-.227 1.624l-.286.214.286.752c.167.418.465 1.027.668 1.35.203.333.394.75.43.942.096.453-.287.836-.848.836-.464 0-.656.238-.656.823a.96.96 0 0 1-.238.608c-.131.132-.24.37-.24.526 0 .215-.095.322-.357.418-.334.107-.36.155-.36.728 0 1.436-1.046 1.992-2.808 1.49v.956c.072.033.125.076.147.133.02.059-.041.27-.147.55v3.61a8.7 8.7 0 0 1 .16.328c.214.477.716 1.325 1.11 1.885 1.037 1.447 1.7 2.64 1.986 3.554h20.104a.99.99 0 0 0 .725-.307.993.993 0 0 0 .306-.726v-5.772a.992.992 0 0 0-.306-.727.992.992 0 0 0-.726-.306H99.397V74.014a.992.992 0 0 0-.306-.727.994.994 0 0 0-.727-.306zm1.163 2.445c-.04.008-.105.09-.201.246-.251.442-.204.561.083.239.119-.132.191-.322.167-.418-.01-.049-.025-.071-.05-.067z"/>
    <path class="letter" d="M150.582 80.819h-6.92v11.087h6.92q.42 0 .726.306.307.306.307.727v5.772q0 .42-.307.726-.306.307-.726.307h-24.24q-.42 0-.726-.307-.306-.305-.306-.726v-5.772q0-.421.306-.727t.727-.306h6.996V80.819h-6.996q-.421 0-.727-.306-.306-.305-.306-.726v-5.772q0-.422.306-.728.306-.305.727-.305h24.239q.42 0 .725.305.307.306.307.727v5.772q0 .422-.307.727-.305.306-.725.306z" />
    <path d="M172.815 72.98c-.918 0-1.492.422-1.72 1.263l-4.463 13.078c.956.02 1.615-.126 1.615-.126.965-.25 3.16-.25 3.16-.25-.058-.221.384-.576.384-.576-.081-.214.273-.958.273-.958.25-.988 1.951-2.527 1.951-2.527 0-.302.605-.633.605-.633.244-.47 1.208-.854 1.208-.854.523-.604.988-.576.988-.576l.36-.028a2.956 2.956 0 0 1 .905-.292l.048-.142.043.128c.63-.067 1.008.143 1.008.143.192.052.795.163.795.163.744-.111 1.401.714 1.401.714.244.08.494.604.494.604.191-.087.767.354.767.354.906.523.959 1.017.959 1.017.19 0 .493.575.493.575.169.052.33.605.33.605.216-.082.355.807.355.807.245-.128.355.982.355.982.302-.082.715.302.715.302.545-.436 2.497-.354 2.497-.354a6.78 6.78 0 0 0 .891-.23l-4.068-11.926c-.23-.841-.804-1.262-1.721-1.262zm17.513 16.4c-.37.648-2.156 1.712-2.156 1.712-.354.575-2.497 1.18-2.497 1.18 0 .22-.413.493-.413.493-.052.134-.383.383-.383.465 0 .081-.302.959-.302.959.656.08 1.371 1.59 1.371 1.59.302.059.633.936.633.936 1.923.385 3.956 2.446 3.956 2.446.23.173.436.369.62.583h1.537a.777.777 0 0 0 .574-.23c.179-.179.268-.345.268-.498a1.162 1.162 0 0 0-.038-.344zm-24.588.554-2.98 8.74a1.162 1.162 0 0 0-.038.342c0 .153.077.32.23.498.178.152.381.23.61.23h2.965c1.569-1.507 4.851-2.825 4.851-2.825l.082-.162c.441-.988 1.18-1.43 1.016-1.593-.168-.168-.22-1.156-.22-1.156-.192-.08-.332-.714-.332-.714-.162-.03-.574-.744-.574-.744-.25.058-1.923-.493-1.923-.493-1.431-.215-2.729-1.184-3.687-2.123z" class="letter"/>
    <path d="M198.315 72.98a.992.992 0 0 0-.727.307.992.992 0 0 0-.305.727V98.71c0 .28.101.522.305.726a.995.995 0 0 0 .727.307h5.875c.381-.304.802-.538 1.215-.658.216-.066.395-.16.395-.207 0-.058.16-.33.348-.603l.31-.456v-.073l-.168-.16a1.601 1.601 0 0 0-.443-.282.69.69 0 0 1-.34-.368c-.056-.15-.16-.301-.225-.33-.076-.028-.207-.188-.292-.357a4.092 4.092 0 0 0-.462-.67c-.405-.47-.518-.932-.547-2.185-.019-.886.01-1.112.199-1.592.244-.632.688-1.244.97-1.33.104-.037.34-.31.536-.612.2-.317.48-.685.772-1.033v-.516l.212.27c.288-.325.574-.62.798-.803.527-.415 1.328-.83 1.837-.923.51-.104 1.159-.037 2.007.179.367.103.895.207 1.177.245.782.094 2.394 1.036 3.232 1.903.556.556.66 1.027.396 1.62-.141.321-.15.463-.066 1.055.085.623.075.718-.085.944-.095.14-.151.32-.122.395.028.085.009.15-.038.15-.057 0-.132.152-.17.33-.047.292-.009.396.321.83.509.669.556.857.282 1.12a3.113 3.113 0 0 1-.405.32c-.17.095-.17.133-.057.5.095.34.095.433-.028.622a.99.99 0 0 0-.152.452.625.625 0 0 1-.187.396c-.151.141-.188.273-.17.716.024.38-.003.53-.106.672.34.29.736.437 1.187.437h6.155c.28 0 .523-.101.727-.305a.994.994 0 0 0 .306-.727V74.014a.992.992 0 0 0-.306-.727.994.994 0 0 0-.727-.306h-7.11a.992.992 0 0 0-.727.306.992.992 0 0 0-.306.727v11.24L206 73.745c-.382-.51-.879-.765-1.49-.765z" class="letter"/>
    <path d="M55.971 72.982a1.15 1.15 0 0 0-.187.017c1.23.39 2.334.956 2.963 1.6.836.849 1.397 1.637 1.529 2.103.06.239.107.967.095 1.6-.011 1.04-.047 1.183-.297 1.421-.383.359-.347.55.226 1.23.597.73 1.17 1.602 1.17 1.805 0 .155-.107.286-.645.74-.274.227-.298.322-.238.729.071.466.035.537-.478.895-.227.155-.227.179-.036.358.25.251.25.43.024.742-.096.119-.179.489-.179.824 0 1.182-.502 1.492-2.39 1.492-.727 0-1.432.06-1.564.12-.12.071-.358.382-.513.693a3.565 3.565 0 0 1-.512.759v3.511a4.378 4.378 0 0 1 .333.746c.143.442.393 1.064.561 1.398.474.957.831 2.076 1.263 3.979h21.202c.28 0 .523-.102.727-.306a.995.995 0 0 0 .306-.727v-5.772a.992.992 0 0 0-.306-.727.994.994 0 0 0-.727-.306H65.261V74.014a.992.992 0 0 0-.305-.727.992.992 0 0 0-.727-.305z" class="letter"/>
    <path d="M272.47 92.592h15.517q.428 0 .739.311t.311.74v5.483q0 .427-.311.738t-.739.311H263.41q-.428 0-.739-.31-.31-.312-.31-.74V74.004q0-.428.31-.739.311-.31.74-.31h24.188q.428 0 .74.31.31.311.31.74v5.482q0 .428-.31.74-.312.31-.74.31H272.47v2.45h12.99q.427 0 .738.312.311.31.311.738v5.056q0 .428-.31.739-.312.311-.74.311H272.47z" class="letter"/>
    <path d="M242.72 72.564c-5.833 0-9.994 1.685-12.483 5.056-1.322 1.815-1.983 4.032-1.983 6.65v4.589c0 2.618.66 4.835 1.983 6.65 1.322 1.789 3.032 3.085 5.132 3.889 2.126.777 4.474 1.166 7.04 1.166 2.567 0 4.797-.298 6.69-.894 1.892-.623 3.409-1.426 4.55-2.411 2.28-1.997 3.421-4.201 3.421-6.612a.735.735 0 0 0-.272-.583.735.735 0 0 0-.583-.272h-8.401c-.008 0-.015.004-.022.004-.246.568-.565 1.138-.766 1.321-.192.173-.364.574-.364.88 0 .44-.173.652-.862 1.092-1.206.766-2.335 1.034-3.962.957-1.149-.057-1.647-.21-2.7-.746-.957-.478-1.282-.746-1.282-1.053 0-.21-.173-.65-.403-.957-.957-1.417-1.283-2.49-1.225-4.06.02-.823.114-1.645.19-1.817.077-.21.003-.383-.266-.536-.344-.173-.402-.383-.402-1.301 0-1.8.861-2.816 1.378-1.629.134.288.25.556.268.594 0 .02.172-.02.344-.077.191-.077.633-.747.978-1.513.918-2.029 1.932-3.54 2.372-3.54.325 0 .365.133.327 1.243l-.039 1.244h1.686l-.078-1.187c-.038-.995 0-1.205.269-1.262.172-.038.516.21.784.573.25.345.86 1.436 1.358 2.431.19.387.4.77.601 1.134.143.204.28.423.4.67.122.192.26.426.339.52.305.37.662.56 1.077.56h8.402a.79.79 0 0 0 .582-.234.858.858 0 0 0 .272-.623c0-2.41-1.14-4.613-3.422-6.61-1.14-.985-2.657-1.776-4.55-2.372-1.892-.622-4.019-.934-6.378-.934z" class="letter"/>
    <path class="line1" d="M121.665 50.502v2.8h-.482v3.645q-.04 1.08-.313 1.485-.273.403-.8.788-.528.384-1.44.592-.885.065-1.438.072-.553.006-1.192.02v-2.8q.508.13 1.146 0 .508-.118.703-.274.196-.156.274-.742v-5.586z"/>
    <path class="line1" d="M134.176 55.255q0 1.543-.644 2.63-.645 1.087-1.869 1.634-1.217.547-2.91.547-1.692 0-2.91-.547-1.21-.553-1.836-1.628-.625-1.08-.625-2.636 0-1.18.358-2.07.358-.9 1.048-1.511.69-.612 1.693-.925 1.003-.32 2.272-.32 1.686 0 2.91.56 1.224.555 1.87 1.642.643 1.08.643 2.624zm-7.454.026q0 .905.404 1.575.41.67 1.608.67.924 0 1.38-.35.462-.352.573-.802.117-.455.156-1.093-.039-.905-.436-1.576-.397-.677-1.673-.677-2.012 0-2.012 2.253z"/>
    <path class="line1" d="M136.142 50.502h3.06v9.4h-3.06z" />
    <path class="line1" d="M141.19 59.859v-9.4h3.06l2.8 3.515v-3.516h3.06v9.4h-3.06l-2.8-3.514v3.515z" />
    <path class="line1" d="M164.148 50.502v2.8h-2.982v6.6h-3.06v-6.6h-2.982v-2.8z" />
    <path class="line1" d="M171.654 53.788v-3.242h3.06v9.401h-3.06v-3.385h-2.46v3.385h-3.06v-9.4h3.06v3.241z" />
    <path class="line1" d="M177.2 59.947v-9.4h8.06v2.799h-5v1.08h3.229v1.64h-3.23v1.082h5.795v2.8z" />
  </g>
  <g id="logo">
    <path d="M118.382 151.265c.389-10.317 5.617-19.832 15.175-26.119.028.01.276-.08.163.135-.758.702-14.369 16.78-1.84 29.472 0 0 6.583 6.329 11.687.324 0 0 5.037-6.52-.063-16.406 0 0-1.292-3.228-5.943-5.23l3.746-4.133s3.166 1.358 5.617 5.042c0 0 .13-3.878-2.84-8.012l5.808-6.59 5.75 6.528s-2.644 3.746-2.839 8.136c0 0 1.806-2.971 5.683-5.104l3.679 4.134s-3.538 1.165-5.908 5.187c-2.037 3.726-3.606 11.696.092 16.584 0 0 4.139 5.869 11.419-.346 0 0 13.385-11.993-1.373-29.334 0 0-.807-.712.099-.325 6.523 4.749 14.333 11.012 15.14 26.642-.319 18.953-13.01 32.482-31.543 32.482-18.153 0-32.26-15.145-31.715-33.067"/>
  </g>
</svg>
<svg id="xwing" viewBox="0 0 79.374997 52.916668">
  <path d="m 73.49162,11.933 c -0.305242,0.68675 -0.381531,1.83135 -0.228931,2.59441 0.152491,1.06826 -1.068285,1.75501 -6.638594,3.43376 -8.317347,2.59439 -12.590475,2.8233 -13.887674,0.76304 -2.36548,-3.81529 -6.791219,-1.75503 -6.028162,2.89963 l 0.381529,2.6707 -1.373504,-2.36548 c -0.839364,-1.29719 -2.518092,-2.89962 -3.815293,-3.51007 -2.136561,-1.06828 -2.594397,-1.06828 -4.730961,0 -1.297199,0.61045 -2.975926,2.21288 -3.738985,3.51007 l -1.373506,2.28917 0.38153,-3.05222 c 0.534139,-4.04421 -0.991975,-5.41771 -4.273128,-3.66268 -1.297198,0.61044 -2.36548,1.52611 -2.36548,1.90764 0,1.44981 -6.485999,0.76306 -13.353524,-1.37351 C 5.8846331,15.9772 5.5794126,15.8246 5.8083228,13.84066 6.1898536,10.71211 3.5191549,11.39887 2.7560914,14.60369 c -0.4578205,1.83135 -0.4578205,1.90766 20.5262776,7.93582 6.257077,1.83135 8.62256,2.89963 8.851477,3.8916 0.228917,0.76306 0.152621,1.52611 -0.07631,1.67873 -0.305223,0.15249 -5.875549,1.90764 -12.361546,3.81529 -6.485989,1.98395 -12.9719823,3.9679 -14.269198,4.34942 -1.9839475,0.61045 -2.5180783,1.22092 -2.5180783,2.67071 0,1.06828 0.5341308,2.06026 1.220884,2.36549 1.526126,0.61045 2.74701,-1.29721 1.678726,-2.5944 C 5.274192,38.02959 5.3505032,37.64807 6.0372554,37.41916 12.82847,35.20627 20.764272,33.14601 22.595613,33.14601 c 1.526116,0 3.052234,0.68676 4.273126,1.90766 3.357457,3.35745 6.180772,1.75504 5.646633,-3.05222 -0.38153,-3.05224 0.228917,-3.43378 1.297199,-0.99198 1.602421,3.58636 11.827402,3.43376 11.827402,-0.15271 0,-0.83938 0.38153,-1.52612 0.76306,-1.52612 0.457835,0 0.610446,0.76305 0.305222,1.83134 -0.534139,2.36548 0.152622,4.73096 1.602424,5.34143 1.526116,0.53412 4.959878,-1.0683 4.959878,-2.36551 0,-1.60241 5.036188,-1.22088 13.124607,1.06829 7.325368,2.06025 7.401656,2.13656 6.943836,4.19682 -0.305222,1.52613 -0.07636,2.13657 0.610442,2.13657 1.678726,0 2.6707,-0.99197 2.74701,-2.82332 0.152702,-1.83134 0.610437,-1.67873 -20.907801,-8.01212 -7.325361,-2.13655 -8.622559,-2.74701 -8.622559,-4.04421 0,-1.75503 -1.068282,-1.29719 18.923851,-7.32534 C 76.08601,16.35865 76.925361,15.97711 76.467542,14.52732 76.23861,13.61163 75.551857,12.46707 74.941416,11.8566 74.102041,10.86463 73.873131,10.94094 73.4916,11.9329 Z"/>
</svg>

body {
  height: 100%;

  background: black;

  background-image: url("img/bg.webp");
  background-size: contain;

  overflow: hidden;
}

svg {
  width: 100%;
  height: 100%;

  position: absolute;
  top: 0;
}

path {
  fill: rgb(255 255 255);
}

#xwing {
  animation: dart 1s forwards;
  transform: scale(4) translateX(-110%);
}

#xwing path {
  fill: rgb(185 185 185);
}

@keyframes dart {
  to {
    transform: scale(0) translateX(110%);
  }
}

.starfield {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 98vh;
  perspective: 200px;
}

.stars {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 2px;
  animation: fly 3s linear infinite;
  box-shadow: -238px 108px hsl(0deg 0% 97%), 193px -376px hsl(0deg 0% 97%),
    -1264px -60px hsl(0deg 0% 98%), 145px -443px hsl(0deg 0% 79%),
    -1440px 37px hsl(0deg 0% 97%), 262px -136px hsl(0deg 0% 81%),
    212px 219px hsl(0deg 0% 89%), 319px 223px hsl(0deg 0% 78%),
    1246px -51px hsl(0deg 0% 79%), 308px 26px hsl(0deg 0% 88%),
    147px 229px hsl(0deg 0% 90%), -1041px 450px hsl(0deg 0% 82%),
    671px 86px white, -921px 234px hsl(0deg 0% 94%),
    -957px 242px hsl(0deg 0% 91%), 1249px -285px hsl(0deg 0% 82%),
    741px 434px hsl(0deg 0% 85%), -1030px 330px hsl(0deg 0% 93%),
    311px -475px hsl(0deg 0% 99%), -413px -105px hsl(0deg 0% 83%),
    868px -435px hsl(0deg 0% 97%), -790px 289px hsl(0deg 0% 86%),
    202px 427px hsl(0deg 0% 99%), -22px -158px hsl(0deg 0% 79%),
    -1294px -297px hsl(0deg 0% 80%), -63px 200px hsl(0deg 0% 94%),
    -592px -86px hsl(0deg 0% 97%), -732px 366px white,
    -1426px -262px hsl(0deg 0% 91%), 475px -400px hsl(0deg 0% 79%),
    -1442px -153px hsl(0deg 0% 97%), 1124px -219px hsl(0deg 0% 93%),
    701px 257px hsl(0deg 0% 94%), 36px -179px hsl(0deg 0% 92%),
    -937px 480px hsl(0deg 0% 97%), -267px -418px hsl(0deg 0% 95%),
    1467px 127px hsl(0deg 0% 81%), -1128px 274px hsl(0deg 0% 82%),
    -180px 430px hsl(0deg 0% 88%), 624px 275px hsl(0deg 0% 98%),
    -473px 150px hsl(0deg 0% 90%), -537px -348px hsl(0deg 0% 83%),
    410px 455px hsl(0deg 0% 92%), 497px -29px hsl(0deg 0% 80%),
    416px -370px whitesmoke, 977px 82px hsl(0deg 0% 76%),
    1209px -222px hsl(0deg 0% 94%), 637px 360px hsl(0deg 0% 99%),
    -1049px 409px white, 959px 407px hsl(0deg 0% 79%),
    -1153px -168px hsl(0deg 0% 87%), -437px -216px hsl(0deg 0% 86%),
    -572px 420px hsl(0deg 0% 99%), -228px 78px hsl(0deg 0% 86%),
    -925px 452px hsl(0deg 0% 80%), 244px 30px hsl(0deg 0% 77%),
    453px -336px hsl(0deg 0% 87%), 993px -63px hsl(0deg 0% 76%),
    670px -343px hsl(0deg 0% 85%), -1088px 344px hsl(0deg 0% 99%),
    -170px -153px hsl(0deg 0% 77%), 987px -208px hsl(0deg 0% 82%),
    596px 166px hsl(0deg 0% 99%), -1362px -28px hsl(0deg 0% 77%),
    1291px -106px hsl(0deg 0% 89%), -1128px 169px hsl(0deg 0% 93%),
    1056px 367px hsl(0deg 0% 92%), 261px -128px hsl(0deg 0% 80%),
    1017px 401px hsl(0deg 0% 80%), 1381px 245px hsl(0deg 0% 89%),
    536px -113px hsl(0deg 0% 98%), -92px -217px hsl(0deg 0% 89%),
    1481px 268px hsl(0deg 0% 82%), 832px -345px hsl(0deg 0% 80%),
    -863px 138px hsl(0deg 0% 94%), -997px -412px hsl(0deg 0% 89%),
    -330px -260px hsl(0deg 0% 85%), 691px -39px hsl(0deg 0% 99%),
    -468px -135px hsl(0deg 0% 84%), -535px 405px hsl(0deg 0% 91%),
    -1289px -284px hsl(0deg 0% 89%), 823px -225px hsl(0deg 0% 80%),
    -1172px -348px white, 505px -319px hsl(0deg 0% 93%),
    94px -45px hsl(0deg 0% 93%), -687px -64px hsl(0deg 0% 78%),
    -1133px -456px hsl(0deg 0% 95%), 1357px 135px hsl(0deg 0% 88%),
    -919px -249px whitesmoke, 206px 32px white, 1453px -338px hsl(0deg 0% 80%),
    -764px 83px hsl(0deg 0% 91%), 726px 85px hsl(0deg 0% 98%),
    205px 103px hsl(0deg 0% 89%), 85px 116px hsl(0deg 0% 82%),
    1104px -121px hsl(0deg 0% 94%), 649px -304px hsl(0deg 0% 86%),
    -313px 313px whitesmoke, 491px -419px hsl(0deg 0% 79%),
    -1405px 397px hsl(0deg 0% 81%), 30px -81px hsl(0deg 0% 90%);
  transform-style: preserve-3d;
}

.stars::before,
.stars::after {
  position: absolute;
  width: inherit;
  height: inherit;
  box-shadow: inherit;
  content: "";
}

.stars::before {
  animation: fade1 3s linear infinite;
  transform: translateZ(-300px);
}

.stars::after {
  animation: fade2 3s linear infinite;
  transform: translateZ(-600px);
}

@keyframes fly {
  from {
    transform: translateZ(0);
  }

  to {
    transform: translateZ(300px);
  }
}

@keyframes fade1 {
  from {
    opacity: 0.5;
  }

  to {
    opacity: 1;
  }
}

@keyframes fade2 {
  from {
    opacity: 0;
  }

  to {
    opacity: 0.5;
  }
}