$timing: 0.5s;


body {
  font-family: 'Inconsolata', monospace;
}

.color-list {
  display: flex;
  flex-direction: row;
  height: 150px;
}

.color {
  flex: 0 0 20%; /*flex-grow | flex-shrink | flex-basis*/
  box-shadow: 0 0 30px #424242;
  padding: 1em;
  color: white;
  transition: flex-basis $timing ease-in-out;
  &:hover {
    flex-basis: 25%;
    .details {
      opacity: 1;
    }
  }
}

.name {
  font-size: 1.2em;
}

.details {
  padding: 0;
  list-style: none;
  opacity: 0;
  transition: opacity 500ms ease-in-out;
}

.details li {
  line-height: 2em;
}

#clean {
  background-color: #A7D2CB;
}

#butter {
  background-color: #F2D388;
}

#salmon {
  background-color: #C98474;
}

#eggplant {
  background-color: #874C62;
}

* {
  box-sizing: border-box;
}