some css

.site-header:after, .controls:after {
    content: " ";
    display: table;
    clear: both;
}
a, a:focus, a:hover, figcaption a, figcaption a:focus, figcaption a:hover {
    background-position: bottom;
    background-repeat: repeat-x;
    background-size: 2px 2px;
}
@media (-webkit-min-device-pixel-ratio: 2),  (min-resolution: 192dpi) {
    a, a: focus, a:hover, figcaption a, figcaption a:focus, figcaption a:hover {
    background-size: 1px 1px;
}
}@-webkit-keyframes introduction {
    0% {
    opacity: 0;
    -webkit-transform: translateY(0.75rem);
    transform: translateY(0.75rem);
}
100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}
}@keyframes introduction {
    0% {
    opacity: 0;
    transform: translateY(0.75rem);
}
100% {
    opacity: 1;
    transform: translateY(0);
}
}html {
    font-size: 18px;
}
@media (min-width: 1200px) {
    html {
    font-size: 20px;
}
}body {
    margin: 0 auto;
    padding: 0;
    background: #FFF;
    color: #444;
    font-family: "Roboto", sans-serif;
    line-height: 1.5rem;
    -webkit-font-feature-settings: "dlig",  "kern",  "liga";
    font-feature-settings: "dlig",  "kern",  "liga";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}
a {
    background-image: linear-gradient(transparent 0%,  transparent 50%,  #110 50%,  #110 100%);
    color: #110;
    text-decoration: none;
}
a:focus, a:hover {
    background-image: linear-gradient(transparent 0%,  transparent 50%,  #F22 50%,  #F22 100%);
    color: #F22;
}
blockquote, figure, ol, p, ul {
    margin: 0 0 1.5rem;
}
blockquote {
    padding: 0 0 0 0.75rem;
    border-left: 0.25rem solid #EEE;
    font-style: italic;
}
blockquote em {
    font-style: normal;
}
@media (min-width: 500px) {
    blockquote {
    padding: 0 0 0 1.25rem;
}
}figure {
    text-align: center;
}
figure a {
    background-image: none;
}
figure a:focus, figure a:hover {
    background-image: none;
}
figure img {
    display: block;
    width: 100%}
figcaption {
    font-size: 0.75rem;
    font-style: italic;
}
figcaption a {
    background-image: linear-gradient(transparent 0%,  transparent 50%,  #110 50%,  #110 100%);
}
figcaption a:focus, figcaption a:hover {
    background-image: linear-gradient(transparent 0%,  transparent 50%,  #F22 50%,  #F22 100%);
    color: #F22;
}
h1, h2, h3 {
    max-width: 30rem;
    color: #110;
    font-weight: 600;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
}
h1 {
    margin: 3rem 0 0;
}
h2 {
    margin: 1.5rem 0 0;
    font-size: 1.2rem;
    line-height: 3rem;
}
h3 {
    margin: 1.5rem 0 0;
    font-size: 1rem;
    line-height: 1.5rem;
}
header time {
    display: block;
    margin: 0 0 1.5rem;
    color: #444;
    font-size: 0.75rem;
    line-height: 1.5rem;
}
ins {
    display: block;
    margin: 1.5rem 0;
    font-weight: 600;
    text-decoration: none;
}
ins:before {
    content: "Update: "}
ins em {
    font-style: normal;
}
label {
    color: #444;
    line-height: 1.5rem;
}
input[type="text"], textarea {
    box-sizing: border-box;
    display: block;
    width: 100%;
    margin: 0 0 1.5rem;
    border: none;
    background: #EEE;
    font-family: inherit;
    font-size: 0.75rem;
    line-height: 0.75rem;
}
input[type="text"] {
    padding: 0.75rem;
    line-height: 1.5rem;
}
main, footer {
    -webkit-animation: introduction 0.75s ease-out;
    animation: introduction 0.75s ease-out;
}
textarea {
    height: 9rem;
    padding: 0.75rem;
}
button, input[type="button"], input[type="submit"], a.btn {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0 0 1.5rem;
    padding: 0.75rem 1.5rem;
    background: #110;
    color: #FFF;
    border: 0;
    border-radius: 0.25rem;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    cursor: pointer;
}
button:focus, button:hover, input[type="button"]:focus, input[type="button"]:hover, input[type="submit"]:focus, input[type="submit"]:hover, a.btn:focus, a.btn:hover {
    background: #F22;
}
.site-header {
    padding: 1.5rem 0;
    color: #110;
    text-align: center;
}
.site-header a {
    background-image: none;
}
@media (min-width: 600px) {
    .site-header {
    text-align: left;
}
}.site-title {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5rem;
}
@media (min-width: 600px) {
    .site-title {
    float: left;
}
}.site-nav {
    margin: 0;
    padding: 0;
    font-size: 0.75rem;
    list-style: none;
}
@media (min-width: 600px) {
    .site-nav {
    float: right;
}
}.site-nav__item {
    display: inline-block;
    margin: 0 0.375rem;
}
@media (min-width: 600px) {
    .site-nav__item {
    margin: 0 0 0 0.75rem;
}
}.file-input-hover {
    background: #2CD;
    color: #2CD;
}
.controls input {
    display: block;
    width: 100%;
    margin: 0 0 0.75rem;
}
@media (min-width: 1000px) {
    .controls input {
    float: left;
    display: inline-block;
    width: auto;
    margin: 0 0.75rem 1.5rem 0;
}
}.c2a {
    margin: 6rem 0 1.5rem;
}
.introduction {
    margin: 0 auto;
    padding: 2rem 0 2rem;
    color: #110;
    line-height: 2.25rem;
    font-size: 0.8rem;
    text-align: left;
}
.introduction h1 {
    color: #110;
    max-width: 50rem;
    margin: 0 auto;
}
@media (min-width: 600px) {
    .introduction {
    padding: 8rem 0 8rem;
    line-height: 2.25rem;
    background: url("../images/11.jpg") no-repeat center center fixed;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}
.introduction h1 {
    color: #EEE;
}
}.articles-list {
    margin: 3rem 0 1.5rem;
    padding: 0;
    list-style: none;
}
.articles-list__item {
    margin: 1.5rem 0;
}
.articles-list__item a {
    font-weight: 700;
    background-image: none;
}
.articles-list__item time {
    display: block;
    font-size: 0.75rem;
}
.article--text h1 {
    font-size: 1.4rem;
    line-height: 1.5rem;
}
.article--text h1 a {
    background-image: none;
}
.article--link h1 {
    font-size: 1rem;
    line-height: 1.5rem;
}
.article--link h1 a {
    background-image: none;
}
.article--page h1 {
    margin: 3rem 0 1.5rem;
    font-size: 1.4rem;
    line-height: 1.5rem;
}
.article--page h1 a {
    background-image: none;
}
.permalink, .permalink:focus, .permalink:hover {
    background-image: url(data:image/svg+xml;
    base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiA5NiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMzIgOTYiPjxwYXRoIGZpbGw9IiNEREQiIGQ9Ik0yOS44IDIuM2wtLjEtLjFDMjYuOC0uNyAyMS45LS43IDE5IDIuMkwxMi4yIDljLTIuOSAyLjktMi45IDcuOCAwIDEwLjdsLjEuMWMuMi4yLjUuNS44LjdsMi41LTIuNWMtLjMtLjItLjYtLjQtLjgtLjZsLS4xLS4xYy0xLjYtMS42LTEuNi00LjIgMC01LjhsNi44LTYuOGMxLjYtMS42IDQuMi0xLjYgNS44IDBsLjEuMWMxLjYgMS42IDEuNiA0LjIgMCA1LjhsLTMuMSAzLjFjLjUgMS4zLjggMi43LjggNC4xbDQuOC00LjhjMi44LTIuOSAyLjgtNy43LS4xLTEwLjd6bS0xMC4xIDkuOWMtLjItLjItLjUtLjUtLjgtLjdMMTYuNSAxNGMuMy4yLjYuNC44LjZsLjEuMWMxLjYgMS42IDEuNiA0LjIgMCA1LjhsLTYuOCA2LjhjLTEuNiAxLjYtNC4yIDEuNi01LjggMGwtLjEtLjFjLTEuNi0xLjYtMS42LTQuMiAwLTUuOGwzLjEtMy4xQzcuMiAxNyA3IDE1LjYgNyAxNC4yTDIuMiAxOWMtMi45IDIuOS0yLjkgNy44IDAgMTAuN2wuMS4xYzIuOSAyLjkgNy44IDIuOSAxMC43IDBsNi44LTYuOGMyLjktMi45IDIuOS03LjggMC0xMC43bC0uMS0uMXoiLz48cGF0aCBmaWxsPSIjRjIyIiBkPSJNMjkuOCA2Ni4zbC0uMS0uMWMtMi45LTIuOS03LjgtMi45LTEwLjcgMEwxMi4yIDczYy0yLjkgMi45LTIuOSA3LjggMCAxMC43bC4xLjFjLjIuMi41LjUuOC43bDIuNS0yLjVjLS4zLS4yLS42LS40LS44LS42bC0uMS0uMWMtMS42LTEuNi0xLjYtNC4yIDAtNS44bDYuOC02LjhjMS42LTEuNiA0LjItMS42IDUuOCAwbC4xLjFjMS42IDEuNiAxLjYgNC4yIDAgNS44bC0zLjEgMy4xYy41IDEuMy44IDIuNy44IDQuMWw0LjgtNC44YzIuOC0yLjkgMi44LTcuNy0uMS0xMC43em0tMTAuMSA5LjljLS4yLS4yLS41LS41LS44LS43TDE2LjUgNzhjLjMuMi42LjQuOC42bC4xLjFjMS42IDEuNiAxLjYgNC4yIDAgNS44bC02LjggNi44Yy0xLjYgMS42LTQuMiAxLjYtNS44IDBsLS4xLS4xYy0xLjYtMS42LTEuNi00LjIgMC01LjhsMy4xLTMuMUM3LjIgODEgNyA3OS42IDcgNzguMkwyLjIgODNjLTIuOSAyLjktMi45IDcuOCAwIDEwLjdsLjEuMWMyLjkgMi45IDcuOCAyLjkgMTAuNyAwbDYuOC02LjhjMi45LTIuOSAyLjktNy44IDAtMTAuN2wtLjEtLjF6Ii8+PC9zdmc+) !important;
    background-repeat: no-repeat;
    background-size: 0.75rem 2.25rem;
}
.permalink {
    display: inline-block;
    height: 0.75rem;
    width: 0.75rem;
    margin: 0 0 0 0.25rem;
    background-position: top;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}
.permalink:focus, .permalink:hover {
    background-position: bottom;
}
.container {
    max-width: 36rem;
    margin: 0 auto;
    padding: 0 0.75rem;
}
@media (min-width: 600px) {
    .container {
    padding: 0 1.5rem;
}
}@media (min-width: 1000px) {
    .container {
    padding: 0 3rem;
}
}.site-main {
    padding: 0 0 3rem;
}
.site-footer {
    margin: 1.5rem 0 0;
    color: #110;
    font-size: 0.75rem;
}