:root {
  --black: #000;
  --golden-dream: #edd920;
  --heliotrope: #bb40f5;
  --robin-egg-blue: #00d6c1;
  --steel-gray: #1a1a26;
  --tree-poppy: #f7931e;
  --woodsmoke: #101116;
  --woodsmoke-o-74: rgba(16,17,22,.74);
  --white: #fff;
  --white-o-50: rgba(255,255,255,.5);
}

.bg-black          { background-color: var(--black) }
.bg-robin-egg-blue { background-color: var(--robin-egg-blue) }
.bg-woodsmoke      { background-color: var(--woodsmoke) }
.bg-woodsmoke-o-74 { background-color: var(--woodsmoke-o-74) }
.bg-white          { background-color: var(--white) }

.border-black          { border-color: var(--black) }
.border-robin-egg-blue { border-color: var(--robin-egg-blue) }
.border-white          { border-color: var(--white) }
.border-white-o-50     { border-color: var(--white-o-50) }

.transition-all { transition: 300ms ease all }
.transition-bg  { transition: 300ms ease background-color }

.text-golden-dream   { color: var(--golden-dream) }
.text-heliotrope     { color: var(--heliotrope) }
.text-robin-egg-blue { color: var(--robin-egg-blue) }
.text-tree-poppy     { color: var(--tree-poppy) }
.text-black          { color: var(--black) }

::-moz-placeholder          { color: var(--green); opacity:1 }
:-ms-input-placeholder      { color: var(--green); opacity:1 }
::-webkit-input-placeholder { color: var(--green); opacity:1 }