button, select {
  border: none;
  opacity: 0.7;
  font-size: 1.0em;
  padding: .6em 3em;
  margin: 1.612em 1em 1em;
  background-color: rgba(250, 250, 250, 0.9);
  box-shadow: 0px 1px 11px -3px rgba(23,23,23,0.73);
}
button:hover, select:hover {
  opacity: 1.0
}

button {
  cursor: pointer;
}

select {
  width: auto;
  border: none;
  cursor: pointer;
  border-radius: .6em;
  background-image: url(http://www.devpunks.com/down-arrow.svg);
  background-size: 8%;
  text-align-last: center;
  background-repeat: no-repeat;
  background-position: 90% 50%;

  /* to remove arrows */
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
}

select::-ms-expand
  { display: none // IE }





infinity-calendar {
  width: auto;
}
infinity-calendar {
  height: 100vh;
  margin-top: 0.3em;
  text-align: center;

  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
  background-color: var(--lightest-color);
}

infinity-calendar header {
  flex-basis: 100%;
  text-align: center;
  background: var(--darkest-color);
}

infinity-calendar menu {
  display: flex;
  flex-basis: 100%;
  justify-content: space-between;
  background: var(--lightest-color);
}

infinity-calendar menu button {
  width: 30%
}

infinity-calendar a[onclick] {
  display: flex;
  flex-basis: 3rem;
  justify-content: center;


  border: none;
  margin: .5em;
  height: 3rem;
  padding: .5em;
  line-height: 3rem;
  text-align: center;
  border-radius: 3rem;
  background-color: rgba(240, 240, 240, 0.9);
  box-shadow: 0px 1px 11px -3px rgba(23,23,23,0.73);
}

infinity-calendar
  template[name=days]~ a:hover {
    background-color: rgba(250, 250, 250, 0.9);
  }

infinity-calendar select {
  width: 36%;
}

