html {
  height: 100%;
}

body {
  background-color: #000000;
  color: #cccccc;
  font-family: monospace;
  padding-left: 2rem;
  padding-right: 2rem;
  height: 100%;
}

a {
  color: #4287f5;
  text-decoration: none;
}

nav {
  padding: 0rem;
  margin: auto;
  margin-bottom: 2rem;
  background-color: #202020;
  max-width: 40rem;
}
nav>ul {
  white-space:nowrap;
  padding: 1rem;
}
nav>ul>li {
  display: inline-block;
}
nav>ul>li>a {
  color: #cccccc;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1rem;
  padding-right: 0.5rem;
}

footer {
  position: fixed;
  bottom: 1em;
  left: 50%;
  margin-left: -25em;
  margin-top: 2rem;
  padding: 0.5rem;
  background-color: rgba(20, 20, 20, 0.5);
  font-size: 0.7rem;
}

main {
  margin: auto;
  max-width: 40rem;
  text-align: justify;
  height: 100%;
}

article {
  margin: auto;
  max-width: 40rem;
  text-align: justify;
  padding-bottom: 3rem;
}

article img {
  margin: auto;
  max-width: 19rem;
  padding-right: 1rem;
  padding-bottom: 1rem;
  float: left;
  cursor: pointer;
}


input, textarea {
  background-color: #202020;
  color: #cccccc;
  border: 1px #666666 solid;
}

code {
  color: #ede974
}

.iframe-wrapper {
  position: relative;
  height: 100%; 
  width: 100%;
  max-width: 40rem;
}

.iframe {
  position: absolute; 
  border: none;
  height: 100%; 
  width: 100%;
  max-width: 40rem;
  padding-bottom: 10em;
}

.comment-author {
  float: left;
  padding-bottom: 1rem;
  padding-right: 1rem;
}
.comment-email {
  float: left;
  padding-bottom: 1rem;
}
.comment-body {
  height: 3em;
  width: 100%;
}

.header {
  color: #bbbbbb;
  font-size: 0.8rem;
}
.header>hr {
  border-top: none;
  border-bottom: 1px dotted #bbbbbb;
}

.tags {
  color: #bbbbbb;
  font-size: 0.8rem;
  padding-top: 0.6rem;
}
.tags>hr {
  border-top: none;
  border-bottom: 1px dotted #bbbbbb;
}

@media only screen and (max-width: 30rem) {
  nav {
    width: 100%;
  }
  main {
    width: 100%;
    height: 100%;
    font-size: 1rem;
    text-align: left;
  }
  article {
    width: 100%;
    font-size: 1rem;
    text-align: left;
    padding-bottom: 3rem;
  }
  article img {
    width: 100%;
  }
  footer {
    position: fixed;
    bottom: 0;
    left: 50%;
    padding: 0.5rem;
    background-color: rgba(20, 20, 20, 0.5);
    font-size: 0.4rem;
	}
}