CSS

/* DEADEYE'S CODE STARTS HERE */

@font-face {
    font-family:proxi;
    src:url('../src/proxima.otf');
}

body {
    background-color:#000;
}

.wrapper {
    width:900px;
    margin:0 auto;
}

header {
    width:100%;
    height:120px;
    background-color:#000;
}

.baka {
    width:280px;
    height:120px;
    margin:32px 0 0;
    background-image:url(../src/img/baka.png);
    float:center;
}

.spotfy {
    float:center;
    margin-top:32px;
    display:block;
    height:380px;
}

.nav-wrapper {
    width:150px;
    height:1px;
}

.nav-l {
    width:150px;
    height:100%;
    margin-top:-420px;
    margin-left:155px;
}

.nav-fl {
    width:150px;
    height:100%;
    margin-left:30px;
}

.nav-r {
    width:150px;
    height:100%;
    margin-left:595px;
}

.nav-fr {
    width:150px;
    height:100%;
    margin-left:715px;
}

.nav-optic {
    width:111px;
    height:111px;
    margin:auto;
    display:block;
    background-image:url('../src/img/optic.png');
    transition: all 100ms ease-out;
}

.nav-optic:hover {
    background-color:#000;
    background-image:url('../src/img/optic-hover.png');
}

.nav-ipt {
    width:111px;
    height:111px;
    margin:auto;
    display:block;
    background-image:url('../src/img/ipt.png');
    transition: all 100ms ease-out;
}

.nav-ipt:hover {
    background-color:#000;
    background-image:url('../src/img/ipt-hover.png');
}

.nav-amazon {
    width:111px;
    height:111px;
    margin:auto;
    display:block;
    background-image:url('../src/img/amazon.png');
    transition: all 100ms ease-out;
}

.nav-amazon:hover {
    background-color:#000;
    background-image:url('../src/img/amazon-hover.png');
}

.nav-google {
    width:111px;
    height:111px;
    margin:auto;
    display:block;
    background-image:url('../src/img/google.png');
    transition: all 100ms ease-out;
}

.nav-google:hover {
    background-color:#000;
    background-image:url('../src/img/google-hover.png');
}

.nav-netflix {
    width:111px;
    height:111px;
    margin:auto;
    display:block;
    background-image:url('../src/img/netflix.png');
    transition: all 100ms ease-out;
}

.nav-netflix:hover {
    background-color:#000;
    background-image:url('../src/img/netflix-hover.png');
}

.nav-hulu {
    width:111px;
    height:111px;
    margin:auto;
    display:block;
    background-image:url('../src/img/hulu.png');
    transition: all 100ms ease-out;
}

.nav-hulu:hover {
    background-color:#000;
    background-image:url('../src/img/hulu-hover.png');
}

.nav-twitch {
    width:111px;
    height:111px;
    margin:auto;
    display:block;
    background-image:url('../src/img/twitch.png');
    transition: all 100ms ease-out;
}

.nav-twitch:hover {
    background-color:#000;
    background-image:url('../src/img/twitch-hover.png');
}

.nav-youtube {
    width:111px;
    height:111px;
    margin:auto;
    display:block;
    background-image:url('../src/img/youtube.png');
    transition: all 100ms ease-out;
}

.nav-youtube:hover {
    background-color:#000;
    background-image:url('../src/img/youtube-hover.png');
}

.nav-hub {
    width:111px;
    height:111px;
    margin:auto;
    display:block;
    background-image:url('../src/img/hub.png');
    transition: all 100ms ease-out;
}

.nav-hub:hover {
    background-color:#000;
    background-image:url('../src/img/hub-hover.png');
}

.nav-lsf {
    width:111px;
    height:111px;
    margin:auto;
    display:block;
    background-image:url('../src/img/lsf.png');
    transition: all 100ms ease-out;
}

.nav-lsf:hover {
    background-color:#000;
    background-image:url('../src/img/lsf-hover.png');
}

.nav-docs {
    width:111px;
    height:111px;
    margin:auto;
    display:block;
    background-image:url('../src/img/docs.png');
    transition: all 100ms ease-out;
}

.nav-docs:hover {
    background-color:#000;
    background-image:url('../src/img/docs-hover.png');
}

.nav-sheets {
    width:111px;
    height:111px;
    margin:auto;
    display:block;
    background-image:url('../src/img/sheets.png');
    transition: all 100ms ease-out;
}

.nav-sheets:hover {
    background-color:#000;
    background-image:url('../src/img/sheets-hover.png');
}

.nav-4ch {
    width:111px;
    height:111px;
    margin:auto;
    display:block;
    background-image:url('../src/img/4ch.png');
    transition: all 100ms ease-out;
}

.nav-4ch:hover {
    background-color:#000;
    background-image:url('../src/img/4ch-hover.png');
}

.nav-mechkey {
    width:111px;
    height:111px;
    margin:auto;
    display:block;
    background-image:url('../src/img/mechkey.png');
    transition: all 100ms ease-out;
}

.nav-mechkey:hover {
    background-color:#000;
    background-image:url('../src/img/mechkey-hover.png');
}

.nav-pirasea {
    width:111px;
    height:111px;
    margin:auto;
    display:block;
    background-image:url('../src/img/pirasea.png');
    transition: all 100ms ease-out;
}

.nav-pirasea:hover {
    background-color:#000;
    background-image:url('../src/img/pirasea-hover.png');
}

.nav-crunchyroll {
    width:111px;
    height:111px;
    margin:auto;
    display:block;
    background-image:url('../src/img/crunchyroll.png');
    transition: all 100ms ease-out;
}

.nav-crunchyroll:hover {
    background-color:#000;
    background-image:url('../src/img/crunchyroll-hover.png');
}