personal-site/src/App.css

.App {
  text-align: center;
  background-color: black;
  min-height: 100vh;
  width: 100vw !important;
  max-width: 100vw !important;
  font-size: calc(20px);
  color: white;
}

.row {
  margin: 0 !important;
}

html {
  background-color: black;
}

.fade-down-d3s {
  opacity: 0;
  animation: fade-down-anim 2s forwards 3s;
}

/* we do this because scroll snapping is broken on moz://a for some reason */
@supports (-moz-appearance:none){
  html {
    scroll-snap-type: none !important;
  }
}

/* mobile won't play with snapping too well so we need to make it prox not mandatory */
@media only screen and (max-width: 600px) {
  html {
    scroll-snap-type: none !important;
  }

  .child {
    scroll-snap-align: none !important;
  }
}

h1 {
  font-weight: bolder;
}

@keyframes fade-up-anim {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity:1;
    transform: translateY(0px);
  }
}

@keyframes fade-down-anim {
  0% {
    opacity: 0;
    transform: translateY(-40px);
  }
  100% {
    opacity:1;
    transform: translateY(0px);
  }
}


@media only screen and (max-width: 993px) {
  .fade-up-md {
    opacity: 0;
    animation: fade-up-anim 2s forwards 200ms !important;
  }

  .fade-up-md-2 {
    opacity: 0;
    animation: fade-up-anim 2s forwards 400ms !important;
  }

  .fade-up-md-3 {
    opacity: 0;
    animation: fade-up-anim 2s forwards 600ms !important;
  }
}

@media only screen and (min-width: 768px) {
  .fade-up {
    opacity: 0;
    animation: fade-up-anim 2s forwards 200ms;
  }

  .fade-up-2 {
    opacity: 0;
    animation: fade-up-anim 2s forwards 400ms;
  }

  .fade-up-3 {
    opacity: 0;
    animation: fade-up-anim 2s forwards 600ms;
  }
}

.fade-up {
  opacity: 0;
  animation: fade-up-anim 2s forwards 200ms;
}

.fade-up-d3s {
  opacity: 0;
  animation: fade-up-anim 2s forwards 3s;
}

@keyframes fade-in-tx-anim {
  0% {
    opacity: 0;
  }
  100% {
    opacity:1;
  }
}

.fade-in-tx {
  animation: fade-in-tx-anim 1s ease-in;
}

@keyframes fade-out{
  0% {
    opacity: 1;
    z-index: 500;
  }

  99% {
    opacity: .1;
    z-index: 500;
  }

  100% {
    opacity:0;
    z-index: -500;
    display: none;
    visibility: hidden;
  }
}

.fade-out {
  animation: fade-out 1s ease-in forwards;
  opacity: 0;
}

@keyframes move-left-atx-anim {
  0% {
    margin-left: 0;
  }
  100% {
    margin-left: -17px;
  }
}

.move-left-atx {
  animation: move-left-atx-anim 1s forwards;
}



html {
  scroll-snap-type: y mandatory;
}

.child {
  scroll-snap-align: center;

}

.pfp {
  border-radius: 100%;
  width: 25%
}