@import url("https://fonts.googleapis.com/css2?family=Comic+Neue:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");

.d-none {
  display: none !important;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: montserrat;
}

body {
  margin: 0;
  height: auto;
  width: auto;
  overflow-y: hidden;
  overflow-x: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #123651, #0d5496, #346597, #3976b2);
}

#checkEmail-N {
  margin: 0;
  padding: 0;
  text-align: center;
  font-size: medium;
  bottom: -5px;
  position: relative;
  display: none;
}

#background {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

#background .ball {
  position: fixed;
  width: 40vh;
  height: 40vh;
  border-radius: 100%;
  padding: 0;
  box-shadow: 0px 0px 120px 50px rgba(0, 0, 0, 0.2);
  background: linear-gradient(

        #ea7a4e 1%,

        #c36b69 2%,

        #9c5b83 5%,

        #754c9e 12%,

        #4646af,

        #0d20ae,

        #121d76

      );
  opacity: 0.5;
  z-index: 0;
  pointer-events: none;
}

#background .ball.x1 {
  offset-path: path("M12,0 A12,12 0 0,0 12,24 A12,12 0 0,0 12,0");
  offset-rotate: 0deg;
  animation: mover 6s linear infinite;
}

#background .ball.x2 {
  offset-path: path("M-12,0 A-12,-12 0 1,1 -12,-24 A-12,-12 0 1,1 -12,0");
  offset-rotate: 0deg;
  animation: mover 3s linear infinite;
}

#background .ball.x3 {
  offset-path: path("M12,0 A12,12 0 1,1 12,24 A12,12 0 1,1 12,0");
  offset-rotate: 0deg;
  animation: mover 3s linear infinite;
}

#background .ball.x4 {
  offset-path: path("M-12,0 A-12,-12 0 1,1 -12,-24 A-12,-12 0 1,1 -12,0");
  offset-rotate: 0deg;
  animation: mover 7s linear infinite;
}

#background .ball.x5 {
  offset-path: path("M12,0 A12,12 0 0,0 12,24 A12,12 0 0,0 12,0");
  offset-rotate: 0deg;
  animation: mover 3s linear infinite;
}

#background .ball.x6 {
  offset-path: path("M-12,0 A-12,-12 0 1,1 -12,-24 A-12,-12 0 1,1 -12,0");
  offset-rotate: 0deg;
  animation: mover 5s linear infinite;
}

#background .ball.x7 {
  offset-path: path("M12,0 A12,12 0 0,0 12,24 A12,12 0 0,0 12,0");
  offset-rotate: 0deg;
  animation: mover 6s linear infinite;
}

#background .ball.x8 {
  offset-path: path("M-12,0 A-12,-12 0 1,1 -12,-24 A-12,-12 0 1,1 -12,0");
  offset-rotate: 0deg;
  animation: mover 3s linear infinite;
}

#background .ball.x9 {
  offset-path: path("M12,0 A12,12 0 0,0 12,24 A12,12 0 0,0 12,0");
  offset-rotate: 0deg;
  animation: mover 7s linear infinite;
}

@keyframes mover {
  0% {

      offset-distance: 0%;

    }

  

    50% {

      offset-distance: 50%;

    }

  

    100% {

      offset-distance: 100%;

    }
}

#wrapper-container {
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
  color: #18476b;
  width: 80%;
  height: auto;
  max-width: 600px;
  position: relative;
  z-index: 10;
}

#wrapper-container h1 {
  text-align: center;
}

#wrapper-container #wrapper-content p {
  font-weight: 500;
  margin: 15px 0px;
}

#wrapper-container #wrapper-content ol {
  list-style-position: inside;
  list-style: none;
}

#wrapper-container #wrapper-content ol li {
  margin: 5px 0px;
}

#wrapper-container #wrapper-content ul {
  list-style-position: inside;
}

#wrapper-container #wrapper-content ul li {
  margin: 5px 0px;
}

#wrapper-container #wrapper-content #submitEmail {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 20px 0px 0px 0px;
}

#wrapper-container #wrapper-content #submitEmail #emailInput {
  width: 80%;
  border-radius: 10px;
  padding: 10px 5px;
  border: 1px solid #18476b;
  box-shadow: 0px 0px 10px 1px #18476b3d;
}

#wrapper-container #wrapper-content #submitEmail #emailInput:focus {
  outline: none;
  border: 2px solid #18476b;
}

#wrapper-container #wrapper-content #submitEmail #submitButton {
  background-color: #18476b;
  color: #f9f9f9;
  border: none;
  padding: 10px 5px;
  border-radius: 5px;
  font-size: 15px;
  cursor: pointer;
}

#wrapper-container #wrapper-content #submitEmail #submitButton:hover {
  background-color: #0e314d;
}

#wrapper-container #wrapper-content .feedback-message {
  text-align: center;
  border-radius: 10px;
  padding: 10px 12px;
}

#wrapper-container #wrapper-content .feedback-message.error {
  color: #9e1c1c;
  background: rgba(244, 208, 208, 0.7);
}

#wrapper-container #wrapper-content .feedback-message.success {
  color: #0e684f;
  background: rgba(199, 237, 226, 0.8);
}

#wrapper-container #wrapper-content .secondary-action {
  text-align: center;
}

#wrapper-container #wrapper-content .secondary-action a {
  color: #18476b;
  font-weight: 600;
  text-decoration: none;
}