body{
  font-family: menlo, Consolas, 'Lucida Console', monospace; 
  margin: 10px;
}

p{
  text-align: center;
}

.config{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  text-align: center;
}
@media (max-width: 600px){
  .config{
    grid-template-columns: 1fr;
  }
}

.config textarea{
  height: 4em;
}

.your-name-container{
  display: grid;
  text-align: center;
  margin-bottom: 100px;
}
.your-name-container textarea{
  width: 200px;
}


.match{
  height: 270px;
}
.match span {
  font-size: 150px !important;
  --color1: red;
  --color2: green;
  text-align: center;
  font-size: 46px;
  background: repeating-linear-gradient(
    45deg,
    var(--color1),
    var(--color1) 30px,
    var(--color2) 30px,
    var(--color2) 60px
  );
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  animation: 10s linear 0s infinite move, zoooming 1.5s infinite;
  display: block;
  z-index: -1;
  position: relative;
}

@keyframes move {
  from {
    background-position: 0px;
  }
  to {
    background-position: 1000px;
  }
}

@keyframes zoooming {
  0% {
    transform: scale(.5);
  }
  50% {
    transform: scale(3);
  }
  100% {
    transform: scale(.5);
  }
}