.no-underline {
  border: 0;
  text-decoration: none;
}

.symbol {
  display: inline-block;
  width: 1em;
  height: 1em;
}

.symbol.itchio {
  background: url('../../images/icon_itch.svg') no-repeat center/contain;
}
.symbol.github {
  background: url('../../images/icon_github.svg') no-repeat center/contain;
}
.symbol.instagram {
  background: url('../../images/icon_instagram.svg') no-repeat center/contain;
}
.symbol.steam {
  background: url('../../images/icon_steam.svg') no-repeat center/contain;
}
.symbol.twitter {
  background: url('../../images/icon_x.svg') no-repeat center/contain;
}
.symbol.youtube {
  background: url('../../images/icon_youtube.svg') no-repeat center/contain;
}
.symbol.about {
  background: url('../../images/icon_me.svg') no-repeat center/contain;
  filter: unset;
}
.symbol.contact {
  background: url('../../images/icon_contact.svg') no-repeat center/contain;
}


.top-menu-item {
  margin-right: 1em;
}

span.symbol {
  margin-left: 0.2em;
  padding: 0;
  font-size: 4rem;
  filter: invert(6%) sepia(84%) saturate(5610%) hue-rotate(358deg) brightness(93%) contrast(92%);
}

span.symbol:hover {
  filter: invert(8%) sepia(70%) saturate(6885%) hue-rotate(358deg) brightness(101%) contrast(91%);
}

span.symbol.about:hover {
  filter: brightness(1.2);
}

/* Colours */

body, a { color: #222; }
a { border-bottom: 0px solid #ccc; }
em { color: #999; }
em a { color: #666; }
em.background { color: #BBB; font-size: 1.0em;}


/* Typography */
/*body, input { font-family: "Helvetica", helvetica, "Helvetica Neue", arial, sans-serif; line-height: 1.3; overflow-y: scroll; }*/

body, input { font-family: 'Raleway', sans-serif; line-height: 1.3; overflow-y: scroll; }
ul li, p, em { font-size: 1.1em; font-style: normal; }
/* h1, h2 { font-size: 14px; font-weight: normal; } */
/* h3 { font-size: 24px; } */
a { text-decoration: none; font-weight: 600;}
em.keywords { color: #BBB; font-size: 0.7em; font-style: normal; }
p.keywords { line-height: 0.95; }


/* Layout */

body { padding: 150px 0px 40px; margin: 0px; text-align: center; }
div#container { margin: 0px auto; width: 800px; padding: 0px 20px; text-align: left; background: #fff; position: relative; }

.impressum { font-size: 12px; }

.col { float: left; margin: 0; padding: 0px; }
.col .col { margin: 0px; }

.one { width: 60px; }
.two { width: 140px; }
.three { width: 220px; position: relative; margin-left: 30px; }
.four { width: 300px; }
.five { width: 380px; }
.six { width: 460px; text-align: right; }
.seven { width: 540px; position: relative; }
.eight { width: 620px; }
.eight-tr { width: 660px; text-align: right; }
.nine { width: 700px; }
.ten { width: 780px; }
.eleven { width: 860px; }
.twelve { width: 940px; }
.thirteen{ width: 460px; text-align: left; }

h1 em, h2 em, h3 em { display: block; }

/* p, h2, h3 { margin: 0px 0px 5px; } */
.project-head {margin: 0 0 10px; font-size: 24px; }
p { margin: 0px 0px 5px; }

hr { display: block; clear: both; margin: 0px 0px 30px; padding: 0px; height: 0px; overflow: hidden; visibility: hidden; }
a img { border: 0px; }
.col hr { margin: 0px 0px 15px; }

.home-text { height: 100%; line-height: 40px; }
.no-border { border: 0; }

h2, h3 { overflow: hidden; }
input#filter { display: inline; width: auto; padding: 1px 0px; border: 0px; background: #eee; font-size: inherit; color: inherit; }

.category-title {color: black; font-weight: 600;}

div#content ul.project-list { margin: 0 0 2em 0; padding-left: 20px; list-style: none; width: 640px; }
div#content ul.project-list li { margin: 0px 20px -1px 0px; float: left; }
ul.project-list div.thumbnail a { border: 0px; }
ul.project-list div.summary { margin: 0px 0px 0px 20px; }

h2.title, div#content p.category, div#content ul.project-list li, div.description, p.para, div#images, div#media { padding: 20px 0px 0px; }
div#content ul.project-list li { padding: 20px 0px; }

.videoembed {
  margin-bottom:40px;
}

div.image { width: 780px; background: #dedede; margin-bottom:60px; text-align:center;}
div.imagesm { width: 540px; background: #dedede; margin-bottom:40px; text-align:left;}
div.imagecontent { width: 440px; background: #dedede; margin-bottom:20px; text-align:left;}

div#media { overflow: hidden; }
div.media { margin: 0px 0px 40px; }

div#content div.description { margin: 0px 0px 0px 20px; }
div.description div#media { margin: 0px 0px 10px; border: 0px; padding: 0px; }

p#footer { margin: 0px 0px 0px 340px; display: inline; line-height: 1.4; }
p#footer em { display: block; }

a.atom-rss { margin: 0px 0px 0px 6px; padding: 2px 3px 0px; font-size: 0.93em; letter-spacing: 0.08em; background: #ddd; }

/* Sticky Nav */

.main-nav {
  padding-top: 1em;
  z-index: 150;
  position: relative;
  width: 800px;
  background-color: white;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  text-align: left;
}

header,
.main-nav-scrolled {
  position: fixed;
  background: rgba(255, 255, 255, 0.95);
  top: 0;
  border-bottom: 1px solid #e1e1e1;
}

header {
  height: 150px;
  width: 800px;
  margin: auto;
  left: 0;
  right: 0;
  text-align: left;
}