nukeop/nuclear

$bgdarker: #1f212d;
$bgdark: #2c2e3a;
$bgdefault: #424557;
$bglight: #555977;
$bglighter: #6a6f95;

$background: $bgdark;
$background2: $bgdefault;
$background3: $bgdarker;
$lightbg: $bglighter;

$grey: #f8f8f2;
$blue: #6272a4;
$cyan: #8be9fd;
$green: #3cdd65;
$orange: #ffb86c;
$pink: #fc83d3;
$purple: #bd93f9;
$red: #ff5555;
$yellow: #f1fa8c;
$white: #fafafa;
$black: #202020;

$very-short-duration: 0.1s;
$short-duration: 0.3s;
$medium-duration: 0.5s;
$long-duration: 1s;

$mid_screen: 800px;
$small_screen: 600px;

@mixin roundCorners {
  border-radius: 0.25em;
}

@mixin roundCorners-lg {
  border-radius: 0.5em;
}

@mixin circle {
  border-radius: 9999px;
  overflow: hidden;
}

@mixin transition {
  transition: 0.25s;
}

@mixin center {
  align-items: center;
  justify-content: center;
}

@mixin ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@mixin shadow {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.12), 0 4px 4px rgba(0, 0, 0, 0.12),
    0 8px 8px rgba(0, 0, 0, 0.12), 0 16px 16px rgba(0, 0, 0, 0.12) !important;
}

@mixin textShadow {
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25), 0 4px 8px rgba(0, 0, 0, 0.25);
}

@mixin high-shadow {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.1), 0 4px 4px rgba(0, 0, 0, 0.1),
    0 8px 8px rgba(0, 0, 0, 0.1), 0 16px 16px rgba(0, 0, 0, 0.1), 0 32px 32px rgba(0, 0, 0, 0.1) !important;
}

.nuclear {
  font-family: "Lato", sans-serif;
  color: $white;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes zoom-in {
  from {
    transform: scale(1.1);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes zoom-out {
  from {
    transform: scale(1);
    opacity: 1;
  }

  to {
    transform: scale(1.1);
    opacity: 0;
  }
}