body {
  background: #cf9ef0;
  background: linear-gradient(
    90deg,
    rgba(207, 158, 240, 1) 0%,
    rgba(232, 70, 189, 0.86) 50%,
    rgba(219, 107, 94, 1) 100%
  );
  text-align: center;
  font-family: "Times New Roman", Times, serif;
}
.animate-charcter {
  text-transform: uppercase;
  background-image: linear-gradient(
    -225deg,
    #231557 0%,
    #958f9b 29%,
    #13d4ff 67%,
    #9500ff 100%
  );
  background-size: auto auto;
  background-clip: border-box;
  background-size: 50% auto;
  color: #fff;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip 8s linear infinite;
  display: inline-block;
  font-size: 35px;
}

@keyframes textclip {
  to {
    background-position: 200% center;
  }
  header {
    margin-bottom: 30px;
  }
}

form {
  padding: 10px;
  display: flex;
  margin-bottom: 10px;
  margin-left: 175px;
}
.instructions {
  padding: 4px;
  border: 1px solid grey;
  border-radius: 6px;
  line-height: 1;
  width: 40%;
  color: black;
  font-size: 14px;
  background-color: rgb(156, 215, 251);
  margin-left: 150px;
  display: flex;
}
.submit-button {
  color: rgb(245, 8, 178);
  padding: 2px;
  margin-left: 5px;
  width: 10%;
  border: 2px solid rgb(22, 19, 19);
  border-radius: 12px;
  font-size: 14px;
  text-decoration: bold;
  background-color: #3300ff;
  display: flex;
}
.submit-button:hover {
  cursor: pointer;
  background-color: #9000ff;
  transition-delay: 5ms;
}
H5 {
  color: black;
  font-size: 12px;
  margin-bottom: 20px;
  text-align: center;
}
footer {
  font-size: 11px;
}
.coder {
  color:rgb(246, 160, 229);
}