@font-face {
  font-family:                    "unknown";
  src:                            url("./a.woff2");
}

@font-face {
  font-family:                    "main";
  src:                            url("./m.woff2");
}

@font-face {
  font-family:                    "icon";
  src:                            url("./n.woff2");
}

:root {
  --white:                        #FFFFFF;
  --whiteRgba:                    rgba(255, 255, 255, 1);
  --whiteRgba8:                   rgba(255, 255, 255, .8);
  --whiteRgba6:                   rgba(255, 255, 255, .6);
  --whiteRgba4:                   rgba(255, 255, 255, .4);
  --whiteRgba2:                   rgba(255, 255, 255, .2);
  
  --carbonBlack:                  #181F1C;
  --carbonBlackRgba:              rgba(24, 31, 28, 1);
  --carbonBlackRgba8:             rgba(24, 31, 28, .8);
  --carbonBlackRgba6:             rgba(24, 31, 28, .6);
  --carbonBlackRgba4:             rgba(24, 31, 28, .4);
  --carbonBlackRgba2:             rgba(24, 31, 28, .2);
  
  --darkSpruce:                   #274029;
  --darkSpruceRgba:               rgba(39, 64, 41, 1);
  --darkSpruceRgba8:              rgba(39, 64, 41, .8);
  --darkSpruceRgba6:              rgba(39, 64, 41, .6);
  --darkSpruceRgba4:              rgba(39, 64, 41, .4);
  --darkSpruceRgba2:              rgba(39, 64, 41, .2);
  
  --hunterGreen:                  #315C2B;
  --hunterGreenRgba:              rgba(49, 92, 43, 1);
  --hunterGreenRgba8:             rgba(49, 92, 43, .8);
  --hunterGreenRgba6:             rgba(49, 92, 43, .6);
  --hunterGreenRgba4:             rgba(49, 92, 43, .4);
  --hunterGreenRgba2:             rgba(49, 92, 43, .2);
  
  --fern:                         #60712F;
  --fernRgba:                     rgba(96, 113, 47, 1);
  --fernRgba8:                    rgba(96, 113, 47, .8);
  --fernRgba6:                    rgba(96, 113, 47, .6);
  --fernRgba4:                    rgba(96, 113, 47, .4);
  --fernRgba2:                    rgba(96, 113, 47, .2);
  
  --limeMoss:                     #9EA93F;
  --limeMossRgba:                 rgba(158, 169, 63, 1);
  --limeMossRgba8:                rgba(158, 169, 63, .8);
  --limeMossRgba6:                rgba(158, 169, 63, .6);
  --limeMossRgba4:                rgba(158, 169, 63, .4);
  --limeMossRgba2:                rgba(158, 169, 63, .2);
}

body {
  margin:                         0;
  padding:                        0;
  background-color:               var(--carbonBlack);
  font-family:                    "main", Arial;
  color:                          var(--whiteRgba);
  text-shadow:                    1px 1px 1px var(--carbonBlack);
  font-size:                      1em;
}

.textDumpContainer {
  position:                       absolute;
  top:                            0;
  left:                           0;
  font-family:                    "unknown", Arial;
  width:                          100vw;
  height:                         100vh;
  overflow:                       hidden;
}

.textDumpFall {
  width:                          100vw;
  height:                         100vh;
  text-align:                     center;
  letter-spacing:                 1em;
  line-height:                    2em;
  transform:                      scale(1.5);
  opacity:                        .2;
  background-image:               url("./b.svg");
  background-position:            center bottom;
  background-size:                cover;
  background-repeat:              no-repeat;
}

.textDump {
  width:                          100vw;
  height:                         100vh;
  color:                          var(--whiteRgba);
  display:                        block;
  transform:                      scale(1.5);
  line-height:                    1em;
  font-size:                      1vw;
}

.textDumpTwo {
  transform:                      scale(2.5);
}

.textDumpThree {
  display: grid;
  align-items:                    center;
  justify-items:                  center;
  width:                          100vw;
  height:                         100vh;
  line-height:                    2em;
  overflow:                       scroll;
  text-align:                     center;
}

.textDump span {
  display:                        inline-block;
  width:                          10vw;
  height:                         10vw;
  opacity:                        .2;
  animation:                      charGlow 1.8s ease-in-out infinite alternate;
}

.textDump span:nth-child(odd) {
  animation-delay:                0.12s;
  animation-duration:             1.7s;
}

.textDump span:nth-child(even) {
  animation-delay:                0.19s;
  animation-duration:             2.8s;
}

.logoText span {
  font-family:                    "main", Arial;
  font-size:                      2em;
  color:                          var(--white);
  -webkit-text-stroke:            1.5px var(--fern);
  text-shadow:
                                  0 0 4px var(--limeMoss),
                                  0 0 12px var(--limeMoss),
                                  0 0 24px var(--hunterGreen),
                                  0 0 48px var(--hunterGreen),
                                  0 0 80px var(--darkSpruce);
  will-change:                    opacity, text-shadow;
}

.logoText span:nth-child(1)  { 
  animation:                      lFlicker 2.8s ease-in-out 0.1s infinite alternate; 
}

.logoText span:nth-child(2)  { 
  animation:                      lFlicker 4.1s ease-in-out 0.4s infinite alternate; 
}

.logoText span:nth-child(3)  { 
  animation:                      lFlicker 3.3s ease-in-out 0.0s infinite alternate; 
}

.logoText span:nth-child(4)  { 
  animation:                      lFlicker 3.9s ease-in-out 0.7s infinite alternate; 
}

.logoText span:nth-child(5)  { 
  animation:                      lFlicker 2.5s ease-in-out 0.2s infinite alternate; 
}

.logoText span:nth-child(6)  { 
  animation:                      lFlicker 4.4s ease-in-out 0.5s infinite alternate; 
}

.logoText span:nth-child(7)  { 
  animation:                      lFlicker 3.1s ease-in-out 0.9s infinite alternate; 
}

.logoText span:nth-child(8)  { 
  animation:                      lFlicker 3.7s ease-in-out 0.3s infinite alternate; 
}

.logoText span:nth-child(9)  { 
  animation:                      lFlicker 2.9s ease-in-out 0.6s infinite alternate; 
}

.logoText span:nth-child(10) { 
  animation:                      lFlicker 4.2s ease-in-out 0.1s infinite alternate; 
}

.logoText span:nth-child(11) { 
  animation:                      lFlicker 3.6s ease-in-out 0.8s infinite alternate; 
}

.logoText span:nth-child(12) { 
  animation:                      lFlicker 2.7s ease-in-out 0.4s infinite alternate; 
}

.logoText span:nth-child(13) { 
  animation:                      lFlicker 4.0s ease-in-out 0.0s infinite alternate; 
}

.logoText span:nth-child(14) { 
  animation:                      lFlicker 3.4s ease-in-out 0.5s infinite alternate; 
}

.logoText span:nth-child(15) { 
  animation:                      lFlicker 2.5s ease-in-out 0.2s infinite alternate; 
}

.logoPath {
  stroke-dasharray:               1250;
  stroke-dashoffset:              0;
  animation:                      dashLogo 5s ease-in-out 1;
}

.mULogo {
  display:                        inline-grid;
  align-items:                    end;
  justify-items:                  end;
  grid-template-columns:          2em 4fr;
  grid-template-rows:             1fr;
  grid-column-gap:                0px;
  grid-row-gap:                   0px;
  width:                          15em;
  height:                         2em;
  text-decoration:                none;
  transition:                     ease .2s;
}

.mULogoIcon {
  display:                        grid;
  align-items:                    center;
  justify-items:                  center;
  min-width:                      1em;
  height:                         1em;
  text-decoration:                none;
  overflow:                       hidden;
  font-family:                    "icon";
  font-size:                      2em;
  color:                          var(--whiteRgba);
  background-color:               var(--hunterGreenRgba);
  box-shadow:                     0px 1px 1px 1px var(--carbonBlackRgba);
  transition:                     ease .2s;
}

.mULogoIcon:hover {
  transform:                      scale(1.5) rotate(15deg);
}

.mULogoLink {
  display:                        grid;
  align-items:                    center;
  justify-items:                  start;
  width:                          100%;
  height:                         2em;
  font-family:                    "main", Arial;
  background:                     linear-gradient( 180deg, var(--hunterGreenRgba2) 0%, var(--hunterGreenRgba2) 50%, var(--hunterGreenRgba6) 50%, var(--hunterGreenRgba6) 100% );
  background-size:                100% 200%;
  box-shadow:                     0px 1px 1px 1px var(--carbonBlackRgba);
  background-position:            top;
  color:                          var(--whiteRgba);
  text-shadow:                    1px 1px 1px var(--carbonBlack);
  text-decoration:                none;
  font-size:                      1em;
  overflow:                       hidden;
  transition:                     ease .2s;
}

.mULogoLink:hover {
  background-position:            bottom;
}

.myFoot{
  display:                        grid;
  align-items:                    start;
  justify-items:                  center;
  grid-template-columns:          repeat(3, 1fr);
  grid-template-rows:             repeat(1, 1fr);
  grid-column-gap:                0px;
  grid-row-gap:                   0px;
  background-color:               var(--darkSpruce);
  position:                       absolute;
  top:                            100vh;
  left:                           0;
  width:                          100vw;
  height:                         auto;
}

.footOne {
  width:                          90%; 
  height:                         100%;
}

.footTwo {
  width:                          90%; 
  height:                         100%;
}

.footThree {
  width:                          90%; 
  height:                         100%;
}

.myFootHold {
  display:                        inline-grid;
  align-items:                    end;
  justify-items:                  end;
  grid-template-columns:          2em 4fr;
  grid-template-rows:             1fr;
  grid-column-gap:                0px;
  grid-row-gap:                   0px;
  width:                          100%;
  height:                         2em;
  text-decoration:                none;
  transition:                     ease .2s;
}

.myFootIcon {
  display:                        grid;
  align-items:                    center;
  justify-items:                  center;
  min-width:                      1em;
  height:                         1em;
  text-decoration:                none;
  overflow:                       hidden;
  font-family:                    "icon";
  font-size:                      2em;
  color:                          var(--whiteRgba);
  background-color:               var(--hunterGreenRgba);
  box-shadow:                     0px 1px 1px 1px var(--carbonBlackRgba);
  transition:                     ease .2s;
}

.myFootIcon:hover {
  transform:                      scale(1.5) rotate(15deg);
}

.myFootLink {
  display:                        grid;
  align-items:                    center;
  justify-items:                  start;
  width:                          100%;
  height:                         2em;
  font-family:                    "main", Arial;
  background:                     linear-gradient( 180deg, var(--hunterGreenRgba2) 0%, var(--hunterGreenRgba2) 50%, var(--hunterGreenRgba6) 50%, var(--hunterGreenRgba6) 100% );
  background-size:                100% 200%;
  box-shadow:                     0px 1px 1px 1px var(--carbonBlackRgba);
  background-position:            top;
  color:                          var(--whiteRgba);
  text-shadow:                    1px 1px 1px var(--carbonBlack);
  text-decoration:                none;
  font-size:                      1em;
  overflow:                       hidden;
  transition:                     ease .2s;
}

.myFootLink:hover {
  background-position:            bottom;
}

@keyframes dashLogo { 
  0% {
    stroke-dasharray:             500;
    stroke-dashoffset:            500;
  }
  
  100% {
    stroke-dasharray:             1250;
    stroke-dashoffset:            0;
  }
}



@keyframes lFlicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    opacity:                      1;
    text-shadow:
                                  0 0 4px var(--limeMoss),
                                  0 0 12px var(--limeMoss),
                                  0 0 24px var(--hunterGreen),
                                  0 0 48px var(--hunterGreen),
                                  0 0 80px var(--darkSpruce);
  }
  20%, 24%, 55% {
    opacity:                      0.85;
    text-shadow:
                                  0 0 4px var(--limeMoss),
                                  0 0 12px var(--limeMoss),
                                  0 0 24px var(--hunterGreen),
                                  0 0 48px var(--hunterGreen);
  }
}

@keyframes charGlow {
  0% {
    transform:                    scale(1);
    text-shadow:
                                  0 0 0px var(--fern),
                                  0 0 0px var(--fern),
                                  0 0 0px var(--fern),
                                  0 0 0px var(--fern);
    opacity:                      .2;
  }
  
  100% {
    text-shadow:
                                  0 0 6px var(--fern),
                                  0 0 12px var(--fern),
                                  0 0 18px var(--fern),
                                  0 0 28px var(--fern);
    transform:                    scale(1.2);
    opacity:                      .5;
  }
}