:root {
    --text-color: #222222;
    --light-grey: #f6f6f6;
    --grey: #808080;
    --grey-darker: #494949;
    --border-color: #e6e6e6;
    --navy-blue: #0c5c62;
    --code-back: #29292e;
    --light-blue: #f2f6ff;
}

html,
body,
aside {
    margin: 0;
    padding: 0;
    color: var(--text-color);
    font-size: 18px;
}

h1 {
    font-size: 2rem;
    line-height: 1;
}

h2 {
    font-size: 1.8rem;
    line-height: 1;
}

h3 {
    font-size: 1.4rem;
    line-height: 1;
}

ul,
ol,
p,
a {
    font-size: 18px;
    color: var(--text-color);
}

hr {
    border: 0.5px solid var(--border-color);
    margin: 16px 0;
}

body pre[class*=language-] code {
    font-size: 0.9rem;
}

body pre[class*=language-] {
    line-height: 1.2;
}

:not(pre)>code[class*="language-"],
pre[class*="language-"] {
    background: var(--code-back);
}

*:not(code > *) {
    font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
    box-sizing: border-box;
}

.app-header {
    display: flex;
    justify-content: space-between;
    padding: 16px 0;
    border-bottom: 1px solid var(--border-color);
}

.app-header__block-link {
    text-transform: uppercase;
    padding: 16px;
    letter-spacing: .1rem;
    font-weight: 500;
}

.app-header__block-link .demo-icon {
    display: none;
}

.content {
    min-height: calc(100vh - 52px - 86px);
    width: 50%;
    margin: auto;
    /* min-width: 350px; */
}

a {
    text-decoration: none;
}

.app-footer {
    border-top: 1px solid var(--border-color);
    padding: 16px 0;
    color: var(--grey);
}

.app-footer .app-footer__block,
.app-footer .app-footer__block .app-footer__link {
    color: var(--grey);
    font-size: 14px;
}

.app-footer .app-footer__block .app-footer__link:hover {
    color: var(--grey-darker)
}

.app-footer__block {
    text-align: center;
}

.app-footer__link::before,
.app-footer__link:last-of-type::after {
    content: "·";
    font-size: 18px;
    display: inline-block;
    padding-right: 4px;
}

.app-footer__link:last-of-type::after {
    padding-left: 4px;
}

.app-footer .app-footer__block.app-footer__copyright {
    font-size: 12px;
    margin-top: 12px;
}

.nav-button {
    background-color: var(--light-grey);
    border: none;
    text-align: center;
    text-decoration: none;
    display: block;
    padding: 12px;
    font-weight: 600;
    cursor: pointer;
    color: var(--grey-darker);
}

.nav-button:hover {
    filter: brightness(98%);
}


.post__tags {
    display: flex;
    align-items: flex-start;
}

.post__tags .post__tag {
    color: var(--grey-darker);
    background: var(--light-grey);
    padding: 2px 6px;
    font-size: 12px;
    border-radius: 4px;
}

.post__tags .post__tag:not(:last-of-type) {
    margin-right: 8px;
}

#page-progress {
    position: fixed;
    top: 0;
    width: 0%;
    height: 4px;
    background: #84cbb5;
    z-index: 10000;
}

@media (max-width: 1300px) {
    .content {
        width: 70%;
    }
}

@media (max-width: 1100px) {
    .content {
        width: 80%;
    }
}

@media (max-width: 800px) {
    .content {
        width: 90%;
    }

    .app-header__block-link {
        padding: 16px 8px;
    }

    .app-header__block-link span {
        display: none;
    }

    .app-header__block-link .demo-icon {
        display: inline;
        font-size: 1.5rem;
    }

    .content__welcome img.content-welcome__title-image {
        width: 100px;
    }

    .content-welcome__block.content-welcome__title-text {
        transform: scale(0.9);
    }
}

@media (max-width: 600px) {
  iframe {
    width: 100%;
  }
}

@media (max-width: 400px) {
    html,
    body,
    p,
    a,
    aside,
    ul,
    ol,
    p,
    a {
    font-size: 16px;
    color: var(--text-color);
} {
      font-size: 16px;
    }

    .content .content__welcome {
        transform: scale(0.8);
        padding: 30px 0;
    }
   
    h1 {
        font-size: 1.8rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.2rem;
    }
}

@media (max-width: 350px) {
    .content__welcome img.content-welcome__title-image {
       display: none;
    }
}