html,
body {
  margin: 0px;
  padding: 0px;
  font-family: 'Segoe UI', 'Lato', 'Pacifico', 'Montserrat';
}

body {
  width: 100%;
}

.jumbotron {
  background-color: white;
}


h2 {
  color: magenta;
  text-shadow: .5px .8px 1px black;
}

h3 {
  color: magenta;
  text-shadow: .5px .8px 1px black;
}

h4 {
  color: springgreen;
  text-shadow: .5px .8px 1px black;
}

h5 {
  color: magenta;
  text-shadow: .5px .8px 1px black;
}

.crown {
  width: 17%;
}

@media (min-width: 768px) {
  .crown {
    width: 8%;
  }
}

/* My repositories screen shoots */
.carousel-inner>.item>img {
  margin: 0 auto;
  width: 93%;
}

@media (min-width: 768px) {
  .carousel-inner>.item>img {
    width: 35%;
  }
}

.picture-header {
  width: 88%;
}

@media (min-width: 768px) {
  .picture-header {
    width: 35%;
  }
}

a.left.carousel-control,
a.right.carousel-control {
  opacity: 0;
}

.pack {
  width: 62%;
}

@media (min-width: 768px) {
  .pack {
    width: 53%;
  }
}

.picture-footer {
  width: 80%;
}

@media (min-width: 768px) {
  .picture-footer {
    width: 35%;
  }
}

.logo-bar {
  margin: 1px auto;
}

.face {
  background: hsl(221, 44%, 40%);
  color: white;
  font-size: 18px;
}

.twit {
  background: hsl(206, 82%, 60%);
  color: white;
  font-size: 18px;
}

.inst {
  background: hsl(315, 71%, 50%);
  color: white;
  font-size: 18px;
}

.link {
  background: blue;
  color: white;
  font-size: 18px;
}

.yout {
  background: hsl(0, 100%, 50%);
  color: white;
  font-size: 18px;
}

.pint {
  background: #c92228;
  color: white;
  font-size: 18px;
}