/*
  This stylesheet contains styles that are general and
  could not be grouped in a file of their own
*/

.container {
  max-width: 960px;
}

.turbolinks-progress-bar {
  background-color: $astuto-black;
  height: 2px;
}

.gravatar {
  border-radius: 100%;
}

.dot {
  width: 16px;
  height: 16px;
  border-radius: 100%;

  margin-top: auto;
  margin-bottom: auto;
  margin-right: 4px;
}

.loginInfo {
  text-decoration: underline;
}

.btn {
  color: #fff;
  background-color: #343a40;
  border-color: #343a40;
}

// Credits: https://codepen.io/chriscoyier/pen/YzXBYvL
.scroll-shadows {
  max-height: 200px;
  overflow: auto;

  background:
    /* Shadow Cover TOP */
    linear-gradient(
      white 30%,
      rgba(255, 255, 255, 0)
    ) center top,
    
    /* Shadow Cover BOTTOM */
    linear-gradient(
      rgba(255, 255, 255, 0), 
      white 70%
    ) center bottom,
    
    /* Shadow TOP */
    radial-gradient(
      farthest-side at 50% 0,
      rgba(0, 0, 0, 0.2),
      rgba(0, 0, 0, 0)
    ) center top,
    
    /* Shadow BOTTOM */
    radial-gradient(
      farthest-side at 50% 100%,
      rgba(0, 0, 0, 0.2),
      rgba(0, 0, 0, 0)
    ) center bottom;
  
  background-repeat: no-repeat;
  background-size: 100% 40px, 100% 40px, 100% 10px, 100% 10px;
  background-attachment: local, local, scroll, scroll;
}