body {
  width: 100%;
  height: 100vh;
  background: linear-gradient(
    to right,
    hsla(5,  10%, 10%, 1)  0%,
    hsla(5,  20%, 12%, 1) 100%
  );
}

a {
  color: steelblue;
}

a:hover {
  color: royalblue;
}

a:visited {
  color: lightblue;
}

.entete {
  color: white;
  text-align: center;
  padding-top: 2rem;
  padding-bottom: 1rem;
}

.overlaytext {
    color: white;
    text-shadow: 2px 2px 2px rgba(0,0,0,0.6);
}



.callout {
  padding: 20px;
  margin: 20px 0;
  border: 1px solid #eee;
  border-left-width: 5px;
  border-radius: 3px;
  h4 {
    margin-top: 0;
    margin-bottom: 5px;
  }
  p:last-child {
    margin-bottom: 0;
  }
  code {
    border-radius: 3px;
  }
  & + .bs-callout {
    margin-top: -5px;
  }
}
@each $name,$color in (default,#777),(primary,#428bca),(success,#5cb85c),(danger,#d9534f),(warning,#f0ad4e),(info,#5bc0de), (bdc,#29527a) {
  .callout-#{$name} {
    border-left-color: $color;
    h4 {
      color: $color;
    }
  }
}