@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&family=JetBrains+Mono:wght@400;500&display=swap");
:root {
  --bulma-body-background-color: #0d0d1a;
  --bulma-body-color: #e8e8ff;
  --bulma-card-background-color: #12122a;
  --bulma-box-background-color: #12122a;
  --bulma-box-color: #e8e8ff;
  --bulma-title-color: #e8e8ff;
  --bulma-subtitle-color: #8888aa;
  --bulma-label-color: #e8e8ff;
  --bulma-input-background-color: #12122a;
  --bulma-input-color: #e8e8ff;
  --bulma-input-border-color: rgba(0, 255, 224, 0.12);
  --bulma-select-color: #e8e8ff;
  --bulma-table-color: #e8e8ff;
  --bulma-table-background-color: #12122a;
  --bulma-notification-background-color: #12122a;
  --bulma-progress-bar-background-color: #12122a;
  --bulma-scheme-main: #0d0d1a;
  --bulma-scheme-main-bis: #12122a;
  --bulma-scheme-main-ter: #1a1a35;
  --bulma-border: rgba(0, 255, 224, 0.12);
  --bulma-border-hover: rgba(0, 255, 224, 0.35);
  --bulma-link: #00ffe0;
  --bulma-link-hover: #00bfa5;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bulma-body-background-color: #0d0d1a;
    --bulma-body-color: #e8e8ff;
    --bulma-box-background-color: #12122a;
    --bulma-title-color: #e8e8ff;
    --bulma-subtitle-color: #00ffe0;
  }
}
html, body {
  background-color: #0d0d1a !important;
  color: #e8e8ff;
  font-family: "Poppins", sans-serif;
  min-height: 100vh;
}

h1.title, h2.title, h3.title, h4.title,
.title {
  color: #e8e8ff !important;
  font-family: "Poppins", sans-serif;
  letter-spacing: 0.03em;
  text-shadow: 0 0 12px rgba(0, 255, 224, 0.25);
}

.subtitle {
  color: #00ffe0 !important;
  font-family: "Poppins", sans-serif;
}

.label {
  color: #8888aa !important;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.control, p, li, span:not(.tag):not(.icon) {
  font-family: "JetBrains Mono", monospace;
  color: #e8e8ff;
}

a {
  color: #00ffe0;
}
a:hover {
  color: #00bfa5;
}

.navbar {
  background-color: #1a0a3a !important;
  border-bottom: 1px solid rgba(0, 255, 224, 0.35);
  box-shadow: 0 2px 16px rgba(0, 255, 224, 0.08);
}
.navbar .navbar-brand {
  align-items: center;
  color: #ffffff;
}
.navbar .navbar-brand h1 {
  color: #ffffff !important;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  text-shadow: 0 0 10px #00ffe0;
}
.navbar .navbar-menu {
  background-color: #1a0a3a;
}
.navbar .navbar-item {
  color: #e8e8ff;
  font-family: "Poppins", sans-serif;
}
.navbar .navbar-item:hover, .navbar .navbar-item:focus {
  background-color: rgba(0, 255, 224, 0.07) !important;
  color: #00ffe0;
}
.navbar .navbar-link {
  color: #e8e8ff;
}
.navbar .navbar-burger span {
  background-color: #ffffff;
}

.box {
  background-color: #12122a !important;
  color: #e8e8ff !important;
  border: 1px solid rgba(0, 255, 224, 0.35);
  border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(0, 255, 224, 0.12), 0 0 18px rgba(0, 255, 224, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.box:hover {
  border-color: rgba(0, 255, 224, 0.55);
  box-shadow: 0 0 0 1px rgba(0, 255, 224, 0.3), 0 0 28px rgba(0, 255, 224, 0.14);
}
.box .content {
  color: #e8e8ff;
  font-family: "JetBrains Mono", monospace;
}

.section {
  background-color: #0d0d1a;
  color: #e8e8ff;
}

.container {
  color: #e8e8ff;
}

.button {
  font-family: "Poppins", sans-serif;
  letter-spacing: 0.04em;
}
.button.is-primary {
  background-color: #4b0082;
  color: #ffffff;
  border-color: transparent;
}
.button.is-primary:hover {
  background-color: #6a00c8;
  box-shadow: 0 0 12px rgba(106, 0, 200, 0.5);
}
.button.is-light {
  background-color: rgba(255, 255, 255, 0.07);
  color: #e8e8ff;
  border-color: rgba(0, 255, 224, 0.12);
}
.button.is-light:hover {
  background-color: rgba(0, 255, 224, 0.1);
  border-color: rgba(0, 255, 224, 0.35);
  color: #00ffe0;
}
.button.is-link {
  background-color: transparent;
  color: #00ffe0;
  border-color: #00ffe0;
}
.button.is-link:hover {
  background-color: rgba(0, 255, 224, 0.1);
}
.button.is-danger {
  background-color: transparent;
  color: #f44336;
  border-color: #f44336;
}
.button.is-danger:hover {
  background-color: rgba(244, 67, 54, 0.15);
}
.button.is-info {
  background-color: transparent;
  color: #00bfa5;
  border-color: #00bfa5;
}
.button.is-info:hover {
  background-color: rgba(0, 191, 165, 0.12);
}
.button.is-success {
  background-color: transparent;
  color: #00e676;
  border-color: #00e676;
}
.button.is-success:hover {
  background-color: rgba(0, 230, 118, 0.12);
}

.input, .textarea, .select select {
  background-color: #12122a !important;
  color: #e8e8ff !important;
  border-color: rgba(0, 255, 224, 0.12) !important;
  font-family: "JetBrains Mono", monospace;
}
.input:focus, .input:active, .textarea:focus, .textarea:active, .select select:focus, .select select:active {
  border-color: #00ffe0 !important;
  box-shadow: 0 0 0 2px rgba(0, 255, 224, 0.15) !important;
}

.select::after {
  border-color: #00ffe0 !important;
}

.tag {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.78rem;
}
.tag.is-primary {
  background-color: #4b0082;
  color: #ffffff;
}
.tag.is-info {
  background-color: #1a3a5c;
  color: #64b5f6;
}
.tag.is-success {
  background-color: #0a2e1a;
  color: #00e676;
}
.tag.is-danger {
  background-color: #2e0a0a;
  color: #ef9a9a;
}
.tag.is-warning {
  background-color: #2e260a;
  color: #ffeb3b;
}
.tag.is-light {
  background-color: #1e1e3a;
  color: #8888aa;
}

.notification {
  background-color: #12122a;
  color: #e8e8ff;
  border-left: 3px solid #00ffe0;
}
.notification.is-success {
  border-left-color: #00e676;
  background-color: #0a1f12;
  color: #a5d6a7;
}
.notification.is-danger {
  border-left-color: #f44336;
  background-color: #1f0a0a;
  color: #ef9a9a;
}
.notification.is-warning {
  border-left-color: #ffeb3b;
  background-color: #1f1a0a;
  color: #ffeb3b;
}
.notification.is-info {
  border-left-color: #00ffe0;
  background-color: #0a1a1f;
  color: #80deea;
}

.progress {
  background-color: #1e1e3a;
}
.progress.is-primary::-webkit-progress-value {
  background-color: #00ffe0;
}
.progress.is-primary::-moz-progress-bar {
  background-color: #00ffe0;
}

.tabs {
  border-bottom-color: rgba(0, 255, 224, 0.12);
}
.tabs a {
  color: #8888aa;
  border-bottom-color: transparent;
}
.tabs a:hover {
  color: #00ffe0;
  border-bottom-color: #00ffe0;
}
.tabs li.is-active a {
  color: #00ffe0;
  border-bottom-color: #00ffe0;
}

.hero {
  background-color: #1a0a3a;
  color: #ffffff;
}
.hero-title {
  color: #ffffff;
  text-shadow: 0 0 16px rgba(0, 255, 224, 0.4);
}
.hero-subtitle {
  color: #00ffe0;
}

.hero-image-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #0d0d1a;
}
.hero-image-wrapper .hero-banner-img {
  display: block;
  max-height: 540px;
  width: auto;
  max-width: 100%;
  mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%), linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
  mask-composite: intersect;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%), linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
  -webkit-mask-composite: source-in;
}

.footer {
  background-color: #1a0a3a;
  color: #8888aa;
  border-top: 1px solid rgba(0, 255, 224, 0.12);
}
.footer a {
  color: #00ffe0;
}

.alert.is-success {
  background-color: #0a2e1a;
  color: #00e676;
}
.alert.is-warning {
  background-color: #2e260a;
  color: #ffeb3b;
}
.alert.is-danger {
  background-color: #2e0a0a;
  color: #ef9a9a;
}

.profile-card {
  background: #12122a;
  border: 1px solid rgba(0, 255, 224, 0.35);
  box-shadow: 0 0 20px rgba(0, 255, 224, 0.1);
  padding: 1.5rem;
  border-radius: 6px;
  max-width: 400px;
  margin: 2rem auto;
  text-align: center;
}
.profile-card h1 {
  font-size: 1.8rem;
  color: #e8e8ff;
  margin-bottom: 1rem;
}
.profile-card p {
  font-size: 1.2rem;
  color: #8888aa;
  margin: 0.5rem 0;
}
.profile-card .profile-info {
  font-size: 1rem;
  color: #9c4dcc;
}
.profile-card .verified {
  font-weight: bold;
  color: #00ffe0;
}
.profile-card .not-verified {
  font-weight: bold;
  color: #f44336;
}

input[type=checkbox],
input[type=radio] {
  accent-color: #00ffe0;
}

#r span, #r h3, #r a {
  color: unset;
  font-family: unset;
}

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #0d0d1a;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 255, 224, 0.35);
  border-radius: 3px;
}