@import url("https://fonts.googleapis.com/css2?family=Yanone+Kaffeesatz:wght@300;400&display=swap");

body {
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  background: linear-gradient(-45deg, #29abe2, #ed1e79, #f15a24);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}

body .canvas {
  background: #202020;
  height: 520px;
  width: 300px;
  border-radius: 30px;
  padding: 0px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-content: left;
}

body .gradient-txt {
  text-transform: uppercase;
  font-size: 1.9em;
  font-family: arial;
  font-weight: bold;
  background: -webkit-linear-gradient(65deg, #29abe2, #ed1e79, #f15a24);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

body .gradient-txt i {
  display: inline;
  font-size: 0.8em;
  text-transform: uppercase;
  -webkit-text-fill-color: #808080;
  font-family: Calibri;
  margin: 0px 6px;
  font-weight: lighter;
}

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