style.css

:root {
  --link: #dcdcff
}

/* Global */

body {
  background-color: #001028;
  color: white;
}

.container {
  padding-top: 2vh;
  padding-bottom: 2vh;
}

.muted {
  color: #6979ad;
}

.alt {
  background-color: #051533 !important;
}

.text-center {
  text-align: center
}

.ar {
  font-family: 'Aref Ruqaa';
}

.nopad {
  padding: 0.5vh 0 0 0;
}

/* FB Button */

.btn-primary {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

/* Header */

.masthead {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
}

@media (max-width: 500px){
  .header {
    font-size: 2.3em;
  } 
}

@media (min-width: 501px){
  .header {
    font-size: 3.7em;
  } 
}

.initial {
  max-width: 540px;
}

.scroller {
  position: absolute;
  width: 40%;
  margin: 0 30%;
  top: 95vh;
  animation: bumpyfull 1s infinite cubic-bezier(1, 0, 0, 1) alternate;
  z-index: 2;
  text-align: center;
  cursor: pointer;
}

.scroller > span {
  background-color: transparent;
  font-size: 2em;
}

.scroller:hover {
  animation: bumpy 1s infinite cubic-bezier(1, 0, 0, 1) alternate;
}

.cansat {
  height: 35vh;
  animation: spaaace 3s infinite ease-in-out alternate;
  opacity: 1;
}

#particles-js {
  width: 100%;
  height: 100%;
}

/* Content */

.center-block {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.bulletpoint {
  font-size: 9em;
}

.avatar {
  width: 75%;
  padding-bottom: 1vh;
  margin-top: 5vh;
}

.desc {
  margin-bottom: 2vh;
}

.sponsor {
  margin-top: 2vh;
  width: 80%;
  cursor: pointer;
}

.botland {
  background: white;
  padding: 10px;
  border-radius: 10px;
}

.name {
  margin-bottom: 0;
}

/* Footer */

.footer {
  background-color: #0a0a0a;
}

.beat {
  margin-left: 0.1%;
  margin-right: 0.1%;
  color: red;
  animation: heartbleed 1s infinite cubic-bezier(0.86, 0, 0.07, 1);
}

/* Links */

a {
  color: var(--link);
}


a:link{
  color: var(--link); 
}

a:visited{
  color: var(--link); 
}

a:hover{
  color: #cce;
}

/* Animations */

@keyframes bumpyfull {
  from {
    top: 94vh;
    opacity: 0.4;
  }

  to {
    top: 95vh;
    opacity: 0.8;
  }
}

@keyframes heartbleed {
  0% {
    transform: scale(0.8);
  }

  10% {
    transform: scale(1.1);
  }

  20% {
    transform: scale(0.8);
  }

  25% {
    transform: scale(1.2);
  }

  50% {
    transform: scale(0.8);
  }

  100% {
    transform: scale(0.8);
  }
}

@keyframes spaaace {
  from {
    -webkit-transform: translateY(30%);
    transform: translateY(30%);
  }

  to {
    -webkit-transform: translateY(45%);
    transform: translateY(45%);
  }
}