html {
    /* Change this value to any color you want */
    --hilite: #8D3FC5;
}
body {
    background-color: #3B3B3B;
    margin: 0;
}

header {
    background-color: #202020;
    border-bottom: 1px solid var(--hilite);
    box-shadow: 0px 5px 30px -5px var(--hilite);
}
header a {
    display: flex;
    flex-flow: row nowrap;
    align-content: space-between;
    align-items: center;
    justify-content: center;
    height: 100%;
}
header .wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

footer {
    background-color: #202020;
    border-top: 1px solid var(--hilite);
    box-shadow: 0px -5px 30px -5px var(--hilite);
}
nav {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
}
footer hr {
    margin: 20px 5em;
}

main {
  max-width: 100%;
}
main #details {
    display: flex; flex-flow: row wrap;
    text-align: center;
    padding: 10px;
    border-top: 1px solid darkgrey;
    font: 0.8em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    color: darkgrey; letter-spacing: 0.4em;
}
main #date {
    width: 100%;
    text-align: center;
    color: grey;
}
main #tags {
    width: 100%;
    text-align: center;
    color: grey;
}
main #desc {
    padding: 0em 2em 2em 2em;
    color: white;
}
main pre.highlight {
    overflow-x: auto;
    color: white;
    background-color: #2B2B2B;
    margin: 0em 4em;
    padding: 1em;
    border-top: 2px solid black;
    border-left: 2px solid black;
    border-bottom: 2px solid var(--hilite);
    border-right: 2px solid var(--hilite);
}
main ul {
  padding: 0em 4em;
}

@supports (display: grid) {
    .cor_page {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        grid-template-rows: 50px max-content;
        grid-template-areas:
            "head head head head head head head"
            "body body body body body body body"
            "foot foot foot foot foot foot foot";
    }

    header {
        grid-area: head;
    }

    footer {
        grid-area: foot;
    }

    main {
        grid-area: body;
    }

    @media only screen and (min-width: 1250px) {
        .cor_page {
            display: grid;
            grid-template-columns: repeat(9, minmax(0,1fr));
            grid-template-rows: 50px max-content;
            grid-template-areas:
                "head head head head head head head foot foot"
                "body body body body body body body foot foot";
        }

        header a {
            align-items: center;
            justify-content: flex-start;
            padding-left: 10px;
        }

        footer {
            border-top: 0px;
            box-shadow: unset;
            min-height: 100vh;
        }
        nav {
            display: flex;
            flex-flow: column nowrap;
            justify-content: flex-end;
            align-items: flex-end;
            padding: 50px 0px 0px 0px;
        }

        main {
            margin: 0 5em;
        }
        main #date {
            width: 50%;
            text-align: left;
            color: grey;
        }
        main #tags {
            width: 50%;
            text-align: right;
            color: grey;
        }
    }
}