styles.scss

@import 'tailwindcss/base';
@import 'base-styles.scss';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');

:root {
  --blue: #55b9f3;
  --blue-rgb: 85, 185, 243;
  --cyan: #55f3de;
  --cyan-rgb: 85, 243, 222;
  --dark-blue: #556af3;
  --dark-blue-rgb: 85, 106, 243;

  --gradient: linear-gradient(
    145deg,
    var(--cyan),
    var(--blue),
    var(--dark-blue)
  );
}

body {
  @apply bg-background text-color;
}

.dark {
  --background: #121212;
  --background-rgb: 18, 18, 18;
  --tabs: #1c1c1c;
  --text-color: #ffffff;
  --text-color-light: #a0aec0;
  --shadow-double: 7px 7px 10px #0b0b0b, -7px -7px 10px #191919;
}

.light {
  --background: #ffffff;
  --background-rgb: 255, 255, 255;
  --tabs: #fafafa;
  --text-color: #1a202c;
  --text-color-light: #718096;
  --shadow-double: 5px 5px 14px #ededed, -5px -5px 14px #fff;
}

.rotate niz-inline-svg {
  transform: rotateZ(180deg);
}