body {
    background-color: #202020;
    color: #fff;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Bahnschrift", sans-serif;
}

p, a, li {
    font-family: "Inter", sans-serif;
}

section p, section ul, section ol {
    font-size: 1.2rem;
}

h1 {
    font-size: 2em;
}

h2 {
    font-size: 1.6em;
}

footer {
    font-size: .8em;
}

.muted {
    filter: brightness(50%);
}

section img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
}

/*p img {*/
/*    display: block;*/
/*    margin: 0 auto;*/
/*    max-width: 100%;*/
/*}*/

a {
    /*Obsidian link Color*/
    /*color: #7f6df2;*/
    transition: color 0.3s ease;
    /*transition: filter 10s ease;*/
    color: #f26d6d;


    /*padding: 2px;*/
}

a:hover {
    /*Brightens the link on hover*/
    filter: brightness(115%);

    /*Obsidian hover link color*/
    /*color: #8875ff;*/
}

nav, main {
    float: left;
}

nav {
    /*width: 100%;*/
    max-width: 500px;
    box-sizing: border-box;
    padding-left: .5em;
    position: fixed;
    height: 100%;
    top: 0;
    right: 0;
    /*display: none;*/
}

nav .menu {
    z-index: -1;
    background-color: #202020;
    position: fixed;
    right: 0;
    top: 0;
    height: 100%;
    /*width: 100%;*/
    max-width: 500px;
    -webkit-user-select: none;
    user-select: none;

    transform-origin: 0% 0%;
    transform: translate(100%, 0);
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), box-shadow .5s;

    /*border-left: solid 2px #161616;*/



    padding-left: 20px;
    padding-right: 70px;
}

.menu ul {
    list-style-type: none;
    font-size: 1.5em;
    margin: 0;
}

.menu > a {
    display: block;
    padding: 10px;
}

.menu li a {
    display: block;
    padding: 10px;
}



#menuIcon {
    position: fixed;
    right: 0;
    top: 0;
}

nav span {
    display: block;
    float: right;
    clear: both;
    width: 33px;
    height: 4px;
    margin-bottom: 5px;
    margin-right: 5px;
    /*position: fixed;*/
    background: #cdcdcd;
    border-radius: 3px;
    z-index: 3;
    transform: translateZ(0);
    transform-origin: center;
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
    background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
    opacity 0.55s ease;
}

nav span:first-of-type {
    margin-top: 20px;
}

/*
 * Transform all the slices of hamburger
 * into a crossmark.
 */
nav input:checked ~ span {
    opacity: 1;
    transform: rotate(45deg) translate(0, 13px);
    /*background: #232323;*/
}

/*
 * But let's hide the middle one.
 */
nav input:checked ~ span:nth-last-child(3) {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
}

/*
 * Oh yeah and the last one should go the other direction
 */
nav input:checked ~ span:last-of-type {
    transform: rotate(-45deg) translate(0, -13px);
}

/* Open menu styles */
nav input:checked ~ .menu {
    transform: none;

    box-shadow:
            0px 0px 2.2px rgba(0, 0, 0, 0.042),
            0px 0px 5.3px rgba(0, 0, 0, 0.061),
            0px 0px 10px rgba(0, 0, 0, 0.075),
            0px 0px 17.9px rgba(0, 0, 0, 0.089),
            0px 0px 33.4px rgba(0, 0, 0, 0.108),
            0px 0px 80px rgba(0, 0, 0, 0.15)
;
}

nav input {
    display: block;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 7px;
    right: 0;
    cursor: pointer;
    opacity: 0; /* hide this */
    z-index: 2; /* and place it over the hamburger */
    -webkit-touch-callout: none;
}

main {
    box-sizing: border-box;
    padding: .5em 1em;
    width: 100%;
}

.container {
    margin: 0 auto;
    max-width: 100%;
}

@media only screen and (min-width: 900px) {
    .container {
        max-width: 1200px;
    }

    main {
        width: 60%;
    }

    nav {
        width: 40%;
        display: block;
        position: static;
    }

    nav span {
        display: none;
    }

    nav .menu {
        position: relative;
        transform: none;
        z-index: 0;
        box-shadow: none;
        padding-right: 0;
    }

}