* {
    box-sizing: border-box
}

*:before,
*:after {
    box-sizing: inherit
}

body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
li,
dd,
figure,
figcaption,
dl,
dd,
dt {
    margin: 0px;
    padding: 0px
}

body {
    -ms-overflow-style: -ms-autohiding-scrollbar;
    scroll-behavior: smooth;
    font-size: 1rem;
    min-height: 100vh
}

ul[class],
ol[class] {
    list-style: none
}

::-webkit-search-decoration {
    display: none
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder,
select::-webkit-input-placeholder {
    line-height: normal
}

input[type='search'] {
    -webkit-appearance: textfield
}

img {
    max-width: 100%
}

@media (prefers-reduced-motion: reduce) {
    * {
        -webkit-animation: none !important;
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important
    }
}

html {
    height: 100%;
    -webkit-text-size-adjust: 100%
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 1rem;
    line-height: 1.625;
    color: #323232;
    text-align: left;
    background-color: #f5f8fc
}

.layout {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden
}

.layout__primary {
    flex: 1 0 auto;
    padding: 1rem;
    background-color: #fff;
    box-shadow: 0 2px 4px 0 rgba(14, 30, 37, 0.12)
}

.layout__secondary {
    display: none
}

.layout__content {
    max-width: 640px;
    margin: 0 auto
}

@media (min-width: 600px) {
    .layout__secondary {
        display: flex;
        justify-content: center;
        align-items: center;
        order: -1
    }
}

@media (min-width: 1200px) {
    .layout {
        width: 50%
    }

    .layout__primary {
        padding: 2rem;
        border-right: 1px solid #c9d3e4
    }

    .layout__secondary {
        position: fixed;
        top: 0;
        left: 50%;
        bottom: 0;
        right: 0
    }
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    line-height: 1.3
}

h1,
.h1 {
    font-size: 2rem;
    text-rendering: optimizeLegibility
}

h2,
.h2 {
    font-size: 1.5rem;
    font-weight: 700
}

h3,
.h3 {
    font-size: 1.25rem;
    font-weight: 700
}

a {
    color: #7b16ff;
    font-weight: 500;
    text-decoration: none
}

a:hover,
a:focus {
    color: #6200e2;
    text-decoration: underline
}

.markdown {
    font-size: 1.125rem
}

.markdown>* {
    margin-bottom: 2rem
}

.markdown a {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto
}

.markdown img,
.markdown video {
    display: block;
    max-width: 100%;
    margin: 0 auto 2rem;
    color: #54698d;
    font-style: italic;
    text-align: center
}

.markdown figure {
    max-width: none;
    margin: 2rem auto;
    text-align: center
}

.markdown figure img {
    margin-bottom: 0
}

.markdown figcaption {
    padding-top: 0.75rem;
    font-style: italic;
    font-size: 1rem
}

.markdown video {
    max-width: 100%;
    height: auto
}

.markdown h2,
.markdown h3,
.markdown h4 {
    position: relative;
    margin-top: 2em;
    margin-bottom: 0.5em
}

.markdown h2:first-child,
.markdown h3:first-child,
.markdown h4:first-child {
    margin-top: 0
}

.markdown ul,
.markdown ol {
    list-style-position: inside
}

.markdown ul {
    list-style-type: disc
}

.markdown ol {
    list-style-type: decimal
}

code[class*='language-'],
pre[class*='language-'] {
    font-family: Menlo, Monaco, Consolas, "Andale Mono", "Courier New", monospace;
    font-size: 0.875rem;
    line-height: 1.6;
    direction: ltr;
    text-align: left;
    word-spacing: normal;
    tab-size: 4;
    hyphens: none;
    white-space: pre;
    background: #1d1f21;
    color: #f9f8f5
}

pre[class*='language-'] {
    display: block;
    border-radius: 0.5rem;
    padding: 1.5rem;
    overflow-x: auto
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
    color: #75715e
}

.token.punctuation {
    color: #fefefe
}

.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted,
.token.class-name {
    color: #ae81ff
}

.token.boolean,
.token.number {
    color: #00e0e0
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
    color: #abe338
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
    color: #00e0e0
}

.token.atrule,
.token.attr-value,
.token.function {
    color: #ffd700
}

.token.keyword {
    color: #66d9ef
}

.token.regex,
.token.important {
    color: #ffd700
}

.token.important,
.token.bold {
    font-weight: bold
}

.token.italic {
    font-style: italic
}

.token.entity {
    cursor: help
}

@media screen and (-ms-high-contrast: active) {

    code[class*='language-'],
    pre[class*='language-'] {
        color: windowText;
        background: window
    }

    :not(pre)>code[class*='language-'],
    pre[class*='language-'] {
        background: window
    }

    .token.important {
        background: highlight;
        color: window;
        font-weight: normal
    }

    .token.atrule,
    .token.attr-value,
    .token.function,
    .token.keyword,
    .token.operator,
    .token.selector {
        font-weight: bold
    }

    .token.attr-value,
    .token.comment,
    .token.doctype,
    .token.function,
    .token.keyword,
    .token.operator,
    .token.property,
    .token.string {
        color: highlight
    }

    .token.attr-value,
    .token.url {
        font-weight: normal
    }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0
}

.u-align-right {
    text-align: right !important
}

.btn {
    border: 0;
    border-radius: 0.25rem;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 2px 4px 0 rgba(14, 30, 37, 0.12);
    cursor: pointer;
    display: inline-block;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.618em;
    padding: 0.5em 1em;
    text-align: center;
    text-decoration: none;
    vertical-align: middle
}

.btn--primary {
    color: #fff;
    background-color: #7b16ff
}

.btn--primary:hover,
.btn--primary:focus {
    text-decoration: none;
    background-color: #6b00f6;
    color: #fff
}

.btn--github {
    display: inline-flex;
    align-items: center;
    color: #fff;
    background-color: #231f20
}

.btn--github:hover,
.btn--github:focus {
    background-color: #111;
    text-decoration: none;
    color: #fff
}

.btn--github svg {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    margin-right: 0.5em;
    fill: currentColor
}

.webring {
    padding-bottom: 2rem;
    margin-bottom: 2rem;
    border-bottom: 4px solid #c9d3e4
}

.webring__header {
    margin-bottom: 2rem
}

.webring__title {
    margin-bottom: 0.5rem
}

.webring__subtitle {
    margin-bottom: 1rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center
}

.webring__memberlist {
    max-height: 150px;
    border: 1px solid #c9d3e4;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch
}

.webring__member:not(:last-child) {
    border-bottom: 1px solid #c9d3e4
}

.webring__member:nth-child(even) {
    background-color: rgba(168, 183, 199, 0.1)
}

.webring__link {
    display: block;
    padding: 0.25rem 0.5rem;
    text-decoration: none
}

.map__circle {
    fill: transparent;
    stroke: #a8b7c7;
    stroke-width: 3
}

.map__title {
    font-size: 1rem;
    font-weight: bold
}

.map__center {
    fill: #7b16ff;
    fill-opacity: 0.25
}

.map__image {
    border-radius: 50%
}

.map__node {
    fill: #6f6f6e;
    stroke-width: 5;
    stroke-opacity: 0;
    stroke: #7b16ff
}

.map__node:hover {
    fill: #7b16ff;
    stroke-opacity: 1
}

.map__tooltip {
    font-weight: bold
}

.map--dense .map__tooltip {
    opacity: 0
}

.map--dense .map__node:hover+.map__tooltip {
    opacity: 1
}

.form {
    background-color: #fff;
    border-radius: 0.5rem;
    border: 1px solid #a8b7c7;
    box-shadow: 0 2px 4px 0 rgba(14, 30, 37, 0.12);
    padding: 1.5rem
}

.form__field {
    margin-bottom: 1rem
}

.form__label {
    display: block;
    font-weight: bold;
    margin-bottom: 0.25rem;
    font-size: 0.875rem
}

.form__input {
    display: block;
    width: 100%;
    font-size: 1rem;
    border: 1px solid #a8b7c7;
    border-radius: 0.25rem;
    background-color: #fff;
    padding: 0.75rem 1rem
}

.repolink {
    position: absolute;
    top: 0;
    right: 0
}

.repolink svg {
    position: relative;
    z-index: 1;
    fill: #fff;
    margin: 10px
}

.repolink::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    right: 0;
    border-style: solid;
    border-width: 0 80px 80px 0;
    border-color: transparent #323232 transparent transparent
}

.repolink:hover::after {
    border-color: transparent #121212 transparent transparent
}

@media (min-width: 1200px) {
    .repolink {
        position: fixed
    }
}