body {
  font-family: system-ui, sans-serif;
  background: #000;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100vh;
  margin: 0;
}

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

.card {
  padding: 25px;
  margin-top: 100px;
  margin-bottom: 100px;
  width: 320px;
  display: grid;
  place-content: center;
  color: white;
  font-size: 20px;
  --border-angle: 0turn;
  --main-bg: conic-gradient(
    from var(--border-angle),
    rgb(15, 15, 15),
    rgb(10, 10, 10) 5%,
    rgb(10, 10, 10) 60%,
    rgb(15, 15, 15) 95%
  );
  --gradient-border: conic-gradient(
    from var(--border-angle),
    transparent 25%,
    #fc7202,
    #ffa308 99%,
    transparent
  );
  border: solid 5px transparent;
  border-radius: 2em;
  background:
    var(--main-bg) padding-box,
    var(--gradient-border) border-box,
    var(--main-bg) border-box;
  background-position: center center;
  animation: bg-spin 3s linear infinite;
}
.box:hover {
  animation-play-state: paused;
}
@keyframes bg-spin {
  to {
    --border-angle: 1turn;
  }
}
@property --border-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0turn;
}

input {
  width: 100%;
  padding: 10px;
  border-radius: 6px;
  border: none;
  margin-top: 10px;
  font-size: 14px;
  box-sizing: border-box;
}
.strength {
  margin-top: 15px;
  font-weight: bold;
}
.weak {
  color: #ef4444;
}
.medium {
  color: #facc15;
}
.strong {
  color: #22c55e;
}

.PS {
  text-align: center;
}

.hub {
  border-radius: 5px;
  background-color: #fc7202;
  padding: 5px;
  margin-left: 3px;
  color: #000;
}

.site-footer {
  background-color: #000;
  color: #d9d9d9;
  text-align: center;
  width: 100%;
  border-top: 1px solid #ffa308;
  margin-top: auto;
}

.footer-content {
  max-width: 900px;
  margin: 0 auto;
  line-height: 1.6;
  font-size: 0.9rem;
}

.footer-content p {
  margin-bottom: 12px;
}

.footer-note {
  margin-top: 20px;
  font-style: italic;
  color: #999;
  padding-bottom: 10px;
}

@media (max-width: 600px) {
  .footer-content {
    font-size: 0.85rem;
  }
}

.special-link:link {
  color: #fc7202;
}

.special-link:visited {
  color: #ffa308;
}

.special-link:hover {
  color: #fc7202;
}

.special-link:active {
  color: #ffa308;
}

.footer-ass {
  text-decoration: none;
}