img {
    max-width: 100%;
    margin: 0.5rem 0
}

pre {
    overflow: auto;
    background-color: #fffcf3;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    border: 1px solid #ddd
}

code:not(pre > code) {
    background: #fffcf3;
    padding: 0.25rem;
    border-radius: 6px;
    border: 1px solid #ddd
}

article > time:before {
    content: '📅'
}

article > time {
    background: #f3feff;
    padding: 0.15rem;
    border: 1px solid #ddd;
    border-radius: 6px
}

.info {
    display: block;
    background: #c4f0f4;
    padding: 0.5rem 2.75rem 0.5rem;
    border-radius: 6px;
    position: relative
}

.info:before {
    content: '👉';
    margin: 0.5rem;
    font-size: 24px;
    position: absolute;
    top: -11px;
    left: 0px
}

.btn {
    display: inline-flex;
    font-size: 18px;
    color: #fff;
    background: var(--primary-color);
    padding: 10px;
    border: none;
    border-radius: 8px
}

.btn:hover {
    background: var(--primary-accent-color);
    color: #fff
}

h1 {
    font-size: 36px
}

h2 {
    font-size: 24px
}

h3 {
    font-size: 20px
}

h1,
h2,
h3 {
    margin-top: 0
}

kbd {
    border-radius: 8px;
    background: #fff;
    padding: 10px;
    box-shadow: 1px 4px #dedede;
    text-shadow: 1px 3px #dedede;
    display: inline-flex;
    margin: 4px 0;
    border: 1px solid #dedede
}

a {
    color: var(--secondary-color);
    text-decoration: none
}

a:hover,
a:active {
    color: var(--sub-color)
}

article {
    margin-bottom: 1em;
    padding: 1em;
    background: var(--article-background);
    border-radius: 5px;
    font-size: 18px
}

@media screen and (max-width: 1340px) {
    article {
        border-radius: 0
    }
}