@font-face{
    font-family: icons;
        src: url('icons.woff');
        src: url('icons.eot');
        src: url('icons.ttf');

}

@font-face {
    font-family: 'Work Sans';
    src: url('worksans-regular-webfont.woff2') format('woff2'),
         url('worksans-regular-webfont.woff') format('woff'),
         url('worksans-regular-webfont.ttf') format('woff');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'Work Sans';
    src: url('worksans-italic-webfont.woff2') format('woff2'),
         url('worksans-italic-webfont.woff') format('woff'),
         url('worksans-italic-webfont.ttf') format('ttf');
    font-weight: normal;
    font-style: italic;
}

body{
 font-family: 'Work Sans', sans-serif; font-size: 18pt; background-color: #fafafa; color: #202020;
}

ul{
  margin:0;
  padding:0;
 list-style: none; z-index: 1;
 line-height: 1.4;
 margin:26px;
}

li#icons{
 font-family: icons; font-size:90%; margin-top: 5px; letter-spacing: 3.5px; user-select: none;
}

a{
 color: #204080; text-decoration: none; transition: 0.4s;
}

a:hover{
 color: #6080A0;
}

canvas{
 left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); z-index: -1;
}

svg{
 height: 1em; width: 1em; transform:translate(2px,4px);
}


@media screen
 and (max-device-width: 800px)
{
  body{
   font-size: 30pt;
  }

  svg{
   transform: translate(3.5px,7px);
  }
}