/* ==========================================================================
   Author's custom styles
   ========================================================================== */

body {
background-color: #222;
color:#fff
}

.container-fluid{
}

.jumbotron{
background-color: #f8f8fa;
color: #222;
}

@media screen and (min-width: 768px) {
  .jumbotron {
    padding: 28px 0;
  }
}

.jumbotron p {
  font-weight: 400;
}

.jumbotron h1{
   margin-bottom:-10px;
   font-size: 48px;
}

.jumbotron h2 {
   margin-top:25px;
   margin-bottom:5px;
   padding:5px;
   padding-left:12px;
   border-left:12px solid #002;
   border-bottom:1px dotted #999;
   font-size:18pt;
}

h2:first-child {
   margin-top:5px;
}

.container img {
max-width : 100% ;
height : auto ;
}

.col-md-4{
background-color: #445;
margin-left:10px;
margin-bottom:10px;
width: 364px;
}

.col-md-4 h2{
font-size:1.75em;
margin-top:5px;
margin-bottom:10px;
padding-top:15px;
}

footer{
text-align: center;
}


.features{
  font-size: 16px;
}
.features li{
  margin: 6px;
}
.features li ul{
  padding-left: 20px;
}
.features li li{
  margin: 3px;
}

.paragraph{
  font-size: 16px;
  margin-left: 20px;
}

.compatible {
  font-size: 10pt;
  color: #ccd;
}

.pr{
  margin-left:10px;
  font-size:14pt;
}
.right {
width:342px;
height:296px;
float:right;
margin:15px;
}

@media screen and (max-width: 480px) {
   .right {
      float : none ;
      margin-left:-10px;
      margin-bottom:45px;
   }
}

.content-item {
  min-height: 400px;
  border-radius: 6px;
  border: 1px solid rgb(20, 20, 45);
}

.content-item img {
  width:200px;
  height:200px;
  margin-bottom: 4px;
}

pre {
  margin-left: 12px;
  margin-right: 12px;
}

.profile-icon {
  aspect-ratio: 1/1;
  max-width: 160px !important;
  height: auto;
}