/* -----------Glowing corners & flicker text ---------------- */

.rematrix_corners {
  /* --thickness: 1.5px;
  --width: 10px; */
  --alpha: 1;
  --thickness: 0.2vw;
  --width: 0.8em;
  --opacity: 1;
  --Glowing-green: rgb(57, 255, 20, var(--alpha));
  position: relative;
  background:
    /* Top-left */ linear-gradient(
        var(--Glowing-green),
        var(--Glowing-green)
      )
      0 0 / var(--thickness) var(--width) no-repeat,
    linear-gradient(var(--Glowing-green), var(--Glowing-green)) 0 0 /
      var(--width) var(--thickness) no-repeat,
    /* Top-right */ linear-gradient(var(--Glowing-green), var(--Glowing-green))
      100% 0 / var(--thickness) var(--width) no-repeat,
    linear-gradient(var(--Glowing-green), var(--Glowing-green)) 100% 0 /
      var(--width) var(--thickness) no-repeat,
    /* Bottom-left */
      linear-gradient(var(--Glowing-green), var(--Glowing-green)) 0 100% /
      var(--thickness) var(--width) no-repeat,
    linear-gradient(var(--Glowing-green), var(--Glowing-green)) 0 100% /
      var(--width) var(--thickness) no-repeat,
    /* Bottom-right */
      linear-gradient(var(--Glowing-green), var(--Glowing-green)) 100% 100% /
      var(--thickness) var(--width) no-repeat,
    linear-gradient(var(--Glowing-green), var(--Glowing-green)) 100% 100% /
      var(--width) var(--thickness) no-repeat;
  animation: corners_ani 2.5s cubic-bezier(0.54, -1.18, 0, 1.76) infinite;
  animation-delay: -2s;
  display: flex;
  justify-content: center;

  /* height: 30%; */
}
.rematrix_corners[error] {
  --Glowing-green: rgb(255, 0, 0, var(--alpha));
}
.corners_button {
  --width: 0.6em;
}
.corners_picture {
  --width: 1.2em;
}
.corners_input {
  --width: 0.8em;
}
@keyframes corners_ani {
  0% {
    --alpha: 0.1;
  }
  5% {
    --alpha: 0.2;
  }
  10% {
    --alpha: 0.3;
  }
  15% {
    --alpha: 0.4;
  }
  20% {
    --alpha: 0.5;
  }
  25% {
    --alpha: 0.6;
  }
  30% {
    --alpha: 0.7;
  }
  35% {
    --alpha: 0.8;
  }
  40% {
    --alpha: 0.9;
  }
  50% {
    --alpha: 1;
  }
  55% {
    --alpha: 0.9;
  }
  60% {
    --alpha: 0.8;
  }
  65% {
    --alpha: 0.7;
  }
  70% {
    --alpha: 0.6;
  }
  75% {
    --alpha: 0.5;
  }
  80% {
    --alpha: 0.4;
  }
  85% {
    --alpha: 0.3;
  }
  90% {
    --alpha: 0.2;
  }
  95% {
    --alpha: 0.1;
  }
  100% {
    --alpha: 0.1;
  }
}
.animated_text {
  all: unset;
  text-align: center;
  color: rgb(0, 255, 0, 1);
  animation: animated_text linear 2.5s infinite;
  text-shadow: 0px 1px 8px rgb(0, 255, 0, 1);
  animation-delay: -2s;
}
@keyframes animated_text {
  0% {
    opacity: 0.4;
  }
  5% {
    opacity: 0.5;
  }
  10% {
    opacity: 0.6;
  }
  20% {
    opacity: 0.7;
  }
  40% {
    opacity: 0.8;
  }
  45% {
    opacity: 0.1;
  }
  50% {
    opacity: 0.8;
  }
  55% {
    opacity: 0.4;
  }
  60% {
    opacity: 0.8;
  }
  70% {
    opacity: 0.1;
  }
  80% {
    opacity: 1;
  }
  90% {
    opacity: 0.8;
  }
  100% {
    opacity: 0.4;
  }
}
.animated_text::first-letter {
  text-shadow: 0px 3px 4px var(--accent-color);
}

.rematrix_button {
  display: flex;
  align-content: center;
  align-items: center;
  background-color: transparent;
  font-family: h;
  position: relative;
  transition: 0.2s linear;
  cursor: pointer;
  border: none;
  font-weight: bolder;
  font-size: 100%;
  user-select: none;
  overflow: hidden;
  padding: 0.5em 0.5em;
  height: 100%;
  width: 100%;

  /* min-height: 50px; */
}
.rematrix_button[no_animated_corner] {
  animation: none;
}
.rematrix_button[error] {
  /* filter: invert(18%) sepia(100%) saturate(6000%) hue-rotate(-5deg); */
  --Button-background-color: rgba(255, 0, 0, 0.21);
  --Button-blur-color: rgb(255, 0, 0, 0.18);
}
.rematrix_button[error] .animated_text {
  color: red;
  text-shadow: 0px 1px 8px rgb(255, 0, 0, 1);
}
.rematrix_button[error] .animated_text::first-letter {
  text-shadow: 0px 3px 4px red;
}

.rematrix_button[accent] {
  /* filter: invert(18%) sepia(100%) saturate(6000%) hue-rotate(-5deg); */
  --Button-background-color: rgb(105, 240, 174, 0.28);
  --Button-blur-color: rgb(105, 240, 174, 0.25);
}
.rematrix_button[accent] .animated_text {
  color: var(--accent-color);
  text-shadow: 0px 1px 8px rgb(105, 240, 174, 1);
}
.rematrix_button[accent] .animated_text::first-letter {
  text-shadow: 0px 3px 4px green;
}

.rematrix_button[hidden] {
  display: none;
}
.rematrix_button[on_progress] {
  pointer-events: none;
  filter: sepia(100%) hue-rotate(180deg) saturate(1000%);
}

.disable_animation {
  animation: unset;
}
.rematrix_button div {
  box-shadow: 0px 0px 3em 0.95em var(--Button-background-color) inset,
    0 0px 0.29em 0.3em var(--Button-blur-color);

  /* height: 100%;
  width: 100%; */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.rematrix_button div span {
  width: 100%;
  height: 100%;
  align-content: center;
}

/* .rematrix_button:hover {
  opacity: 0.5;
} */
/* .rematrix_button:focus {
  opacity: 0.5;
} */
.rematrix_button[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}
/* .rematrix_corners[disabled] {
  opacity: 0.8;
  cursor: not-allowed;
  animation: none;
} */

/* ---------------------------------------------------------- */

/* --------------LOGO-------------- */
.LOGO {
  position: absolute;
  left: 0;
  margin: 10px;
  z-index: 1001;
  font-size: 55px;
}
.LOGO a {
  font-family: p;
  /* font-weight: bold; */
  display: grid;
  grid-template-areas:
    "f s"
    "f t";
  gap: 0px 0px;
  justify-items: flex-end;
  align-items: baseline;
  margin: 1.5% 2% 0px;
  user-select: none;
  text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.45);
}
.LOGO span:nth-child(1) {
  color: white;
  font-size: 0.31em;
  grid-area: f;
  letter-spacing: -1px;
}

.LOGO span:nth-child(2) {
  color: var(--Glowing-green);
  font-family: c;
  grid-area: s;
  font-size: 0.215em;

  line-height: 0.55em;
  /* letter-spacing: 0.1em; */
  animation: logoflicker linear 1s infinite;
  text-shadow: 0px 0px 10px var(--Glowing-green);
}
@keyframes logoflicker {
  20% {
    opacity: 0.1;
  }
  30% {
    opacity: 0.5;
  }
  40% {
    opacity: 0.1;
  }
  50% {
    opacity: 0.9;
  }
  60% {
    opacity: 0.2;
  }
  70% {
    opacity: 0.8;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.LOGO span:nth-child(3) {
  color: white;
  font-size: 0.214em;
  grid-area: t;
  margin: 0;
}

/* -------------------------------- */

/*--------------INPUT & LABEL---------------*/

.rematrix_input {
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  font-family: p;
  width: 100%;
  margin-bottom: 20px;
}
.rematrix_input input {
  background-color: transparent;
  border: none;
  text-align: center;
  font-size: 1.25em;
  width: 100%;
  padding: 0 15px;

  color: var(--accent-color);
  pointer-events: visibleFill();
  outline: none;
  font-family: p;
  box-sizing: border-box;
}
.rematrix_input input::placeholder {
  color: green;
  opacity: 0.8;
}
.rematrix_input input::selection {
  background-color: var(--accent-color);
  color: white;
}

.rematrix_input label {
  all: unset;
  text-transform: uppercase;
  display: flex !important;
  justify-self: center !important;
}

.rematrix_input label[required]::after {
  content: "*";
  font-family: c;
  position: absolute;
  margin-top: 5px;
  left: -10px;
  /* background-color: var(--accent-color); */
  border-radius: 50%;
  font-size: 10px;
}
/* .rematrix_input label span{
  
  margin: -20px 0 0 0 ;
} */
/*--------------INPUT & LABEL---------------*/
/* --width:20px; */
.transform {
  transition: max-height 0.4s ease, max-width 0.4s ease, opacity 0.3s ease,
    transform 0.4s ease;
}
.animate_hidden {
  opacity: 0;
  max-height: 0;
  max-width: 0;
  text-overflow: ellipsis;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.animate_shown {
  margin: 0;
  padding: 0;
  opacity: 1;
  max-height: auto;
  margin-bottom: 15px;
  margin-top: -10px;
}