:root {
   --matsoft-logo-pink-glow: rgba(255, 0, 238, 1);
   --matsoft-logo-black: rgba(47, 45, 45, 1);
   --matsoft-logo-purple-1: rgba(128, 0, 255, 1);
   --matsoft-logo-purple-2: rgba(115, 31, 199, 1);
   --matsoft-logo-purple-3: rgba(169, 7, 227, 1);
   --matsoft-green: rgba(152, 252, 126, 1);
   --matsoft-green-light: rgba(152, 252, 126, 0.8);
   --matsoft-green-glow: rgba(75, 234, 35, 0.8);
   --matsoft-bg-purple-light: rgb(86, 44, 169);
   --matsoft-bg-purple-mid: rgba(51, 34, 108, 1);
   --matsoft-bg-purple-dark: rgba(34, 11, 97, 1);
   --matsoft-purple-light: rgba(100, 28, 187, 1);
   --matsoft-purple-glow: rgba(90, 48, 153, 1);
   --matsoft-purple-glowy: rgba(74, 9, 206, 1);
   --matsoft-red: rgba(255, 46, 150, 1);
   --matsoft-miami-blue: rgba(0, 234, 255, 1);
   --matsoft-light-text: rgba(243, 236, 236, 1);
   --matsoft-lighter-text: rgba(243, 236, 236, 0.8);
   --matsoft-dark-text: rgba(35, 2, 85, 1);
   --matsoft-email-bg: rgba(81, 44, 136, 0.8);
   --matsoft-email-bg-focus: rgba(61, 26, 114, 0.8);
   --matsoft-email-error: rgba(255, 46, 150, 0.8);
   --matsoft-element-outline-shadow: rgba(105, 41, 234, 1);
   --matsoft-element-shadow-light: rgba(138, 43, 226, 0.8);
   --matsoft-unused-bluegreen: rgba(88, 255, 185, 1)
}

* {
   box-sizing: border-box;
}

.hidden {
   display: none;
}

.visible {
   display: block;
}

/* Accessibility for Reduced Motion */
@media (prefers-reduced-motion: reduce) {

   * {
      animation: none !important;
      transition: none !important;
   }
}

img {
   width: max(112px, 7rem);
   height: max(140px, 7rem);
   margin-top: 0.75em;
   object-fit: cover;
   filter: drop-shadow(0 0 20px var(--matsoft-logo-pink-glow));
   -webkit-filter: drop-shadow(0 0 30px var(--matsoft-logo-pink-glow))
}

body {
   /* Fallback if Main Fonts aren't applied */
   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
   background: linear-gradient(400deg, var(--matsoft-bg-purple-light), var(--matsoft-bg-purple-mid), var(--matsoft-bg-purple-dark));
   background-size: 400% 400%;
   animation: gradientAnimation 10s ease infinite;
   color: var(--matsoft-light-text);
   min-height: 95vh;
   display: flex;
   flex-direction: column;
   padding-top: 5rem;
}

@keyframes gradientAnimation {
   0% {
      background-position: 0% 50%;
   }

   50% {
      background-position: 100% 50%;
   }

   100% {
      background-position: 0% 50%;
   }
}

main {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   flex-grow: 1;
}

textarea {
   border: none;
   outline: none;
}

/* Main container */
.container {
   text-align: center;
   overflow-wrap: break-word;
   padding: 2rem;
   background: linear-gradient(var(--matsoft-purple-light), var(--matsoft-bg-purple-dark));
   border-radius: 2em;
   box-shadow: var(--shadow-horizontal) var(--shadow-vertical) 0em 0em var(--shadow-bg);
   --shadow-bg: #000;
   --shadow-distance: 0.5em;
   --shadow-vertical: var(--shadow-distance);
   --shadow-horizontal: calc(0em - var(--shadow-distance));
   max-width: 600px;
   width: 90%;
   transition: all 0.3s ease;
   margin-bottom: 5em;
}

.input-group {
   position: relative;
}

.outline-effect {
   --outline-solid-thickness: 3px;
   --outline-blur-size: 8px;
   --outline-line-length: 500px;
   --outline-animation-length: 2500ms;
   --fade-transition-time: 3500ms;
   /* do not change, used for calculations */
   --outline-container-offset: 100px;
   position: relative;
}

.outline-container {
   pointer-events: none;
   position: absolute;
   inset: calc(var(--outline-container-offset) / -2);
   justify-self: center;
   width: calc(86% + var(--outline-container-offset));
   height: calc(95% + var(--outline-container-offset));
   opacity: 0;
   transition: opacity 2s ease-in-out;
}

.outline-blur,
.outline-solid {
   width: calc(100% - var(--outline-container-offset));
   height: calc(100% - var(--outline-container-offset));
   x: calc(var(--outline-container-offset) / 2);
   y: calc(var(--outline-container-offset) / 2);
   fill: transparent;
   stroke: var(--matsoft-element-outline-shadow);
   stroke-width: var(--outline-solid-thickness);
   stroke-dasharray: var(--outline-line-length);
   stroke-dashoffset: var(--outline-line-length);
}

.outline-blur {
   filter: blur(var(--outline-blur-size));
   stroke: var(--matsoft-purple-glowy);
   stroke-width: var(--outline-blur-size);
}

.outline-solid {
   stroke: var(--matsoft-purple-glowy);
   stroke-width: var(--outline-solid-thickness);
}

.email:focus~.outline-container .outline-solid {
   stroke-dashoffset: 0;
   transition: stroke-dashoffset var(--outline-animation-length) ease-in;
   animation: fade-out-solid var(--fade-transition-time) forwards;
   animation-delay: var(--outline-animation-length);
}

.email:focus~.outline-container .outline-blur {
   stroke-dashoffset: 0;
   transition: stroke-dashoffset var(--outline-animation-length) ease-in;

   animation:
      transition-to-pulse calc(var(--fade-transition-time)) forwards,
      pulse 6.5s infinite ease-in-out;

   animation-delay:
      var(--outline-animation-length),
      calc(var(--outline-animation-length) + var(--fade-transition-time));
}

.email:focus~.outline-container {
   animation: outline-visibility var(--outline-animation-length) forwards;
}

/* After animation, keep a static outline */
.email:focus::after {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: 11px;
   border: 2px solid var(--matsoft-purple-glowy);
   box-shadow: 0 0 10px var(--matsoft-purple-glowy);
   opacity: 0;
   z-index: 1;
   animation: fade-in-glow 0.8s ease-in-out,
}

@keyframes outline-visibility {

   0% {
      opacity: 0
   }

   25%,
   75%,
   100% {
      opacity: 1
   }
}

@keyframes fade-in-glow {
   0% {
      opacity: 0;
   }

   100% {
      opacity: 1;
   }
}

@keyframes fade-out-solid {
   0% {
      opacity: 1;
      stroke-width: var(--outline-solid-thickness);
   }

   100% {
      opacity: 0;
      stroke-width: 0;
   }
}

@keyframes transition-to-pulse {
   0% {
      /* Starting state - matches the end of drawing animation */
      stroke-opacity: 1;
      stroke-width: var(--outline-blur-size);
      filter: blur(var(--outline-blur-size));
   }

   100% {
      /* Ending state - matches the start of pulse animation */
      stroke-opacity: 0.7;
      stroke-width: var(--outline-solid-thickness);
      filter: blur(var(--outline-blur-size));
   }
}

@keyframes pulse {

   0%,
   100% {
      stroke-opacity: 0.7;
      stroke-width: var(--outline-solid-thickness);
      filter: blur(var(--outline-blur-size));
   }

   50% {
      stroke-opacity: 1;
      stroke-width: calc(var(--outline-blur-size) * 0.3);
      filter: blur(0);
   }
}

/* Email input area */
.email {
   text-align: left;
   font-size: 1rem;
   line-height: 2.25em;
   letter-spacing: 0.05em;
   color: var(--matsoft-lighter-text);
   caret-color: var(--matsoft-green);
   padding: 0.25em 0.5em;
   /* outline: 1px double var(--matsoft-purple-glow); */
   background-color: var(--matsoft-email-bg);
   transition: background-color 300ms linear;
   -webkit-transition: background-color 300ms linear;
   -ms-transition: background-color 300ms linear;
   -o-transition: background-color 300ms linear;
   max-width: auto;
   max-height: auto;
   border-radius: 0.7rem;
   width: 85%;
   height: 2.75em;
   resize: none;
   border: none;
   box-shadow: 0 0 0.7rem var(--matsoft-purple-light);
   position: relative;
   z-index: 1;

   &::placeholder {
      color: transparent;
      opacity: 1;
   }

   &:focus {
      /* outline: 2px double;outline-color: var(--matsoft-purple-glowy); */
      background: var(--matsoft-email-bg-focus);
   }
}


.email-error {
   /* These colors meet accessibility contrast standards (5.68:1 ratio) */
   outline: 2px solid var(--matsoft-email-error);
   box-shadow: 0 0 10px var(--matsoft-email-error);
}

.email.email-error:focus-visible {
   /* These colors meet accessibility contrast standards (5.68:1 ratio) */
   outline: 2px solid var(--matsoft-email-error);
   box-shadow: 0 0 10px var(--matsoft-email-error);
}

.email.email-error:focus~.outline-container {
   animation: none;
   opacity: 0;
}

.label {
   position: absolute;
   z-index: 1;
   top: 0.5rem;
   left: 3rem;
   color: var(--matsoft-lighter-text);
   pointer-events: none;
   transform-origin: left center;
   box-shadow: none;
   outline: none;
   text-transform: none;
   letter-spacing: normal;
   transition-property: transform, color, box-shadow, outline, text-transform;
   transition-duration: 225ms, 225ms, 225ms, 10ms, 500ms;
   transition-timing-function: ease, ease, ease, ease, ease;
}

.email:focus+.label,
.email:not(:placeholder-shown)+.label {
   transform: translateY(-85%) scale(0.73);
   text-transform: uppercase;
   letter-spacing: 0.1em;
   font-weight: 500;
   /* Add slight spacing between letters */
   color: var(--matsoft-light-text);
   background-color: var(--matsoft-purple-glowy);
   box-shadow: 0 0 0.3em var(--matsoft-element-shadow);
   outline: 0.5px double var(--matsoft-purple-glow);
   padding-top: 0.2em;
   padding-bottom: 0.2em;
   padding-left: 0.5em;
   padding-right: 0.5em;
   border-radius: 0.7em;
   z-index: 1;
}

.email.email-error:focus+.label,
.email.email-error:not(:placeholder-shown)+.label {
   color: var(--matsoft-dark-text);
   background-color: var(--matsoft-red);
}

.no-transition {
   transition: none !important;
}

.prepositioned {
   transform: translateY(-85%) scale(0.73);
   text-transform: uppercase;
   letter-spacing: 0.1em;
   font-weight: 500;
   color: var(--matsoft-light-text);
   background-color: var(--matsoft-purple-glowy);
   box-shadow: 0 0 0.3em var(--matsoft-element-shadow);
   outline: 0.5px double var(--matsoft-purple-glow);
   padding-top: 0.2em;
   padding-bottom: 0.2em;
   padding-left: 0.5em;
   padding-right: 0.5em;
   border-radius: 0.7em;
   z-index: 1;
}

.label-hidden {
   opacity: 0 !important;
   visibility: hidden !important;
   display: none !important;
   z-index: -1 !important;
   pointer-events: none !important;
}

.logo-container {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   margin-bottom: 1em;
   text-align: center;
}

/* MatchaSoft coloring and animation */
.matcha-text {
   font-size: 4rem;
   /* Debug line */
   /* outline: 1px solid red; */
   position: relative;
   width: fit-content;
   margin-bottom: 1rem;
   font-weight: lighter;
   background-clip: text;
   -webkit-background-clip: text;

   :focus {
      outline: medium auto currentColor;
      outline: medium auto invert;
   }

   -webkit-text-fill-color: transparent;
   text-shadow: 1px 0 0 var(--matsoft-light-text),
   -1px 0 0 var(--matsoft-miami-blue),
   0 1px 0 var(--matsoft-miami-blue),
   0 -1px 0 var(--matsoft-red),
   0 0 5px var(--matsoft-red),
   0 0 10px var(--matsoft-red),
   0 0 20px var(--matsoft-logo-pink-glow),
   0 0 40px var(--matsoft-logo-purple-1),
   0 0 80px var(--matsoft-logo-purple-2),
   0 0 90px var(--matsoft-logo-purple-3),
   0 0 15px var(--matsoft-light-text);
}

.soft-svg {
   display: block;
   margin-top: -2rem;
   margin-bottom: -2rem;
   margin-left: 1rem;
   transform: scale(0.9);
   transform-origin: top left;
   filter: drop-shadow(0 3px 1px var(--matsoft-logo-black)) drop-shadow(0 1px 5px var(--matsoft-red)) drop-shadow(0 0.5px 5px var(--matsoft-miami-blue));
}

.matcha-text:hover .rubik {
   width: fit-content;
   margin-left: auto;
   margin-right: auto;
   font-family: "Rubik Glitch", system-ui !important;
   font-weight: 900;
   animation: surge-flow 0.05s infinite;
   display: inline-block;
}

/* Stop the flicker animation on hover to prevent conflicts */
.matcha-text:hover .flicker-slow {
   animation: none;
}

.flicker-slow {
   animation: flicker 5s linear infinite;
}

.flicker-medium {
   animation: flicker 3s linear infinite;
}

.flicker-fast {
   animation: flicker 1s linear infinite;
}

@keyframes flicker {

   0%,
   19.999%,
   22%,
   62.999%,
   64%,
   64.999%,
   70%,
   100% {
      opacity: .99;
   }

   20%,
   21.999%,
   63%,
   63.999%,
   65%,
   69.999% {
      opacity: 0.4;
   }
}

@keyframes vibrate {

   0%,
   100% {
      transform: translateX(0);
   }

   25% {
      transform: translateX(-0.5px);
   }

   75% {
      transform: translateX(0.5px);
   }
}

@keyframes surge-flow {

   0%,
   100% {
      transform: translateX(0);
      opacity: 1;
   }

   5% {
      transform: translateX(-2px);
      opacity: 0.9;
   }

   7% {
      transform: translateX(2px);
      opacity: 0.7;
   }

   9% {
      transform: translateX(-2px);
      opacity: 1;
   }

   11% {
      transform: translateX(0);
      opacity: 0.8;
   }

   13% {
      transform: translateX(2px);
      opacity: 1;
   }

   15% {
      transform: translateX(-2px);
      opacity: 0.7;
   }

   17% {
      transform: translateX(0);
      opacity: 1;
   }

   23% {
      transform: translateX(2px);
      opacity: 1;
   }

   24% {
      transform: translateX(-2px);
      opacity: 0.8;
   }

   25% {
      transform: translateX(2px);
      opacity: 0.7;
   }

   26% {
      transform: translateX(-2px);
      opacity: 0.9;
   }

   27% {
      transform: translateX(0);
      opacity: 1;
   }

   51% {
      transform: translateX(-2px);
      opacity: 1;
   }

   52% {
      transform: translateX(2px);
      opacity: 0.6;
   }

   53% {
      transform: translateX(-2px);
      opacity: 0.7;
   }

   54% {
      transform: translateX(2px);
      opacity: 1;
   }

   55% {
      transform: translateX(-2px);
      opacity: 0.8;
   }

   56% {
      transform: translateX(0);
      opacity: 1;
   }

   77% {
      transform: translateX(2px);
      opacity: 1;
   }

   78% {
      transform: translateX(-2px);
      opacity: 0.7;
   }

   79% {
      transform: translateX(2px);
      opacity: 0.8;
   }

   80% {
      transform: translateX(-2px);
      opacity: 0.9;
   }

   81% {
      transform: translateX(0);
      opacity: 1;
   }
}

/* Text underneath logo */
.subtitle {
   /* These colors meet accessibility contrast standards (8.14:1 ratio) */
   color: var(--matsoft-green);
   font-size: 1.25rem;
   margin-bottom: 1.5rem;
   text-shadow: 0 0 0.5em var(--matsoft-green-glow);
   text-shadow: 0 0 50px var(--matsoft-miami-blue);
}

/* Main content body */
.message {
   /* These colors meet accessibility contrast standards (9.04:1 ratio) */
   color: var(--matsoft-light-text);
   font-size: 1rem;
   margin-bottom: 2em;
   line-height: 1.5;
}

/* Feedback and error messaging */
.feedback-message {
   font-size: 1rem;
   margin-top: 0.2em;
   margin-bottom: 0;
   line-height: 2.5;
   color: var(--matsoft-light-text);
}

.thank-you-msg {
   /* These colors meet accessibility contrast standards (8.14:1 ratio) */
   color: var(--matsoft-green);
   font-size: 1.25rem;
   margin-bottom: 1.5em;
   text-shadow: 0 0 0.5em var(--matsoft-green-glow);

   position: relative;
   animation: fadeIn;
}

.thank-you-msg::before {
   /* These colors meet accessibility contrast standards (8.14:1 ratio) */
   content: "";
   position: absolute;
   background: var(--matsoft-miami-blue);
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;

   transform: perspective(10em) rotateX(40deg);
   filter: blur(2.35em);
   opacity: 0.25;
}

.spaced-message {
   letter-spacing: 0.2rem;
}

/* Get Updates button */
.update-btn {
   padding: 0.6rem 1.2rem;
   margin-bottom: 0.75em;
   font-size: 1rem;
   border: none;
   border-radius: 5px;
   background-color: var(--matsoft-green-light);
   color: var(--matsoft-dark-text);
   cursor: pointer;
   transition: background-color 0.3s ease, transform 0.3s ease;
   box-shadow: 0 0 10px var(--matsoft-element-shadow);
}

.update-btn:hover,
.update-btn:focus {
   color: var(--matsoft-dark-text);
   background-color: var(--matsoft-green);
   outline: 2px solid var(--matsoft-element-outline-shadow);
   box-shadow: 0 0 15px var(--matsoft-element-outline-shadow);
   transform: translateY(-2px);
}

.update-btn:focus-visible {
   outline: medium auto currentColor;
   outline: medium auto invert;
}

/* Cancel button */
.cancel-btn {
   margin-top: 0.75rem;
   margin-right: 3rem;
   margin-left: -0.7rem;
   padding: 0.5rem;
   padding-left: 0.7rem;
   padding-right: 0.6rem;
   font-size: 1rem;
   border: none;
   border-radius: 5px;
   /* These colors meet accessibility contrast standards (4.56:1 ratio) */
   color: var(--matsoft-dark-text);
   background-color: var(--matsoft-red);
   cursor: pointer;
   transition: background-color 0.3s ease, transform 0.3s ease;
   box-shadow: 0 0 10px var(--matsoft-element-shadow);
}

.cancel-btn:hover,
.cancel-btn:focus {
   color: var(--matsoft-dark-text);
   background-color: var(--matsoft-red);
   outline: 2px solid var(--matsoft-element-outline-shadow);
   transform: translateY(-1.25px);
   box-shadow: 0 0 15px var(--matsoft-element-outline-shadow);
}

.cancel-btn:focus-visible {
   outline: medium auto currentColor;
   outline: medium auto invert;
}

/* Submit button */
.submit-btn {
   padding: 0.5rem;
   padding-left: 0.7rem;
   padding-right: 0.6rem;
   font-size: 1rem;
   border: none;
   border-radius: 5px;
   /* These colors meet accessibility contrast standards (8.33:1 ratio) */
   color: var(--matsoft-dark-text);
   background-color: var(--matsoft-green-light);
   cursor: pointer;
   transition: background-color 0.3s ease, transform 0.3s ease;
   box-shadow: 0 0 10px var(--matsoft-element-outline-shadow);
}

.submit-btn:hover,
.submit-btn:focus {
   color: var(--matsoft-dark-text);
   background-color: var(--matsoft-green);
   outline: 2px solid var(--matsoft-element-outline-shadow);
   box-shadow: 0 0 15px var(--matsoft-element-outline-shadow);
   transform: translateY(-1.25px);
}

.submit-btn:focus-visible {
   outline: medium auto currentColor;
   outline: medium auto invert;
}

/* Footer text styling */
.footer {
   bottom: 0;
   width: 100%;
   /* These colors meet accessibility contrast standards (ranging from 7.56:1 to 10.89:1 ratios) */
   color: var(--matsoft-green);
   margin-top: auto;
   text-align: center;
}

.footer a {
   text-decoration: none;
   color: inherit
}

/* Checkmark animation */
.checkmark__circle {
   stroke-dasharray: 166;
   stroke-dashoffset: 166;
   stroke-width: 2;
   stroke-miterlimit: 10;
   stroke: var(--matsoft-green);
   fill: none;
   animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards
}

.checkmark {
   width: 56px;
   height: 56px;
   border-radius: 50%;
   display: block;
   stroke-width: 2;
   stroke: var(--matsoft-dark-text);
   stroke-miterlimit: 10;
   margin: 0 auto 10px auto;
   box-shadow: inset 0px 0px 0px var(--matsoft-green);
   animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both
}

.checkmark__draw {
   transform-origin: 50% 50%;
   stroke-dasharray: 48;
   stroke-dashoffset: 48;
   animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards
}

@keyframes stroke {
   100% {
      stroke-dashoffset: 0
   }
}

@keyframes scale {

   0%,
   100% {
      transform: none
   }

   50% {
      transform: scale3d(1.1, 1.1, 1)
   }
}

@keyframes fill {
   100% {
      box-shadow: inset 0px 0px 0px 30px var(--matsoft-green)
   }
}

/* Fade out on feedback message */
.fade-out {
   animation: fadeOut 500ms forwards;
}

@keyframes fadeOut {
   from {
      opacity: 1;
   }

   to {
      opacity: 0;
   }
}

/* Fade in on Thank You message */
.fade-in {
   animation: fadeIn 1s forwards;
}

@keyframes fadeIn {
   from {
      opacity: 0;
   }

   to {
      opacity: 1;
   }
}

/* Base class for Rubik font */
.rubik {
   font-family: 'Rubik', sans-serif;
   font-optical-sizing: auto;
   transition: font-family 0.3s ease;
}

/* Variable font weight classes */
.rubik-300 {
   font-weight: 300;
   font-variation-settings: "wght"300;
}

.rubik-350 {
   font-weight: 350;
   font-variation-settings: "wght"350;
}

.rubik-400 {
   font-weight: 400;
   font-variation-settings: "wght"400;
}

.rubik-500 {
   font-weight: 500;
   font-variation-settings: "wght"500;
}

.rubik-600 {
   font-weight: 600;
   font-variation-settings: "wght"600;
}

.rubik-700 {
   font-weight: 700;
   font-variation-settings: "wght"700;
}

.rubik-footer {
   font-size: 0.8rem;
   font-weight: 300;
   font-variation-settings: "wght"300;
   letter-spacing: 0.05rem;
}

.rubik-logo-regular {
   font-size: 3.5rem;
   letter-spacing: 0.3rem;
   font-weight: 700;
   font-variation-settings: "wght"900;
}

.rubik-logo-glitch {
   font-family: "Rubik Glitch", system-ui;
   font-weight: 900;
   font-style: normal;
}

.rubik-footer {
   font-size: 0.8rem;
   font-weight: 450;
   font-variation-settings: "wght"450;
}

.space-mono-regular {
   font-family: "Space Mono", monospace;
   font-weight: 400;
   font-style: normal;
}

.space-mono-bold {
   font-family: "Space Mono", monospace;
   font-weight: 700;
   font-style: normal;
}

.space-mono-regular-italic {
   font-family: "Space Mono", monospace;
   font-weight: 400;
   font-style: italic;
}

.space-mono-bold-italic {
   font-family: "Space Mono", monospace;
   font-weight: 700;
   font-style: italic;
}

.space-mono-footer {
   font-family: "Space Mono", monospace;
   font-size: 0.8rem;
   font-weight: 300;
   font-variation-settings: "wght"300;
   letter-spacing: 0.05rem;
}

.matcha-text {
   white-space: nowrap !important;
}

.icon {
   --margin: -0.2rem;
   margin-top: var(--margin);
   margin-bottom: var(--margin);
   margin-right: 0.4rem;
}

/* Disable outline-effect animation in Safari and apply original outline styling */
@supports (-webkit-hyphens: none) and (not (-ms-ime-align: auto)) {
   .flicker-slow {
      animation: none !important;
   }

   .outline-container {
      display: none !important;
   }

   .email {
      outline: 1px double var(--matsoft-purple-glow) !important;

   }

   .email:focus {
      outline: 2px double var(--matsoft-purple-glowy) !important;
   }

   .email:focus::after {
      content: none !important;
   }

   .email-error {
      outline: 2px solid var(--matsoft-email-error) !important;
      box-shadow: 0 0 10px var(--matsoft-email-error) !important;
   }

   .email.email-error:focus-visible {
      outline: 2px solid var(--matsoft-email-error) !important;
      box-shadow: 0 0 10px var(--matsoft-email-error) !important;
   }
}