body {
  margin: 0;
  min-height: 100vh;
  overflow: hidden;

  background:
    radial-gradient(circle at 20% 30%, #a78bfa 0%, transparent 35%),
    radial-gradient(circle at 80% 20%, #22d3ee 0%, transparent 35%),
    radial-gradient(circle at 75% 80%, #fb7185 0%, transparent 35%), #0f172a;

  background-size: 180% 180%;
  animation: drift 12s ease-in-out infinite;
}

@keyframes drift {
  0% {
    background-position:
      0% 0%,
      100% 0%,
      100% 100%;
  }

  25% {
    background-position:
      20% 10%,
      80% 20%,
      90% 70%;
  }

  50% {
    background-position:
      100% 100%,
      0% 50%,
      20% 0%;
  }

  75% {
    background-position:
      80% 90%,
      20% 80%,
      10% 30%;
  }

  100% {
    background-position:
      0% 0%,
      100% 0%,
      100% 100%;
  }
}
footer img{
    filter: drop-shadow(1px 1px 5px white);
}
footer{
  display: flex;
  justify-content: center;
}
body{
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  scrollbar-color: var(--blue) var(--red)
}
main textarea{
  max-width: 1000px;
  min-height: 500px;
  min-width: 1000px;
  max-height: 500px;
  border-color: transparent;
  border-radius: 10px;
  font-size: 15px;
  background-color: #797979;
}
main textarea::selection{
  background-color: blue;
  color: red;
}

main{
  text-align: center;
}
*:focus{outline:none}
main textarea:focus {
    border-color: rgba(0, 0, 0, 0.9);
    box-shadow:
        0 0 40px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(59, 130, 246, 0.25),
        inset 0 0 40px rgba(59, 130, 246, 0.3);
        transition: 1s ease;
}



 
body{
    margin:0;
    height:100vh;
}
body{
    margin:0;
    height:100vh;

   
    background:
    radial-gradient(
    at 20% 30%,
    #3b82f6,
    transparent
);
background-size:200% 200%;

animation:move 10s infinite ease;

}
@keyframes move{

0%{
background-position:50% 0%;
}

50%{
background-position:100% 100%;
}

100%{
background-position:0% 50%;
}

}