@import url('https://fonts.googleapis.com/css?family=Special+Elite');

body {
    background: black;
    color: #f9f9ff;
    max-width: 45rem;
    padding: 0em 1em 1em 1em;
    margin: auto;
}

.normal {
    font-size: 1.2em;
    font-weight: normal;
    font-family: monospace;
}

.h1 {
    font-size: 2.5em;
    font-weight: bold;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    font-family: 'Special Elite', monospace;

}

.h2 {
    font-size: 1.8em;
    font-weight: bold;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    font-family: 'Special Elite', monospace;
}
.h3 {
    font-size: 1.5em;
    font-weight: bold;
    margin-block-end: 1em;
    font-family: 'Special Elite', monospace;
}

.h4 {
    font-size: 1.3em;
    font-weight: bold;
    margin-block-end: -0.1em;
    font-family: 'Special Elite', monospace;
}

#header {
    margin: 1em 0em 2em 0em;
    border-bottom: 1px solid wheat;
    font-family: 'Special Elite', monospace;
}

#header a {
    text-decoration: none;
    color: inherit;
}

#header a:hover {
    background: radial-gradient(ellipse at center, white 0%,rgba(13,0,100,1) 300%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#main_wrapper {
    -webkit-clip-path: url(#tv_path);
    clip-path: url(#tv_path);
    background: white;
    color: #090900;
    position: relative;
    max-width: 45em;
    background: white;
}

#main_content {
    max-width: 41em;
    padding: 2em;
}

.two-column > img {
    display: inline-block;
    vertical-align: top;
    margin-right: 1em;
    margin-bottom: 1em;
}

.two-column > div {
    display: inline-block;
    width: 46%;

}


.title {
    margin-left: 1em;
    font-size: 80%;
}

.title::before {
    content: '.';
    padding-right: 0.2em;
}

.special {
    font-size: 150%;
    font-weight: bold;
}

.blogpost {
    margin: auto;
    transform: skew(-3deg) rotate(-2deg);
    background: radial-gradient(ellipse at center, #ff1400 0%,rgba(13,0,100,1) 300%);
    padding: 2em;
    border: 3px solid darkorange;
}

.blogpost_contents {
    transform: skew(3deg) rotate(2deg);
    font-size: 1.2em;
    font-weight: normal;
    font-family: sans-serif;
    background: #f4f6d2;
    border: 3px solid black;
    padding: 0em 2em;
    color: #860b0b;
    max-width: 44em;
}

.blogpost a {
    color: unset;
}


pre {
    padding: 0.5em 1em;
    background: #eee;
}

@media screen and (max-width: 640px) {
    .two-column > div {
        width: 100%;
    }
}