* {
  font: Helvetica, sans-serif;
}

body {
  padding: 10%;
  background-color: #006d18;
  background: linear-gradient(-45deg, #58f5c6, #01278d, #fac95f, #a30ddf);
  background-size: 400% 400%;
  animation: gradient 12s ease infinite;
  height: 100vh;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
h1 {
  text-align: center;
}

input {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  width: auto;
  padding: 1em;
  padding-left: 4em;
  box-sizing: border-box;
  border: 0.2em solid #239c78;
  border-radius: 1em;
  background-size: 2em;
  background-position: 1em;
  background-repeat: no-repeat;
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(5px);
  background-image: url("../images/youtube_bw.png");
}

input:focus {
  transition: width 0.4s ease-in-out, border-radius 1.2s ease-in-out, background-color 1.2s ease-in-out, background-image 1.2s ease-in-out;
  width: 70%;
  color: #006d18;
  border-radius: 0.1em;
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(5px);
  background-image: url("../images/youtube_wb.png");
}

input:not(:placeholder-shown) {
  width: auto;
}

button {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  width: 30%;
  padding: 1em;
  padding-left: 4em;
  box-sizing: border-box;
  border: 0.2em solid #239c78;
  border-radius: 1em;
  background-size: 2em;
  background-position: 1em;
  background-repeat: no-repeat;
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(5px);
  background-image: url("../images/download_bw.png");
}

button:focus {
  transition: width 0.4s ease-in-out, border-radius 1.2s ease-in-out, background-color 1.2s ease-in-out, background-image 1.2s ease-in-out;
  width: 30%;
  color: #006d18;
  border-radius: 0.1em;
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(5px);
  background-image: url("../images/download_wb.png");
}

/*# sourceMappingURL=index.css.map */