body,html{height:100%;margin:0}.container{height:100%;position:relative;color:gray;font-family:"Courier New",Courier,monospace;font-size:25px}.topleft{position:absolute;top:0;left:16px}.bottomleft{position:absolute;bottom:0;left:16px}.middle{position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);text-align:center}hr{margin:auto;width:40%}.linkslist{list-style:none}.linkslist li{margin-bottom:10px}.linkslist a{color:#2f4f4f}.link{color:#2f4f4f}
.bottom-note {
    margin-top: 50px;
    font-size: 15px;
}
.links-list {
counter-reset: li;
list-style: none;
/*font: 14px "Trebuchet MS", "Lucida Sans";*/
padding: 0;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.links-list a {
position: relative;
display: block;
padding: .4em .4em .4em .8em;
margin: .5em 0 .5em 2.5em;
background: #D3D4DA;
color: #444;
text-decoration: none;
transition: all .3s ease-out;
}
.links-list a:hover {background: #DCDDE1;}
.links-list a:before {
content: counter(li);
counter-increment: li;
position: absolute;
left: -2.5em;
top: 50%;
margin-top: -1em;
background: #9097A2;
height: 2em;
width: 2em;
line-height: 2em;
text-align: center;
font-weight: bold;
}
.links-list a:after {
position: absolute;
content: "";
border: .5em solid transparent;
left: -1em;
top: 50%;
margin-top: -.5em;
transition: all .3s ease-out;
}
.links-list a:hover:after {
left: -.5em;
border-left-color: #9097A2;
}