* {
  box-sizing: border-box;
}

:root {
  --background-size: "width: 100%, 40em";
}

html {
  font-size: calc(100% + 0.5vw);
}

@media (prefers-reduced-motion: reduce) {
  * {
      animation: none !important;
      transition-duration: 0.001s !important;
  }
}

body {
  /*width: 375px;*/
  display: flex;
  align-items: center;
  justify-content: center;
}
.container {
  background: linear-gradient(100deg, #402, #006);
  /*padding: 2em;*/
  width: 100%;
  height: 100vh;
  /*border-radius: 25px;*/
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 460 55'%3E%3Cg fill='none' fill-rule='evenodd' stroke='%23fff' stroke-width='7' opacity='.1'%3E%3Cpath d='M-345 34.5s57.5-13.8 115-13.8 115 13.8 115 13.8S-57.5 48.3 0 48.3s115-13.8 115-13.8 57.5-13.8 115-13.8 115 13.8 115 13.8 57.5 13.8 115 13.8 115-13.8 115-13.8'/%3E%3Cpath d='M-345 20.7s57.5-13.8 115-13.8 115 13.8 115 13.8S-57.5 34.5 0 34.5s115-13.8 115-13.8S172.5 6.9 230 6.9s115 13.8 115 13.8 57.5 13.8 115 13.8 115-13.8 115-13.8m-920 27.6s57.5-13.8 115-13.8 115 13.8 115 13.8S-57.5 62.1 0 62.1s115-13.8 115-13.8 57.5-13.8 115-13.8 115 13.8 115 13.8 57.5 13.8 115 13.8 115-13.8 115-13.8'/%3E%3Cpath d='M-345 6.9s57.5-13.8 115-13.8S-115 6.9-115 6.9-57.5 20.7 0 20.7 115 6.9 115 6.9 172.5-6.9 230-6.9 345 6.9 345 6.9s57.5 13.8 115 13.8S575 6.9 575 6.9'/%3E%3Cpath d='M-345-6.9s57.5-13.8 115-13.8S-115-6.9-115-6.9-57.5 6.9 0 6.9 115-6.9 115-6.9s57.5-13.8 115-13.8S345-6.9 345-6.9 402.5 6.9 460 6.9 575-6.9 575-6.9m-920 69s57.5-13.8 115-13.8 115 13.8 115 13.8S-57.5 75.9 0 75.9s115-13.8 115-13.8 57.5-13.8 115-13.8 115 13.8 115 13.8 57.5 13.8 115 13.8 115-13.8 115-13.8'/%3E%3C/g%3E%3C/svg%3E%0A"), linear-gradient(80deg, #202, #006);
  background-position: 50% 50%;
  animation: background-move 10s linear infinite;
 /* background-size: 100vw auto, 100% 100%;
  background-size: max(100vw, 30em) auto, 100% 100%;*/
}

@keyframes background-move {
  0% {
      background-position: 0 0, 0 0;
  }
  100% {
      background-position: 100vw 0, 0 0;
      background-position: max(100vw, 40em) 0, 0 0;
  }
}
.input-group {
  width: 95%;
  max-width: 30em;
  max-height: 30em;
  display: flex;
  flex-direction: column;
  z-index: 2;
}
@supports (mix-blend-mode: darken) {
  .input-group {
      position: relative;
      mix-blend-mode: lighten;
  }
  .input-group__label {
      position: absolute;
      left: 3em;
      top: -0.28em;
      background: #000;
  }
}
.input-group__label {
  /*padding: 0 0.5em;*/
  margin-bottom: 0.5em;
  text-transform: uppercase;
  font-size: 35px;
  letter-spacing: 0.1em;
  color: #ccd;
  color: rgba(255, 220, 255, 0.6);
  cursor: pointer;
}
.input-group__label-2 {
  position: absolute;
  left: 3em;
  top: 5.95em;
  background: #000;
  color: rgba(255, 220, 255, 0.6);
}

.input-group__label-2 {
  /*padding: 0 0.5em;*/
  margin-bottom: 0.5em;
  margin-top: 5px;
  text-transform: uppercase;
  font-size: 35px;
  letter-spacing: 0.1em;
  color: #ccd;
  color: rgba(255, 220, 255, 0.6);
  cursor: pointer;
}
.input-group__input {
  color: #fff;
  font-size: 35px;
  line-height: 8px;
  border-style: none;
  outline: none;
  height: 145px;
  width: 90%;
  margin:0 30px;
  /*margin-left: 30px;*/
  padding: 0.8em 1em;
  border: 0.25em solid transparent;
  background-image: linear-gradient(#000, #000), linear-gradient(120deg, #f09 0%, #0ff 50%, #9f0 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border-radius: 1.8em;
  background-size: 200% 100%;
  transition: background-position 0.8s ease-out;
}
.input-group__input:hover {
  background-position: 100% 0;
}
.input-group__input:focus {
  outline: 2px dashed #ad2b89;
  outline-offset: 0.5em;
}

.save-button {
  height: 90px;
  width: 230px;
  align-items: center !important;
  background-color: orange !important;
  color: #fff !important;
  margin-Left: 5em !important;
  margin-top: 26px !important;
  padding: 10px 10px !important;
  border: 5px !important;
  border-radius: 32px !important;
  font-size: 40px !important;
  cursor: pointer !important;
}
.save-button:hover {
  background-color: #ff7f00 !important;
}

@media (max-width: 375px) and (max-height: 812px) {


}