html, body
{
    width: 100%;
    height: 100%;
}

body{
    background-color: #272822;
    color: #ddd;
}

#wrap
{
    width: 960px;
    margin: 0 auto;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

@media only screen and (max-width: 960px) {
  #wrap {
    width: 95%;
  }
}

/*    HEADER     */

#header
{
    padding-left: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid #eee;
    border-image: radial-gradient(#F92672 60%, #eee) 20;
    border-image-slice: 1;
    margin-bottom: 25px;
    margin-top: 10px;
    flex-shrink: 0;
}

#header .header-title
{
    font-size: 32px ;
    font-weight: bold;
    font-family: Arial;
    margin-bottom: 2px;
    margin-top: 2px;
}

#header .header-title a {
    color: inherit;
    text-decoration: none;
}

#header .pure-menu {
    text-align: right;
    direction: rtl;
}

#header .pure-menu-list {
    direction: ltr;
}

@media screen and (max-width: 768px) {
   #header{
       text-align: center;
   }

   #header .pure-menu {
       text-align: center;
   }
}

#header .header-title .header-color {
    color: #F92672;
}

#header .pure-menu-link {
    font-weight: bold;
    color: #eee;
    font-family: Monospace;
    font-size: 18px;
}

#header .pure-menu-link:hover {
    color: #F92672;
    background-color: inherit;
    transition-duration: 0.5s;
}


#header .pure-menu-link.active {
    color: #F92672;
}

#header .pure-menu-link .nf {
    margin-right: 10px;
}

/*     CONTENT     */

#content {
    margin: 0px 15px;
    flex-grow: 1;
}

.index-column {
    padding: 0 10px;
}

.section-title {
  font-family: Monospace;
  font-size: 18px;
  border-bottom: 1px solid;
  padding-bottom: 10px;
  margin: 15px 0px;
}

.post {
    padding: 5px;
}

.post-wrap {
    background-color: #333;
    height: 350px;
    margin: 5px;
    border-radius: 30px 5px;
}

.post-thumbnail {
    margin-bottom: 20px;
    border-bottom: 5px solid #eee;
}

.post-thumbnail img{
    width: 100%;
}

.post-title {
    text-align: center;
    font-weight: bold;
    font-size: 26px;
    margin-left: 5px;
    margin-right: 5px;
}

.post-title a {
    color: #eee;
}

.post-summary {
    text-align: center;
    padding: 0px 20px;
}

.article-header{
    margin-bottom: 10px;
}

.article-thumbnail
{
    margin-bottom: 15px;
    max-width: 100%;
}

.article-title
{
    margin: 0px 0px;
    color: #F92672;
    font-family: monospace;
    font-size: 32px;
}

.article-subtitle
{
    color: #FD971F;
    font-family: monospace;
    font-size: 14px;
}

.article-subtitle span
{
    margin-right: 5px;
}

.article-body h3
{
    font-family: monospace;
    font-size: 20px;
    color: #F92672;
}

.article-body a
{
    color: #eee;
    font-weight: bold;
}

pre
{
    padding: 15px;
    overflow: scroll;
}


/* FOOTER */
#footer
{
    padding-left: 10px;
    padding-top: 15px;
    border-top: 1px solid #eee;
    border-image: radial-gradient(#F92672 60%, #eee) 20;
    border-image-slice: 1;
    margin-bottom: 25px;
    margin-top: 15px;
    flex-shrink: 0;
}


/*
 * Other stuff
 */

.youtube-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
.youtube-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}