services-panel/assets/sass/main.scss

@import './colors.scss';
@import './fonts.scss';
* {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'FantasqueNF', monospace;
}

header {
  margin-top: 2.5rem;
  display: flex;
  justify-content: center;
  
  h1.cli {
    font-size: 2.5rem;
    .decoration {
      font-variant-ligatures: none;
    }
    .hint {
      font-style: italic;
    }
  }

  .subtitle {
    font-size: 1.25rem;
    margin-top: 1rem;
  }
}

.blink {
  animation: blink 1s step-start infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

@media (prefers-color-scheme: light) {
  body {
    background: $base_latte;
    color: $text_latte;
  }
  header{
    h1.cli {
      .pink {
        color: $pink_latte;
      }
      .yellow {
        color: $yellow_latte;
      }
      .cyan {
        color: $sky_latte;
      }
      .hint {
        color: $subtext0_latte;
      }
    }
  }
}

@media (prefers-color-scheme: dark) {
  body {
    background: $base_macchiato;
    color: $text_macchiato;
  }
  header{
    h1.cli {
      .pink {
        color: $pink_macchiato;
      }
      .yellow {
        color: $yellow_macchiato;
      }
      .cyan {
        color: $sky_macchiato;
      }
      .hint {
        color: $subtext0_macchiato;
      }
    }
  }
}