@font-face {
    font-family: mainfont;
    src: url("../fonts/body.otf") format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: pixelfont;
    src: url("../fonts/pixel.ttf") format('truetype');
    font-weight: normal;
    font-style: normal;
}

img {
  display: block;
  width: 100%;
}

a:link {
  color: #457bf7;
}

a:visited {
  color: #bdd825;
}

h1, h2, h3 {
    font-family: pixelfont;
    color: #457bf7;
    font-weight: normal;
    font-style: normal;
    letter-spacing: -12%;
}

h4 {
   font-family: pixelfont;
    color: #78a0ff;
    font-weight: normal;
    font-style: normal; 
    letter-spacing: -12%;
}

ul {
    list-style-type: square;
}

.markdown-body, body {
    font-family: mainfont;
    font-size: 1.15em;
    margin: 2em;
}

@media screen and (max-width: 500px) {
    h1 {
       font-size: 1.1em; 
    }

    h2, h3 {
        font-size: 1em;
    }

    h4 {
        font-size: 0.6em;
    }

    body {
    font-size: 1em;
    margin: 0em;
    }

    ul {
        padding-left: 0em;
    }

    ul ul {
        padding-left: 1em;
    }

    ul ul ul {
        padding-left: 2em;
    }
}