/*--light-blue: #69b4ff;
--med-blue: #4493ec;
--dark-blue: #246dbf;*/

body {
   background: rgb(51,51,59);
   color: #fff;
   width: 80%;
   margin: auto;
   padding-top: 1rem;
   padding-bottom: 1rem;
   font-family: "Source Sans Pro", Helvetica, sans-serif;
}

html {}

h1 {
   text-transform: capitalize;
   text-align: center;
   /*padding-top: 1em;*/
   /*padding-bottom: 1em;*/
   font-family:  "Roboto-Bold","Oswald-SemiBold","Source Sans Pro", Helvetica, sans-serif;
   font-size: 200%;
}

header {
   text-align: center;
}

.center {
   text-align: center;
}

a {
   /*color: #94CAFF;*/
   color: #69b4ff;
   text-decoration: none;
}

a:visited {
   /*text-decoration: none;*/
}

a:hover {
   text-decoration: underline;
}


.authordate {
   text-align: center;
}

.home {
   font-size: 70%;
}

.footer {
   font-size: 70%;
   text-align: right;
}


hr {
   border-top: 1px solid #8c8b8b;
   margin-bottom: 1em;
   margin-top: 1em;
   width: 50%;
}


.metrics {
   height: 0px;
   width: 0px;
   display: none
}


.topimage {
   /*width: 80%;*/
   /*margin-top: 3rem;*/
   width: 100%;
   height: auto;
   border-radius: 0.2em;
   box-shadow: 0 8px 16px 0 rgba(0,0,0,0.4);
   max-width: 45em;
}
.topimagecont {
   text-align: center;
}

.subtitle {
   font-size: 100%;
}

.appear {
   position: relative;
   -webkit-animation: appear 0.6s forwards;
   animation: appear 0.6s forwards;
   transition-timing-function: ease;
}

@keyframes appear {
   0% { top: 16px ; opacity: 0}
   100% { top: 0px ; opacity: 1}
}

@-webkit-keyframes appear {
   0% { top: 16px ; opacity: 0}
   100% { top: 0px ; opacity: 1}
}

.disappear {
   position: relative;
   -webkit-animation: disappear 0.6s forwards;
   animation: disappear 0.6s forwards;
   transition-timing-function: ease;
}

@keyframes disappear {
   0% { top: 0px ; opacity: 1}
   50% { top: 16px ; opacity: 0.5;}
   100% { top: 16px ; opacity: 0; height: 0}
}

@-webkit-keyframes disappear {
   0% { top: 0px ; opacity: 1}
   50% { top: 16px ; opacity: 0.5; }
   100% { top: 16px ; opacity: 0; height: 0}
}


.logo {
   height: 0.8em;
   width: auto;
   vertical-align: baseline;
}

.photoauthor,
.disclaimer {
   font-size: 70%;
   font-style: italic;
   text-align: center;
}

.byline-name {
   text-align: center;
}

.metalinesep {
   display: none;
   text-align: center;
}

@media (min-width:45em)  {
   .metaline {
      display: inline;
   }
   .metalinesep {
      display: inline;
   }
}

.dateline {}

blockquote {
  background: #f1f9ff;
  border-left: 10px solid #4493ec;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
  color: #335;
  border-radius: 0.2em;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.4);
  margin-top: 1em;
  margin-bottom: 1em;
  width: auto;
  margin-left: 0rem;
  margin-right: 0rem;
}

}

@media (min-width:30rem)  {
 blockquote {
    margin-left: 1rem;
    margin-right: 1rem;
 }
}

@media (min-width:50rem)  {
 blockquote {
    margin-left: 2rem;
    margin-right: 2rem;
 }
}

blockquote p {
  display: block;
}

.button {
   font-size: 80%;
   color: white;
   background-color: #4493ec;
   margin: 12px;
   border: 1px solid #999;  /*IE 6/7/8*/
   margin-bottom: 0.5rem;
   border-radius: 0.2em;
   text-transform: capitalize;
   font-weight: bold;
   padding: 0.5rem 1rem;
   box-decoration-break: clone;
   border-radius: 0.2em;
   box-shadow: 0 4px 10px 0 rgba(0,0,0,0.2);
   border-style: none;
   text-transform: capitalize;
}

.button:hover,
.button:focus {
   box-shadow: 0 8px 16px 0 rgba(0,0,0,0.4);
   background-color: #246dbf;
   text-decoration: none;
}
.button:active {
   box-shadow: 0 0px 16px 0 rgba(0,0,0,0.4);
   text-decoration: none;
}

.roundAndShadow {
   border-radius: 0.2em;
   box-shadow: 0 8px 16px 0 rgba(0,0,0,0.4);
}

/*centers the contents inside it*/
.imageWrap {
   text-align: center;
   display: block;
}


.link-icon {
   height: 0.8em;
   width: auto;
   vertical-align: baseline;
}

code {
  font-family: Consolas, Menlo, Monaco, monospace;
  margin: auto;
  width: auto;
  align-self: center;
}

pre {
   background: rgb(34,34,34);
   border-radius: 3px;
   padding: 1rem;
   display: inline-block;
   justify-content: center;
   max-width: 100%;
   float: unset;
   /*left: 50%;
   transform: translateX(50%);*/
   overflow-x: auto;
}

li {
  margin-top: 0.5em
}