*,
*:before,
*:after {
  margin: 0px;
  box-sizing: border-box;
}

.text {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradient 10s ease infinite;
  height: 100vh;

  width: 100%;
  min-height: 100vh;

  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;

  padding-left: 15px;
  padding-right: 15px;
  padding-top: 55px;
  padding-bottom: 35px;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.header {
  font-family: FiraCode-Regular;
  font-size: 50px;
  color: #fff;
  line-height: 1.2;
  text-transform: uppercase;
  padding-bottom: 10px;
  text-align: center;
}

.slogan {
  font-family: FiraCode-Light;
  font-size: 30px;
  color: #fff;
  line-height: 1.2;
  padding-bottom: 60px;
  text-align: center;
}

.footer {
  text-align: center;
  font-family: FiraCode-Regular;
  font-size: 12px;
  color: #cccccc;
  line-height: 1.4;
}

@font-face {
  font-family: FiraCode-Bold;
  src: url("../fonts/FiraCode-Bold");
}

@font-face {
  font-family: FiraCode-Light;
  src: url("../fonts/FiraCode-Light");
}

@font-face {
  font-family: FiraCode-Medium;
  src: url("../fonts/FiraCode-Medium");
}

@font-face {
  font-family: FiraCode-Regular;
  src: url("../fonts/FiraCode-Regular");
}

@font-face {
  font-family: FiraCode-Retina;
  src: url("../fonts/FiraCode-Retina");
}

@font-face {
  font-family: FiraCode-SemiBold;
  src: url("../fonts/FiraCode-SemiBold");
}