article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
    display: block
}

 
blockquote,q {
    quotes: none
}

blockquote:before,blockquote:after,q:before,q:after {
    content: '';
    content: none
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

a,a:hover,a:focus,a:visited,a:active {
    text-decoration: none;
    color: inherit
}

img {
    max-width: 100%
}

input {
    margin: 0
}

:root {
    --weight-light: 300;
    --weight-regular: 400;
    --weight-bold: 700;
    --color-text: #313337;
    --color-black: #313337;
    --color-white: #f8f9fb;
    --color-light-gray: #e9e9e9;
    --color-gray: #ddd;
    --color-dark-gray: #838587;
    --color-very-light-purple: #f8f6fc;
    --color-light-purple: #9674cc;
    --color-purple: #764abc;
    --color-purple-1: #6233ae;
    --color-dark-purple: #202473;
    --color-red: #bd4147;
    --color-green: #1c9963;
    --color-transparent: rgba(0,0,0,0);
    --fs-1: 3rem;
    --fs-2: 2.25rem;
    --fs-3: 1.5rem;
    --fs-4: 1.25rem;
    --fs-5: 1rem;
    --fs-6: .875rem;
    --fs-7: .75rem;
    --content-max-width: 80rem;
    --min-post-card-width: 240px;
    --min-feat-post-card-width: 340px;
    --min-post-card-width-sm: 220px;
    --min-feat-post-card-width-sm: 320px;
    --max-post-card-width: 420px
}

* {
    box-sizing: border-box
}

html {
    font-family: 'Proxima Nova',sans-serif;
    font-weight: 500;
    font-size: 16px
}

:not(h1)>:is(code,kbd,pre,samp) {
    font-family: 'IBM Plex Mono',monospace;
    font-size: .8em;
    padding: .2rem .4rem;
    background-color: var(--color-very-light-purple);
    border-radius: 8px
}

body {
    line-height: 1.5;
    color: var(--color-text);
    background-color: #fff
}

h1,h2,h3,h4,h5,h6 {
    font-weight: var(--weight-bold)
}

h1 {
    font-size: var(--fs-1)
}

h2 {
    font-size: var(--fs-2)
}

h3 {
    font-size: var(--fs-3)
}

h4 {
    font-size: var(--fs-4)
}

h5 {
    font-size: var(--fs-5)
}

h6 {
    font-size: var(--fs-6)
}

.lr-button,.lr-button:visited {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-size: .9rem;
    color: var(--color-white);
    background-color: var(--color-purple);
    text-align: center
}

.lr-button:active,.lr-button:hover {
    color: var(--color-white);
    background-color: var(--color-purple-1)
}

.content-max-width {
    margin: 0 auto;
    max-width: 1280px
}

@media (max-width: 1400px) {
    .content-max-width {
        max-width:85%
    }
}

@media (max-width: 1000px) {
    .content-max-width {
        max-width:95%
    }
}

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

.sidebar-container {
    display: flex;
    justify-content: space-between
}

.sidebar-container>:first-child {
    max-width: 305px
}

.sidebar-container>:first-child .sticky {
    position: sticky;
    top: 130px
}

.sidebar-container>:last-child {
    flex-grow: 1
}

.sidebar-container>:is(:first-child,:last-child) {
    display: flex;
    flex-direction: column;
    gap: 3.5rem;
    padding: 0 1rem
}

@media (max-width: 1280px) {
    .sidebar-container {
        display:block
    }

    .sidebar-container>:last-child {
        margin-top: 1.5rem
    }

    .sidebar-container>:is(:first-child,:last-child) {
        padding: 0 1.5rem;
        gap: .5rem
    }
}

aside .menu {
    background-color: #fff;
    font-weight: var(--weight-bold);
    border-left: 1px solid var(--color-gray)
}

aside .menu a,.blog-categories a:hover,.blog-categories a:visited,.blog-categories a:active {
    color: var(--color-text);
    text-decoration: none;
    display: block;
    padding: 12px 16px
}

aside .menu .sub-menu {
    font-weight: var(--weight-regular)
}

aside .menu .current-menu-item:not(.current-menu-ancestor)>a {
    color: var(--color-purple);
    border-left: 2px solid var(--color-purple);
    background-color: var(--color-very-light-purple)
}

#analytics-post-info {
    display: none
}

#post-header {
    margin-bottom: 2rem;
    border-radius: 12px;
    background-color: var(--color-purple);
    color: var(--color-white);
    padding: 4rem;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem
}

#post-header .icon-post-header-dots-sm,#post-header .icon-post-header-dots-lg,#post-header .icon-post-header-stars {
    position: absolute;
    z-index: 0
}

#post-header .wordcount,#post-header .logrocket_editor {
    display: none
}

#post-date,#post-title,#post-author-info {
    z-index: 1
}

#post-header .icon-post-header-dots-sm {
    top: 30px;
    left: 30px
}

#post-header .icon-post-header-dots-lg {
    bottom: 30px;
    right: 30px
}

#post-header .icon-post-header-stars {
    bottom: 30px;
    left: 30px
}

#post-author-img img {
    border-radius: 100%
}

#post-author-info {
    display: flex;
    gap: 1rem;
    align-items: center
}

#post-author-img {
    flex: 0 0 auto
}

#post-author-name {
    display: block;
    font-weight: var(--weight-bold)
}

#post-author-desc {
    display: block;
    font-weight: var(--weight-light)
}

#post-author-desc a {
    font-weight: var(--weight-bold)
}

#post-author-name:hover,#post-author-desc a:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px
}

#the-content-container {
    max-width: 895px
}

.lr-content img.wp-post-image {
    margin-top: 2rem;
    margin-bottom: 2rem;
    border-radius: 20px
}

#recent-posts {
    max-width: 90%;
    margin-inline:auto}

.view-all-posts {
    max-width: 90%;
    margin-inline:auto;margin-top: 3rem;
    border-top: 1px solid var(--color-gray);
    padding: 3rem;
    display: flex;
    justify-content: center
}

.post-edit-link,.post-edit-link:active,.post-edit-link:hover,.post-edit-link:focus {
    display: block;
    color: var(--color-purple);
    padding: 1rem 0
}

.post-edit-link:hover {
    text-decoration: underline
}

@media (max-width: 800px) {
    #post-title {
        font-size:var(--fs-2)
    }

    #post-header {
        border-radius: 0
    }
}

#page-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 1140px;
    margin-inline:auto;margin-top: 2rem
}

#page-title {
    color: var(--color-dark-purple);
    border-bottom: 1px solid var(--color-gray);
    font-sise: var(--fs-2);
    font-weight: var(--weight-bold)
}

@media (max-width: 1200px) {
    #page-container {
        max-width:100%;
        margin-inline:none;margin-top: 0;
        padding: 2rem
    }
}

#author-hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    backgroundd-position: center;
    min-height: 400px;
    color: var(--color-white);
    position: relative;
    padding: 3rem
}

#author-name {
    font-weight: var(--weight-bold);
    font-size: 2.5rem;
    padding: 1rem
}

#author-description {
    font-size: 1.3rem;
    width: 40ch;
    text-align: center
}

#author-description a {
    font-weight: var(--weight-bold)
}

#author-img img {
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translate(-50%,-50%)
}

#author-links {
    display: flex;
    gap: 1.5rem;
    padding: 1rem
}

#author-links i {
    font-size: 1.2rem
}

#author-archive {
    margin-top: 30px;
    padding: 1rem
}

@media(max-width: 800px) {
    #author-description {
        width:100%
    }
}

#tag-archive {
    margin-top: 1rem
}

#not-found {
    width: 600px;
    margin: 50px auto;
    display: flex;
    flex-direction: column;
    align-items: center
}

#not-found h1 {
    font-size: 2rem;
    font-weight: var(--weight-bold)
}

#comments {
    font-family: 'Crimson Text',serif;
    font-size: 1.2rem;
    display: flex;
    flex-direction: column;
    align-items: center
}

#comments a {
    color: var(--color-green)
}

#comments a:hover {
    text-decoration: underline
}

#comments .comments-container {
    max-width: 80ch
}

#comments .comment-metadata a {
    color: var(--color-dark-gray)
}

#comments .comment {
    margin-top: 20px;
    background-color: #fff;
    box-shadow: 0 0px 2px var(--color-dark-gray);
    border-radius: 3px;
    padding: 20px;
    position: relative
}

#comments .comment .reply:after {
    display: inline-block;
    width: 20px;
    height: 20px;
    content: " ";
    margin-left: 5px
}

#comments .comment .reply {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 2px 8px;
    color: var(--color-dark-gray)
}

#comments .comment .reply:hover {
    text-decoration: underline
}

#comments .comment-author img {
    text-transform: capitalize;
    vertical-align: middle;
    border-radius: 50%
}

#comments .fn {
    font-weight: var(--weight-bold);
    padding-left: 10px
}

#comments .comment-meta {
    color: var(--color-dark-gray)
}

#comments .comment-respond {
    margin-top: 20px
}

#comments .comment-reply-title {
    font-size: var(--fs-4)
}

#cancel-comment-reply-link {
    display: inline-block;
    margin: 0 10px;
    font-size: var(--fs-6)
}

#blog-hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-position: center;
    padding: 0 1rem;
    height: 400px;
    color: var(--color-white);
    z-index: 999;
    margin-bottom: 2rem
}

#blog-hero-title {
    color: var(--color-white)
}

#blog-hero-subtitle {
    font-size: var(--fs-5);
    color: var(--color-white)
}
 

#nav-bar-container {
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    position: fixed;
    z-index: 10;
    margin-bottom: 1rem;
    border-radius: 0 0 12px 12px
}

#nav-bar-container.nav-bar-sticky {
    position: sticky
}

.admin-bar #nav-bar-container {
    top: 32px
}

#nav-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    background-color: var(--color-white);
    border-radius: 0 0 12px 12px;
    padding: 8px 24px
}

#nav-bar #logrocket-logo img {
    display: block;
    width: 150px;
    margin-right: 1rem
}

#nav-bar-menu-container {
    flex: 1 1 auto;
    display: flex;
    justify-content: space-between
}

#nav-bar-menu-container .menu {
    align-items: center;
    display: flex;
    gap: 44px;
    font-size: .85rem
}

#nav-bar-menu-container .menu li {
    position: relative
}

#nav-bar-menu-container .menu a {
    display: block;
    color: var(--color-purple);
    padding: 10px;
    text-transform: uppercase
}

#nav-bar-menu-container .menu .sub-menu {
    display: none;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    background-color: var(--color-light-gray);
    width: max-content;
    padding: 8px 0
}

#nav-bar-menu-container .menu li:hover .sub-menu {
    display: block
}

#nav-bar-menu-container .menu .sub-menu:before {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    transform: rotate(45deg) translate(-50%);
    width: 20px;
    height: 20px;
    background: var(--color-light-gray)
}

#nav-bar-menu-container .menu .sub-menu a {
    text-transform: none
}

#nav-bar-menu-container .menu .sub-menu li:hover {
    text-decoration: underline;
    background-color: var(--color-white)
}

#nav-bar .menu>.nav-bar-cta>a {
    background-color: var(--color-purple);
    color: var(--color-white);
    border-radius: 8px
}

#nav-bar-menu-icon {
    padding: 9px;
    border: 1px solid var(--color-gray);
    border-radius: 8px
}

#nav-bar-menu-icon,#nav-bar-menu-toggle {
    display: none
}

@media (max-width: 800px) {
    .admin-bar #nav-bar-container,#nav-bar-container,#nav-bar-container.nav-bar-sticky {
        position:relative;
        top: 0;
        margin: 0
    }

    #nav-bar-menu-container {
        justify-content: right
    }

    #nav-bar {
        margin: 0;
        padding: 15px;
        border-radius: 0
    }

    #nav-bar-menu-icon {
        display: block
    }

    #nav-bar-menu-container .menu {
        display: none;
        background-color: var(--color-white);
        position: absolute;
        left: 0;
        top: 100%;
        width: 100%;
        box-shadow: 0 0 10px var(--color-gray)
    }

    #nav-bar-menu-container .menu li {
        position: static
    }

    #nav-bar-menu-container .menu .sub-menu {
        display: block;
        position: static;
        transform: translate(0);
        width: 100%;
        background-color: var(--color-white);
        padding-left: 1rem
    }

    #nav-bar-menu-container .menu .sub-menu:before {
        display: none
    }

    #nav-bar-menu-container .menu .nav-bar-cta>a {
        background-color: inherit;
        color: inherit;
        border-radius: 0
    }

    #nav-bar-menu-container .menu>.menu-item>a {
        color: var(--color-black)
    }

    #nav-bar-menu-container input[type=checkbox]:checked~.menu {
        display: block
    }
}

.toc-container {
    background-color: #fff;
    display: flex;
    flex-direction: column;
    gap: .5rem
}

.toc-header {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.toc-expand,.toc-collapse {
    font-size: 1.2rem;
    cursor: pointer;
    color: var(--color-purple)
}

.toc-expand.hide,.toc-collapse.hide {
    display: none
}

.toc-title {
    font-size: var(--fs-4);
    font-weight: var(--weight-bold)
}

.toc {
    overflow: auto;
    /* max-height: 600px; */
    transition: max-height .4s
}

.toc .toc-subheading {
    font-size: .85em
}

.toc a,.toc a:hover,.toc a:visited,.toc a:active {
    color: var(--color-text);
    text-decoration: none;
    display: block;
    padding: 12px 16px;
    border-left: 1px solid var(--color-gray)
}

.toc .toc-subheading a {
    padding-left: 22px
}

.toc a:hover {
    color: var(--color-purple);
    border-left: 2px solid var(--color-purple);
    background-color: var(--color-very-light-purple)
}

.toc-container .hide {
    max-height: 0;
    overflow: hidden
}

.post-card {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem
}

.post-card {
    max-width: var(--max-post-card-width);
    border-radius: 8px
}

.post-card:hover .post-card-img img {
    box-shadow: 0 0 5px var(--color-purple);
    transition-duration: .25s
}

.post-card-title {
    display: block;
    margin: 4px 0
}

.post-card-category,.post-card-category:visited,.post-card-category:active,.post-card-category:focus {
    font-size: .9rem;
    display: inline-block;
    padding: .25rem .75rem;
    border-radius: 12px;
    color: var(--color-dark-purple);
    background-color: var(--color-very-light-purple);
    transition: color .2s
}

.post-card-category:hover {
    color: var(--color-purple)
}

.post-card-img img {
    transition-duration: .25s;
    width: 100%;
    max-width: var(--max-post-card-width);
    height: auto;
    border-radius: 9px
}

.post-card-author-img {
    float: left;
    margin-right: 1rem
}

.post-card-author-img>img {
    border-radius: 100%
}

.post-card-author-name {
    font-weight: var(--weight-bold)
}

.post-card-author-name:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px
}

.post-list-container {
    display: flex;
    flex-direction: column;
    gap: 2.5rem
}

.post-list-heading {
    display: block
}

.post-list {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(var(--min-post-card-width),1fr));
    column-gap: 32px;
    row-gap: 5rem
}

.featured.post-list {
    grid-template-columns: repeat(auto-fit,minmax(var(--min-feat-post-card-width),1fr))
}
@media (max-width: 800px) {
    .post-list {
        grid-template-columns:repeat(auto-fit minmax(var(--min-post-card-width-sm),1fr))
    }

    .featured.post-list {
        grid-template-columns: repeat(auto-fit,minmax(var(--min-feat-post-card-width-sm),1fr))
    }
}

#search-form {
    background-color: #fff;
    border: 1px solid var(--color-white);
    box-shadow: 0 0 1px var(--color-purple);
    border-radius: 5px;
    display: flex;
    align-items: center;
    padding: 5px 7px;
    max-width: 300px;
    margin-bottom: 1rem
}

#search-form:focus-within {
    border: 1px solid var(--color-purple);
    box-shadow: 0 0 3px var(--color-purple)
}

#s {
    border: 0;
    outline: 0;
    height: 1.5rem;
    width: 250px
}

#search-form>.icon-search {
    margin-right: 8px;
    width: 15px
}

.sharedaddy {
    display: none
}

.sharedaddy.sd-sharing-enabled {
    display: block
}

.sd-block {
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.sd-content>ul {
    display: flex;
    gap: 1rem
}

.share-icon {
    display: block;
    padding: 10px;
    border: 1px solid var(--color-gray);
    border-radius: 8px;
    background-color: #fff
}

.share-icon:hover {
    box-shadow: 0 0 10px var(--color-gray);
    background-color: var(--color-white)
}

.share-icon span:first-child {
    display: block;
    width: 20px;
    height: 20px
}

.share-end {
    display: none
}

.sharing-screen-reader-text {
    clip: rect(1px,1px,1px,1px);
    position: absolute;
    height: 1px;
    width: 1px;
    overflow: hidden
}

.share-customize-link {
    display: none
}

#post-tags {
    display: flex;
    gap: .2rem
}

#post-tags a[rel=tag] {
    padding: .5rem;
    border-radius: 8px;
    text-decoration: underline
}

#post-tags a[rel=tag]:hover {
    box-shadow: 0 0 4px var(--color-gray);
    background-color: var(--color-very-light-purple)
}

.post-popup {
    background-color: white;
    position: fixed;
    z-index: 999;
    padding: 1rem 2rem;
    box-shadow: 0 0 20px var(--color-light-gray);
    border-radius: 12px;
    bottom: -100%;
    left: 5%;
    right: 5%;
    transition: bottom 0.5s ease-in;
    .lr-button {
        font-size: var(--fs-7)
    }
}

@media (width>800px) {
    .post-popup {
        left: .5rem;
        right: unset;
        width: 600px
    }
}

.post-popup.show {
    bottom: .5rem
}

.post-popup__page {
    display: none;
    flex-direction: column;
    gap: .75rem
}

.post-popup__page.active {
    display: flex
}

.post-popup__title {
    color: var(--color-dark-purple);
    font-size: var(--fs-5);
    font-weight: var(--weight-bold)
}

.post-popup__exit {
    display: block;
    padding: 1rem;
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    font-weight: var(--weight-bold)
}

.post-popup__buttons {
    display: flex;
    gap: 2rem
}