common.scss

$background: #282a36;
$background2: #44475a;
$background3: #21222c;
$lightbg: #7e83a6;
$grey: #f8f8f2;
$blue: #6272a4;
$cyan: #8be9fd;
$green: #50fa7b;
$orange: #ffb86c;
$pink: #ff79c6;
$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 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 0 38px rgba(0, 0, 0, 0.3), 0 0 12px rgba(0, 0, 0, 0.22);
}

.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;
  }
}