@font-face{font-family:typo-rounded;src:url("rimouski sb.ttf")}

html, body {background:#333;color:#fff;font-family:'Segoe UI','Helvetica Neue','Trebuchet MS',Verdana,Arial,sans-serif;}
body {padding-bottom:5em;margin:0;}
a, a:visited {color:#fff;}
a {text-decoration:none;}
a:hover, a:focus {text-decoration:underline;}

.container {text-align:center;margin:5em auto 0;padding:0 1em;}

#logo {width:100%;max-width:160px;border-radius:50%;}
#header {margin:7em auto 9em;}
#header span {font-size:550%;font-family: typo-rounded,-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;}
#header span span {color:#f3e32d;font-size:100%;font-family:'Segoe UI','Helvetica Neue','Trebuchet MS',Verdana,Arial;}

#topbar {text-align:left;margin-top:1em;}
#topbar img {width:64px;border-radius:50%;}
#topbar span, #topbar small {display:block;margin-top:-56px;margin-left:72px;font-size:120%;}
#topbar small {opacity:.3;font-size:70%;margin-top:-2px;}

#projects {text-align:left;max-width:480px;}

.project {display:-ms-flexbox;display:flex;padding:.3em;margin:0 auto 2em;background:#222;border-radius:6px;}
.project img {display:block;width:100px;}
.project-icon img:first-child {border-radius:6px;}
.project-description {margin-left:24px;height:100px;}
.project h1 {margin:0;margin-top:.3em;line-height:1;}
.project h2 {opacity:.5;font-size:80%;font-weight:normal;margin-top:0;margin-bottom:7px;}
.project h1.no-h2 {margin-bottom:26px;}
.project .label {display:inline-block;border-radius:4px;background:#ffffff3d;color:#ffffff87;padding:3px 7px;font-size:73%;margin:.8em .6em 0 0;}
.project .label a, .project .label a:visited {color:#ffffff87;}

img.twitch-glitch {position:absolute;width:24px;margin-top:-30px;margin-left:74px;}
img.youtube-icon {position:absolute;width:26px;margin-top:-20px;margin-left:72px;}
img.chrome-icon {position:absolute;width:24px;margin-top:-26px;margin-left:74px;}

#changelog ul, #changelog p {padding:1em 2em 2em 3em;background:#222;border-radius:3px;text-align:left;font-size:1.3em;line-height:1.7;margin-bottom:3em;}
#changelog p {padding:1.4em;text-align:justify;font-size:1.4em;}
#changelog a, #changelog a:visited {color:#8cc4ff;}

#footer a {opacity:.5;transition-duration:.2s;}
#footer a:hover, #footer a:focus {opacity:1;text-decoration:none;}

@media (min-width:1024px) {
  .container {width:960px;}
}