style.css

html,
body {
  min-height: 100vh;
}

/* Password field for textarea */
.password-field {
  -webkit-text-security: disc;
  font-family: text-security-disc;
}

@keyframes taadaa {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.1;
  }
  100% {
    opacity: 1;
  }
}
body {
  background-color: #050505;
}

/* Modern dark mode colors for Neurai */
[data-theme="dark"] {
  --pico-background-color: #050505;
  --pico-card-background-color: #1a1a1a;
  --neurai-primary: #6c5ce7;
  --neurai-primary-hover: #5849c7;
  --neurai-accent: #00b894;
  --neurai-text: #e0e0e0;
  --neurai-text-secondary: #a0a0a0;
}

/* Light mode colors */
[data-theme="light"] {
  --pico-background-color: #d5d5d5;
  --pico-card-background-color: #ffffff;
  --neurai-primary: #5133be;
  --neurai-primary-hover: #5849c7;
  --neurai-accent: #00b894;
  --neurai-text: #2d3436;
  --neurai-text-secondary: #636e72;
}

[data-theme="dark"] body {
  background-color: #050505;
}

[data-theme="light"] body {
  background-color: #d5d5d5;
}
/*
:root {
  --font-family: "Quicksand", sans-serif !important;
}
*/
#loading {
  animation: taadaa 5s infinite;
}
.rebel-headline {
  white-space: nowrap;
  font-weight: 600;
}

/*
  If dark mode, use modern flat colors
*/
[data-theme="dark"] article {
  border: 1px solid #333333;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .rebel-headline {
  color: var(--neurai-primary);
}

/*
  If light mode, use modern flat colors
*/
[data-theme="light"] article {
  background-color: #ffffff;
  border: 1px solid #d0d0d0;
  box-shadow: 4px 6px 8px rgba(0, 0, 0, 0.4);
}

[data-theme="light"] .rebel-headline {
  color: var(--neurai-primary);
}

@font-face {
  font-family: Quicksand;
  src: url(Quicksand-VariableFont_wght.ttf);
}

.light-mode-toggle {
  float: right;
  position: relative;
  zoom: 0.8;
}

.rebel-light-mode__toggle-form {
  margin-bottom: 0;
}
.rebel-light-mode__toggle-form-label {
  margin-bottom: 0;
}

.rebel-navigator {
  zoom: 0.8;
  display: block;
}

@media screen and (min-width: 576px) {
  .rebel-navigator {
    zoom: 1.1;
  }
}
.rebel-navigator__container {
  padding-bottom: 30px;
}
.rebel-navigator__list {
  display: grid;
  grid-template-columns: repeat(
    3,
    1fr
  ); /* Creates a 3-column layout for mobile */
  text-align: center;
  padding: 0;
  margin: 0;
  list-style-type: none; /* Remove list bullets */
}
.rebel-navigator__list-item {
  padding: 20px;
  box-sizing: border-box; /* Include padding and border in the element's width */
}
/* Media query for desktop devices */
@media (min-width: 769px) {
  .rebel-navigator__list {
    grid-template-columns: repeat(
      6,
      1fr
    ); /* Adjust to a single row of 6 columns on desktop */
  }
}

.rebel-navigator__list-item--active a {
  --background-color: var(--muted-border-color) !important;
}

.rebel-navigator__list-item-link {
  font-weight: 300;
}

/*
  Navigator links in LIGHT and DARK mode
*/
[data-theme="light"] .rebel-navigator__list-item-link {
  color: var(--neurai-text);
}
[data-theme="dark"] .rebel-navigator__list-item-link {
  color: var(--neurai-text);
}

[data-theme="dark"] .rebel-navigator__list-item--active a {
  background-color: #2a2a2a !important;
  color: var(--neurai-primary) !important;
  border: 1px solid #404040;
}

[data-theme="light"] .rebel-navigator__list-item--active a {
  background-color: #d8dbdd !important;
  color: var(--neurai-primary) !important;
  border: 1px solid #c0c0c0;
}
.rebel-balance {
  font-weight: 200;
  text-align: center;
  margin-bottom: 0;
}
.rebel-balance__value-container {
  margin-bottom: calc(var(--pico-spacing) );
  text-align: center;
}
.rebel-balance__dollar-value {
  font-size: 1.2rem;
  font-weight: 200;
  display: inline-block;
}
.rebel-balance__base-currency-value {
  font-size: 1.2rem;
  font-weight: 200;
  display: inline-block;

  margin-left: 30px;
}
#newWalletButton {
  margin-bottom: var(--pico-spacing);
}

/** Override PICOs huge font size **/
@media (width >= 1280px) {
  :root {
    --pico-font-size: 100%;
  }
}

#mempool {
  zoom: 0.75;
}

/* Modern card styling for dark mode */
[data-theme="dark"] #mempool article {
  background-color: #1e1e1e;
  border: 1px solid #333333;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] table {
  border-color: #333333;
}

[data-theme="dark"] thead {
  border-bottom-color: #333333;
}

[data-theme="dark"] tbody tr {
  border-bottom-color: #2a2a2a;
}

/* Light mode card styling */
[data-theme="light"] #mempool article {
  background-color: #ffffff;
  border: 1px solid #d0d0d0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Accent colors for buttons in dark mode */
[data-theme="dark"] button:not([role="switch"]),
[data-theme="dark"] input[type="submit"],
[data-theme="dark"] input[type="button"] {
  background-color: var(--neurai-primary);
  border-color: var(--neurai-primary);
}

[data-theme="dark"] button:not([role="switch"]):hover,
[data-theme="dark"] input[type="submit"]:hover,
[data-theme="dark"] input[type="button"]:hover {
  background-color: var(--neurai-primary-hover);
  border-color: var(--neurai-primary-hover);
}

[data-theme="dark"] button.secondary {
  background-color: #2a2a2a;
  border-color: #3a3a3a;
  color: var(--neurai-text);
}

[data-theme="dark"] button.secondary:hover {
  background-color: #3a3a3a;
  border-color: #4a4a4a;
}

/* Input fields in dark mode */
[data-theme="dark"] input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background-color: #151515;
  border-color: #333333;
  color: var(--neurai-text);
}

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
  border-color: var(--neurai-primary);
  background-color: #1a1a1a;
}

/* Links in dark mode */
[data-theme="dark"] a {
  color: var(--neurai-primary);
}

[data-theme="dark"] a:hover {
  color: var(--neurai-primary-hover);
}

/*

  When we have transfers in progress/Mempool info
  On mobile we want to show that above the content (content can be SEND, RECEIVE or any other view)
  On desktop we want to show the mempool info to the right of the content
*/
.rebel-content-container {
  display: flex;
  flex-direction: column; /* Default: Two columns side by side on desktop */
}

.rebel-content-container__mempool,
.rebel-content-container__content {
  flex: 1;
}
@media (min-width: 768px) {
  .rebel-content-container {
    flex-direction: row; /* On mobile, switch to a single column layout */
  }
  #mempool {
    margin-left: 10px;
  }
  /* Order the RightColumn to come before LeftColumn */
  .rebel-content-container__content {
    order: -1;
    flex: 2;
  }
}

/* Features grid responsive layout */
.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

@media (max-width: 900px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}