/* Variables */
html {
  
  color: white;
  
  text-align: center;
}

.marbles {
  display: inline-block;
  list-style: none;
  margin: 0;
  padding: .5em 1em;
  position: relative;
}

.marbles::after {
  background-image: -webkit-linear-gradient(#CD5E40, #C15028);
  background-image: linear-gradient(#CD5E40, #C15028);
  border-bottom: 3px solid #F68249;
  border-radius: .25em;
  bottom: 0;
  box-shadow: 0 0.25em 0.35em rgba(0, 0, 0, 0.75);
  content: "";
  display: block;
  height: 1em;
  left: 0;
  position: absolute;
  right: 0;
}

.marble {
  display: inline-block;
}

.marble + .marble {
  margin-left: -.2em;
}

.marble--link {
  background-image: -webkit-radial-gradient(#3179ef, #010d47);
  background-image: radial-gradient(#3179ef, #010d47);
  border: 2px solid #3179EF;
  border-radius: 100%;
  box-shadow: 0 0 0.5em rgba(255, 255, 255, 0.75);
  display: inline-block;
  height: 3em;
  position: relative;
  text-indent: -9999em;
  width: 3em;
}

.marble--link::after {
  background-image: -webkit-radial-gradient(#6098f3, #021679);
  background-image: radial-gradient(#6098f3, #021679);
  border-radius: 100%;
  bottom: 0;
  content: "";
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  -webkit-transition: opacity 200ms ease-out;
  transition: opacity 200ms ease-out;
  top: 0;
}

.marble--link:hover::after {
  opacity: 1;
}

.marble--joy {
  background-image: -webkit-radial-gradient(#fef9a2, #fee800, #ea9600);
  background-image: radial-gradient(#fef9a2, #fee800, #ea9600);
  border-color: #FEF9A2;
}

.marble--joy::after {
  background-image: -webkit-radial-gradient(#fef9a2, #fee800);
  background-image: radial-gradient(#fef9a2, #fee800);
}

.marble--anger {
  background-image: -webkit-radial-gradient(#fcce4a, #ff530f, #f40910);
  background-image: radial-gradient(#fcce4a, #ff530f, #f40910);
  border-color: #FCCE4A;
}

.marble--anger::after {
  background-image: -webkit-radial-gradient(#fcce4a, #ff530f);
  background-image: radial-gradient(#fcce4a, #ff530f);
}

.marble--disgust {
  background-image: -webkit-radial-gradient(#c4f4a9, #87e845, #01a802);
  background-image: radial-gradient(#c4f4a9, #87e845, #01a802);
  border-color: #C4F4A9;
}

.marble--disgust::after {
  background-image: -webkit-radial-gradient(#c4f4a9, #87e845);
  background-image: radial-gradient(#c4f4a9, #87e845);
}

.marble--fear {
  background-image: -webkit-radial-gradient(#ffd4fc, #ed7de1, #7b0398);
  background-image: radial-gradient(#ffd4fc, #ed7de1, #7b0398);
  border-color: #FFD4FC;
}

.marble--fear::after {
  background-image: -webkit-radial-gradient(#ffd4fc, #ed7de1);
  background-image: radial-gradient(#ffd4fc, #ed7de1);
}

.marble--sadness {
  background-image: -webkit-radial-gradient(#a2ddef, #4f80c2, #1f4081);
  background-image: radial-gradient(#a2ddef, #4f80c2, #1f4081);
  border-color: #A2DDEF;
}

.marble--sadness::after {
  background-image: -webkit-radial-gradient(#a2ddef, #4f80c2);
  background-image: radial-gradient(#a2ddef, #4f80c2);
}