body{
  font-family: 'Roboto', sans-serif;
  background: #1d1f20;
  text-align: center;
  margin-top: 10%;
  perspective: 500px;
  animation: transitionIn 0.75s;
}
hr{
  border: dotted white 6px;
  border-bottom: none;
  width: 4%;
  opacity: 10%;
}
.border{
  padding-bottom: 80px;

}
@keyframes transitionIn {
  from{
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }

}

h1{
  color: white;
  text-align: center;
  padding: 16px;
  margin: 0;
}

.myButton {
  font-family: 'Ubuntu', sans-serif;
  font-size: 24px;
  margin-bottom: 30px;
  text-decoration: none;
  color: #343535;
  background: white;
  padding: 15px 40px;
  border-radius: 44px;
  font-weight: normal;
  transition: all 0.2s ease-in-out;
}
.myButton:hover {
  color: #0169C2;
  filter: drop-shadow(5px 5px 1px rgba(0, 0, 0, 0.25));
}

.myButton:active {
	position:relative;
	top:1px;
}

/* crops animations that exceeds one line area */
.line {
  width: 100%;
  height: 4rem;
  overflow: hidden;
  padding: 0px 0px 50px 0px;
  margin-bottom: 16px;
}

/* lineup class and keyframes */
.lineUp {
  animation: 2s anim-lineUp ease-out;
}
@keyframes anim-lineUp {
  0% {
    opacity: 0;
    transform: translateY(80%);
  }
  20% {
    opacity: 0;
  }
  50% {
    opacity: 1;
    transform: translateY(0%);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}