:root {
  --yellow: hsl(36, 100%, 50);
  -red: hsl(8, 100%, 50%);
  --blue: hsl(240, 60%, 50%);
  --violet: hsl(288, 60%, 50%);
  --text-white: hsl(0, 0%, 100%);
  --text-light-gray: hsl(0, 0%, 90%);
  --body-bg-color:hsl(0,0%,0%);
  --glass-bg-color: hsla (0, 0%, 100%, 0.05);
  --border-color: hsla(0, 0%, 100%, 0.25);
  --blur: blur(10px);
  --button-hover-color: hsla (0, 0%, 0%, 0.3);
}

body {
  background-color: var(--body-bg-color);
}
body::after,
body::before{
  content: '';
  position: fixed;
  height: 400px;
  width: 400px;
  border-radius: 50%;
  z-index: -1;
  filter: blur(150px);
  opacity: 0.5;
}

body::before{
  background-color: var(--blue);
  left: 0;
  bottom: 0;
  transform: translateY(50%);
}
body::after{
  background-color: var(--violet);
  right: 0;
  top: 0;
  transform: translateX(50%);
}