@font-face {
    /* License: GPL http://www.fontsquirrel.com/license/Cantarell */
    font-family: Cantarell;
    src: url(Cantarell-Regular.ttf);
}

@font-face {
    /* License: public domain http://www.fontsquirrel.com/license/Goudy-Bookletter-1911 */
    font-family: GoudyBookletter;
    src: url(GoudyBookletter1911.otf);
}

@font-face {
    font-family: Trypewriter;
    src: url(Kingthings_Trypewriter_2.ttf);
}

html {
    font-family: Cantarell, sans-serif;
}

body {
    background: url(concrete_medium.jpg) fixed repeat;
    display: grid;
    grid-template-areas:
      "header header"
      "nav content";
    grid-template-columns: 38.2% 61.8%;
    margin: 0;
}


h1, h2, h3 {
    margin: 0;
    padding: 0;
    font-family: Trypewriter, sans-serif;
}

#title {
  grid-area: header;
  background: url(concrete_darkest.jpg) fixed repeat #2d2928;
  height: 60px;
}

#title::before {
  content: " ";
  background-color: #4d6a32;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 27px;
  z-index: 0;
}
#title h1 {
  color: #76a557;
  z-index: 2;
  position: relative;
  padding: 10px 20px;
}

#mixes {
    grid-area: nav;
    padding: 20px;
    margin: 20px;
    background: url(concrete_darkest.jpg) fixed repeat #2d2928;
    border-style: solid;
    border-color: #2d2928;
    border-width: 0 .2em .2em 0;
    color: white;
}

#mixes h2 {
  color: #b6d690;
  font-family: Cantarell, sans-serif;
  border-bottom: 2px solid #2d2928;
  margin-bottom: 20px;
}

#mixes ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#blogs {
    grid-area: content;
    padding: 20px 20px 20px 0;
}

.blog {
    background: url(dotted.png) fixed repeat;
    padding: 20px;
    font-family: GoudyBookletter, Times New Roman, serif;
    font-size: 16pt;
    max-width: 700px;
    border-color: #53575a;
    border-style: solid;
    border-width: 0 .2em .2em 0;
    border-radius: 1em 0 0 1em;
}

.date{
    display:block;
    font-size: 13pt;
    font-family: Cantarell, sans-serif;
    font-weight: bold;
    margin: 0 -20px 0 -30px;
    padding: 0 10px;
    color: #2d2928;
    background-color: #76a557;
    border-bottom: .2em solid #4d6a32;
}

/* Content colors */

h1,h2,h3,h4,h5,h6 {
    color: #4d6a32;
}
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a {
    color: #4d6a32;
}

a {
    color: #4d6a32;
}
a:visited {
    color: #2f3e29;
}
a:hover, a:active {
    color: #76a557;
}

#mixes a {
  color: #97b782;
}
#mixes a:visited {
    color: #76a557;
}
#mixes a:hover, #mixes a:active {
    color: white;
}


/* From here on down, it's nothing but icon stuff */

#folders li {
    background-image: url(folder.png);
    background-repeat: no-repeat;
    padding-left: 22px;
    padding-top: 6px;
}

#files li {
    /* background-image: url(file.png); */
    background-repeat: no-repeat;
    padding-left: 22px;
    padding-top: 6px;
    position: relative;
}

#files li.music::before {
    content:" ";
    position: absolute;
    left: 0;
    background-image: url(music.png);
    width: 22px;
    height: 22px;
    filter: invert(1);
}

#files li.image {
    background-image: url(image.png);
}

#files li.mod {
    background-image: url(mod.png);
}

#files li.text {
    background-image: url(text.png);
}

#files li.movie {
    background-image: url(movie.png);
}

#files li.program {
    background-image: url(program.png);
}

#files li.archive {
    background-image: url(archive.png);
}

#files li.html {
    background-image: url(html.png);
}

#files li.comic {
    background-image: url(comic.png);
}