* {
    font-family: 'Noto Sans', sans-serif;
}

body {
    background-color: #101010;
    margin: 4em;
}

h1,
h2 {
    color: #ffffff;
}

h3 {
    color: #b7b7b7;
}

p,
li {
    color: #b7b7b7;
    font-size: large;
}

a {
    text-decoration: none;
}

a:link,
a:visited {
    color: #5cc4f8c7;
}

a:hover {
    text-decoration: underline;
    text-decoration-thickness: 3px;
}

code {
    background-color: #556970;
    padding-left: 6px;
    padding-right: 6px;
    padding-bottom: 4px;
    border-radius: 10px;
}

/* Twemoji */
img.emoji {
    /* Since we are using SVGs, you have to change the width using CSS */
    width: 4vh;

    /* 
    This is to make the emojis feel like actual emojis to 
    the user and they won't act like images. This makes the emojis
    non-reactive to any mouse events such as dragging, 
    hovering, clicking etc. Makes it feel like its actual text.
    */
    pointer-events: none;
}

p > img.emoji {
    width: 3vh;
    pointer-events: none;
}

li > img.emoji {
    width: 3vh;
    pointer-events: none;
}