body {
    margin: 0;
    padding-left: 20em;
    padding-right: 2em;
    line-height: 1.5;
}

#content {
    max-width: 50em;
}
 

ul.navbar {
    position: fixed;
    top: 2em;
    left: 1em;
    width: 15em;
    margin: 0;
    padding-left: 1.5em;
        border: 1px solid #ccc;
        background: #f5f5f5;

}



.frac {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    text-align: center;
}

.frac > span {
    display: block;
    padding: 0.1em;
}

.frac > .bottom {
    border-top: 1px solid black;
}

.frac > .symbol {
    display: none;
}



@media screen and (max-width: 700px) {

    body {
        padding-left: 1em;
        padding-right: 1em;
    }

    #content {
        max-width: none;
    }

    ul.navbar {
        position: static;
        width: auto;
        margin: 1em 0 2em 0;
        padding: 0.5em 1em;
        border: 1px solid #ccc;
        background: #f5f5f5;
    }

    ul.navbar li {
        margin: 0.3em 0;
    }

    h1 {
        font-size: 1.8em;
    }

    h2 {
        font-size: 1.4em;
    }

}