/* You can add global styles to this file, and also import other style files */

html, body { height: 100%; }
body {
  margin: 0;
  font-family: Roboto, "Helvetica Neue", sans-serif;
  padding-top: 3.2rem;
  background-color: #555;
}





.shadowed {
  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),0px 1px 1px 0px rgba(0, 0, 0, 0.14),0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  transition: box-shadow .2s ease-out;

  &:hover {
    box-shadow: 0 .2em .5em #777;
  }
}

a.no-style {
  color: inherit;
  text-decoration: none;
}


button {
  border-style: solid;
  border-width: .1rem;
  border-color: rgba(0,0,0, 0);
  border-radius: .2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: .5rem;

  transition: background-color .2s ease-out,
              border-color .2s ease-out;

  &:hover {
      background-color: #666;
      border-color: rgb(53, 53, 53);
  }

  &.icon {
      width: 2rem;
      height: 2rem;
      min-width: 1rem;
      min-height: 1rem;
      padding: 0;
      background-color: inherit;
  }

  &.raised {
    background-color: #4a4a4a;
  }

  &.alert {
    background: #F93154;
    color: #fff;
  }
}