body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: #111;
}
:root {
  --main-color: #00b3ff;
  --secondary-color: #febe2e;
  --Third-color: #bb2d3b;
}
h2 {
  margin: 0;
  padding: 0;
  font-size: 50px;
}
h2 span {
  /* display: table-cell; */
  margin: 0;
  padding: 0;
  animation: animate 2s linear infinite;
}
h2 span:nth-child(1) {
  animation-delay: 0s;
}
h2 span:nth-child(2) {
  animation-delay: 0.25s;
}
h2 span:nth-child(3) {
  animation-delay: 0.5s;
}
h2 span:nth-child(4) {
  animation-delay: 0.75s;
}
@keyframes animate {
  0%,
  100% {
    color: #fff;
    filter: blur(2px);
    text-shadow: 0 0 10px #00b3ff, 0 0 20px #00b3ff, 0 0 40px #00b3ff,
      0 0 80px #00b3ff;
  }
  5%,
  95% {
    color: #111;
    filter: blur(0px);
    text-shadow: 0 0 0 none;
  }
}
.form-group {
  color: #ffffff;
}
textarea {
  resize: none;
}
.btn-product {
  position: relative;
  background: #fff;
  color: #000000;
  font-size: 1.5em;
  letter-spacing: 0.1em;
  font-weight: 400;
  padding: 10px 30px;
  transition: 0.5s;
  color: #fff;
}
.btn-product:hover {
  background: var(--main-color);
  color: var(--main-color);
  letter-spacing: 0.25em;
  box-shadow: 0 0 35px var(--main-color);
}
.btn-product::before {
  content: "";
  position: absolute;
  inset: 2px;
  background: #27282c;
}
.btn-product span {
  position: relative;
  z-index: 1;
}
.btn-product i {
  position: absolute;
  inset: 0;
  display: block;
}
.btn-product i::before {
  content: "";
  position: absolute;
  top: 0;
  left: 80%;
  width: 20px;
  height: 4px;
  background-color: #27282c;
  transform: translateX(-50%) skewX(325deg);
  transition: 0.5s;
}
.btn-product:hover i::before {
  width: 30px;
  left: 20%;
}
.btn-product i::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 20%;
  width: 20px;
  height: 4px;
  background-color: #27282c;
  transform: translateX(-50%) skewX(325deg);
  transition: 0.5s;
}
.btn-product:hover i::after {
  width: 30px;
  left: 80%;
}
.btn-product-update {
  position: relative;
  background: #fff;
  color: #000000;
  font-size: 1.5em;
  letter-spacing: 0.1em;
  font-weight: 400;
  padding: 10px 30px;
  transition: 0.5s;
  color: #fff;
}
.btn-product-update:hover {
  background: var(--secondary-color);
  color: var(--secondary-color);
  letter-spacing: 0.25em;
  box-shadow: 0 0 35px var(--secondary-color);
}
.btn-product-update::before {
  content: "";
  position: absolute;
  inset: 2px;
  background: #27282c;
}
.btn-product-update span {
  position: relative;
  z-index: 1;
}
.btn-product-update i {
  position: absolute;
  inset: 0;
  display: block;
}
.btn-product-update i::before {
  content: "";
  position: absolute;
  top: 0;
  left: 80%;
  width: 20px;
  height: 4px;
  background-color: #27282c;
  transform: translateX(-50%) skewX(325deg);
  transition: 0.5s;
}
.btn-product-update:hover i::before {
  width: 30px;
  left: 20%;
}
.btn-product-update i::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 20%;
  width: 20px;
  height: 4px;
  background-color: #27282c;
  transform: translateX(-50%) skewX(325deg);
  transition: 0.5s;
}
.btn-product-update:hover i::after {
  width: 30px;
  left: 80%;
}
.btn-product-delete {
  position: relative;
  background: #fff;
  color: #ffffff;
  font-size: 1.5em;
  letter-spacing: 0.1em;
  font-weight: 400;
  padding: 10px 30px;
  transition: 0.5s;
  color: #fff;
}
.btn-product-delete:hover {
  background: var(--Third-color);
  color: var(--Third-color);
  letter-spacing: 0.25em;
  box-shadow: 0 0 35px var(--Third-color);
}
.btn-product-delete::before {
  content: "";
  position: absolute;
  inset: 2px;
  background: #27282c;
}
.btn-product-delete span {
  position: relative;
  z-index: 1;
}
.btn-product-delete i {
  position: absolute;
  inset: 0;
  display: block;
}
.btn-product-delete i::before {
  content: "";
  position: absolute;
  top: 0;
  left: 80%;
  width: 20px;
  height: 4px;
  background-color: #27282c;
  transform: translateX(-50%) skewX(325deg);
  transition: 0.5s;
}
.btn-product-delete:hover i::before {
  width: 30px;
  left: 20%;
}
.btn-product-delete i::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 20%;
  width: 20px;
  height: 4px;
  background-color: #27282c;
  transform: translateX(-50%) skewX(325deg);
  transition: 0.5s;
}
.btn-product-delete:hover i::after {
  width: 30px;
  left: 80%;
}
input:invalid {
  animation: shake 300ms;
}
@keyframes shake {
  0%,
  100% {
    transform: translate(0);
  }
  25% {
    transform: translate(0.125rem);
  }
  75% {
    transform: translate(-0.125rem);
  }
}