/* Globals */
a {
  color: #999; }
a:focus,
a:hover {
  color: #f00;
  text-decoration:none; }

/* Base structure */
html,
body {
  height: 100%;
  background-color: #fff; }
body {
  display: -ms-flexbox;
  display: flex;
  color: #333; }
.cover-container {
  max-width: 1000px; }

/* Cover */
.cover {
  padding: 0 1.5rem; }
.cover .btn-lg {
  padding: .75rem 1.25rem;
  font-weight: 700; }

/* Navigation */
.comic-navigation {
  padding-bottom:4em; }
.comic-navigation svg {
  width:48px;
  height:48px; }

/* Header */
header {
  padding-bottom:2em; }
header .sidebar-right {
  float:right;
  text-align:right; }
header .sidebar-right .social-links {
  font-size:1.5em;
  padding-bottom:10px; }
header .sidebar-right .social-links a {
  padding-left:5px; }
header .logo {
  float:left; }
header .logo div.frame {
  border:1px solid #ccc;
  border-radius:50%;
  padding:5px;
  background:#fcfcfc; }
header .logo a:focus div.frame,
header .logo a:hover div.frame {
  background:#eee; }
header .title {
  float:left;
  text-align:left;
  padding-left:10px; }

/* Footer */
footer {
  padding-top: 4em; }

/* Comics */
img.comic-primary {
  max-width: 700px;
  max-height: 700px;
  max-width: 100%;}

/*
 * NOT USED
 */
/* Header */
.masthead { margin-bottom: 2rem; }
.masthead-brand { margin-bottom: 0; }
.nav-masthead .nav-link {
  padding: .25rem 0;
  font-weight: 700;
  color: #333;
  background-color: transparent;
  border-bottom: .25rem solid transparent; }
.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
  border-bottom-color: #333; }
.nav-masthead .nav-link + .nav-link {
  margin-left: 1rem; }
.nav-masthead .active {
  color: #333;
  border-bottom-color: #333; }
@media (min-width: 48em) {
  .masthead-brand { float: left; }
  .nav-masthead { float: right; }
}
/* Custom default button */
.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus {
  color: #fff;
  background-color: #333;
  border: .05rem solid #aaa; }