body {
  position: relative;
  overflow-x: hidden;
  background: linear-gradient(
    to right,
    #6f7280,
    #2a2c3c,
    #181827,
    #833ab4,
    #fd1d1d,
    #fcb045
  );
  background-size: 400% 400%;
  animation: gradient 8s ease infinite;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  min-height: 100vh;
}
::selection {
  background-color: #0f0 !important;
  color: black !important;
}
.background {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.block {
  position: absolute;
  height: 60px;
  width: 60px;
  background: #8505595e;
  z-index: -1;
}
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
a.hover {
  position: relative;
  color: royalblue;
  overflow: hidden;
  background: linear-gradient(
    90deg,
    rgba(7, 209, 85, 1) 38%,
    rgba(95, 7, 209, 1) 79%,
    rgb(175, 81, 238) 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  background-position: 90% 100%;
  transition: background-position 275ms ease;
  text-decoration: none;
}
a.hover:hover {
  background-position: 0 100%;
}
body::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(https://media.istockphoto.com/id/842096920/photo/abstract-blue-halftone-background.jpg?b=1&s=170667a&w=0&k=20&c=XzYxn52wYyndA551ihgKnfiwkKMdbKk-NqIQywtutUM=);
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
  background-position: center;
  background-size: cover;
  z-index: -1;
  opacity: 50%;
}