
/* ======================================================
   404 Error Page
====================================================== */

.error-404 {
    min-height: 70vh;
    box-sizing: border-box;

    display: flex;
    align-items: center;

    padding-block: clamp(5rem, 10vw, 8rem);

    background:
        linear-gradient(
            135deg,
            var(--colour-brand) 0%,
            var(--colour-brand-light) 100%
        );

    color: #ffffff;

    text-align: center;
}


.error-404__content {
    width: min(
        100%,
        820px
    );

    margin-inline: auto;
}


.error-404__code {
    margin: 0 0 var(--space-3);

    color: #D9A0D0;

    font-family: Manrope, Inter, sans-serif;
    font-size: clamp(
        5rem,
        14vw,
        10rem
    );
    font-weight: 700;
    line-height: .85;
    letter-spacing: -.04em;
}


.error-404__title {
    margin: 0;

    color: #ffffff;

    font-size: clamp(
        2.25rem,
        5vw,
        4rem
    );
    line-height: 1.1;
}


.error-404__description {
    max-width: 620px;

    margin: var(--space-5) auto 0;

    color: rgba(255, 255, 255, .82);

    font-size: 1.1rem;
}


.error-404__actions {
    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: .75rem;

    margin-top: var(--space-6);
}


.error-404__actions .button-secondary {
    border-color: rgba(255, 255, 255, .3);

    background: transparent;

    color: #ffffff;
}


.error-404__actions .button-secondary:hover {
    border-color: rgba(255, 255, 255, .6);

    background: rgba(255, 255, 255, .06);

    color: #ffffff;
}


/* ======================================================
   Blog Post
====================================================== */

/*
 * ------------------------------------------------------
 * Post Hero
 * ------------------------------------------------------
 */

.blog-post-hero {
    padding-block: clamp(4rem, 8vw, 7rem);

    background:
        linear-gradient(
            135deg,
            var(--colour-brand) 0%,
            var(--colour-brand-light) 100%
        );

    color: #ffffff;
}


.blog-post-hero .container {
    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
}


/*
 * Eyebrow
 */

.blog-post-hero__eyebrow {
    margin-bottom: var(--space-4);

    color: #D9A0D0;

    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .12em;
    line-height: 1.4;
    text-transform: uppercase;
}


/*
 * Title
 */

.blog-post-hero__title {
    width: min(100%, 1000px);

    margin: 0;

    color: #ffffff;

    font-size: clamp(
        2.5rem,
        6vw,
        4.5rem
    );

    line-height: 1.08;
}


/*
 * Metadata
 */

.blog-post-hero__meta {
    margin-top: var(--space-5);

    color: rgba(255, 255, 255, .75);

    font-size: 1rem;
}


/*
 * Featured Image
 */

.blog-post-hero__image {
    width: min(100%, 1100px);

    margin-top: clamp(
        2.5rem,
        5vw,
        4rem
    );

    overflow: hidden;

    border-radius: var(--radius-large);

    box-shadow:
        0 24px 60px rgba(0, 0, 0, .25);
}


.blog-post-hero__image img {
    width: 100%;
    height: auto;
}


/*
 * ------------------------------------------------------
 * Article
 * ------------------------------------------------------
 */

.blog-post {
    padding-block: clamp(4rem, 8vw, 7rem);
}


.blog-post__content {
    width: min(
        100%,
        860px
    );

    margin-inline: auto;
}


/*
 * Article typography
 */

.blog-post__content h2 {
    margin-top: 3rem;
}


.blog-post__content h3 {
    margin-top: 2.5rem;
}


.blog-post__content h4 {
    margin-top: 2rem;
}


.blog-post__content p,
.blog-post__content ul,
.blog-post__content ol,
.blog-post__content blockquote,
.blog-post__content figure {
    margin-bottom: var(--space-5);
}


/*
 * Images inside articles
 */

.blog-post__content img {
    height: auto;
}


.blog-post__content figure {
    margin-inline: 0;
}


.blog-post__content figcaption {
    margin-top: var(--space-2);

    color: var(--colour-text);

    font-size: .9rem;
    text-align: center;
}


/*
 * Blockquotes
 */

.blog-post__content blockquote {
    margin-inline: 0;
    padding: var(--space-5) var(--space-6);

    border-left: 4px solid var(--colour-accent);

    background: var(--colour-surface);

    color: var(--colour-heading);

    font-size: 1.15rem;
    font-style: italic;
}


/*
 * Lists
 */

.blog-post__content ul,
.blog-post__content ol {
    padding-left: 1.5rem;
}


.blog-post__content li + li {
    margin-top: .5rem;
}


/*
 * ------------------------------------------------------
 * Post Footer
 * ------------------------------------------------------
 */

.blog-post-footer {
    padding-block: clamp(3rem, 6vw, 5rem);

    border-top: 1px solid var(--colour-border);

    background: var(--colour-surface);
}


/*
 * Taxonomy
 */

.blog-post-footer__taxonomy {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);

    margin-bottom: var(--space-8);
}


.blog-post-footer__categories,
.blog-post-footer__tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}


.blog-post-footer__label {
    color: var(--colour-heading);

    font-size: .9rem;
    font-weight: 700;
}


.blog-post-footer__terms {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}


.blog-post-footer__term {
    display: inline-flex;
    align-items: center;

    padding: .4rem .75rem;

    border: 1px solid var(--colour-border);
    border-radius: 999px;

    background: var(--colour-background);

    color: var(--colour-link);

    font-size: .85rem;
    font-weight: 600;
}


.blog-post-footer__term:hover {
    border-color: var(--colour-accent);

    color: var(--colour-link-hover);
}


/*
 * ------------------------------------------------------
 * Previous / Next Navigation
 * ------------------------------------------------------
 */

.blog-post-navigation {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);

    padding-top: var(--space-6);

    border-top: 1px solid var(--colour-border);
}


.blog-post-navigation__previous {
    text-align: left;
}


.blog-post-navigation__next {
    text-align: right;
}


.blog-post-navigation a {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}


.blog-post-navigation__label {
    color: var(--colour-text);

    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}


.blog-post-navigation__title {
    color: var(--colour-heading);

    font-family: Manrope, Inter, sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.3;
}


.blog-post-navigation a:hover .blog-post-navigation__title {
    color: var(--colour-link-hover);
}



/* ======================================================
   Blog Post - Technical Code Styling
====================================================== */

/*
 * ------------------------------------------------------
 * Inline code
 * ------------------------------------------------------
 */

.blog-post__content :not(pre) > code {
    display: inline-block;

    padding: .15em .45em;

    border: 1px solid rgba(156, 72, 139, .25);
    border-radius: 6px;

    background: #141025;
    color: #D9A0D0;

    font-family:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        Menlo,
        monospace;

    font-size: .88em;
    line-height: 1.4;
}


/*
 * ------------------------------------------------------
 * Code blocks
 * ------------------------------------------------------
 */

.blog-post__content pre {
    position: relative;

    margin: 2rem 0;

    padding: 1.5rem 1.75rem;

    overflow-x: auto;

    border: 1px solid rgba(156, 72, 139, .3);
    border-radius: var(--radius);

    background:
        linear-gradient(
            135deg,
            #141025 0%,
            #1b1535 100%
        );

    box-shadow:
        0 12px 30px rgba(20, 16, 37, .14);

    color: #E9E5F5;

    font-family:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        Menlo,
        monospace;

    font-size: .9rem;
    line-height: 1.7;

    -webkit-overflow-scrolling: touch;
}


/*
 * Code inside a code block
 */

.blog-post__content pre code {
    display: block;

    padding: 0;

    border: 0;
    border-radius: 0;

    background: transparent;

    color: inherit;

    font: inherit;
}


/*
 * Scrollbar
 */

.blog-post__content pre::-webkit-scrollbar {
    height: 8px;
}

.blog-post__content pre::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, .05);
}

.blog-post__content pre::-webkit-scrollbar-thumb {
    border-radius: 999px;

    background: rgba(217, 160, 208, .35);
}

.blog-post__content pre::-webkit-scrollbar-thumb:hover {
    background: rgba(217, 160, 208, .55);
}


/*
 * ------------------------------------------------------
 * Keyboard input
 * ------------------------------------------------------
 */

.blog-post__content kbd {
    display: inline-block;

    padding: .15em .4em;

    border: 1px solid var(--colour-border);
    border-bottom-width: 2px;
    border-radius: 5px;

    background: var(--colour-surface);

    color: var(--colour-heading);

    font-family:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        Menlo,
        monospace;

    font-size: .85em;
}



/* ======================================================
   Blog Category Archive
====================================================== */

/*
 * ------------------------------------------------------
 * Category Hero
 * ------------------------------------------------------
 */

.blog-category-hero {
    padding-block: clamp(4rem, 8vw, 7rem);

    background:
        linear-gradient(
            135deg,
            var(--colour-brand) 0%,
            var(--colour-brand-light) 100%
        );

    color: #ffffff;
}


.blog-category-hero__content {
    width: min(100%, 900px);
}


.blog-category-hero__eyebrow {
    margin-bottom: var(--space-4);

    color: #D9A0D0;

    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .12em;
    line-height: 1.4;
    text-transform: uppercase;
}


.blog-category-hero__title {
    margin: 0;

    color: #ffffff;

    font-size: clamp(
        2.75rem,
        6vw,
        4.5rem
    );
}


.blog-category-hero__description {
    max-width: 800px;

    margin-top: var(--space-5);

    color: rgba(255, 255, 255, .82);

    font-size: 1.1rem;
}


/*
 * ------------------------------------------------------
 * Article section
 * ------------------------------------------------------
 */

.blog-category-articles {
    padding-block: clamp(4rem, 8vw, 7rem);
}


.blog-category-articles__header {
    margin-bottom: var(--space-7);
}


.blog-category-articles__eyebrow {
    margin-bottom: var(--space-3);

    color: var(--colour-accent);

    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}


.blog-category-articles__header h2 {
    margin: 0;
}


/*
 * ------------------------------------------------------
 * Article grid
 * ------------------------------------------------------
 */

.blog-category-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: var(--space-6);
}


/*
 * ------------------------------------------------------
 * Article card
 * ------------------------------------------------------
 */

.blog-card {
    display: flex;
    flex-direction: column;

    overflow: hidden;

    border: 1px solid var(--colour-border);
    border-radius: var(--radius-large);

    background: var(--colour-background);

    box-shadow: var(--shadow-sm);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}


.blog-card:hover {
    transform: translateY(-4px);

    box-shadow: var(--shadow);
}


/*
 * Image
 */

.blog-card__image {
    display: block;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    background: var(--colour-surface);
}


.blog-card__image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .3s ease;
}


.blog-card:hover .blog-card__image img {
    transform: scale(1.03);
}


/*
 * Card without an image
 *
 * Keeps the card visually balanced if an older
 * article doesn't have a featured image.
 */

.blog-card:not(:has(.blog-card__image)) {
    padding-top: var(--space-5);
}


/*
 * Body
 */

.blog-card__body {
    display: flex;
    flex-direction: column;

    flex: 1;

    padding: var(--space-5);
}


/*
 * Category
 */

.blog-card__category {
    margin-bottom: .35rem;

    color: var(--colour-accent);

    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}


/*
 * Date
 */

.blog-card__date {
    margin-bottom: var(--space-3);

    color: var(--colour-text);

    font-size: .85rem;
}


/*
 * Title
 */

.blog-card__title {
    margin-bottom: var(--space-3);

    font-size: 1.45rem;
    line-height: 1.25;
}


.blog-card__title a {
    color: var(--colour-heading);
}


.blog-card__title a:hover {
    color: var(--colour-link-hover);
}


/*
 * Excerpt
 */

.blog-card__excerpt {
    margin-bottom: var(--space-5);

    color: var(--colour-text);

    font-size: .95rem;
    line-height: 1.6;
}


/*
 * Read article link
 */

.blog-card__link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;

    margin-top: auto;

    color: var(--colour-link);

    font-size: .9rem;
    font-weight: 700;
}


.blog-card__link span {
    transition:
        transform .2s ease;
}


.blog-card:hover .blog-card__link span {
    transform: translateX(4px);
}


/* ======================================================
   Blog Pagination
====================================================== */

.blog-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;

    margin-top: var(--space-8);
}


.blog-pagination .page-numbers {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 44px;
    min-height: 44px;

    padding: .5rem .85rem;

    border: 1px solid var(--colour-border);
    border-radius: var(--radius);

    background: var(--colour-background);

    color: var(--colour-heading);

    font-size: .9rem;
    font-weight: 600;

    text-decoration: none;
}


.blog-pagination .page-numbers:hover {
    border-color: var(--colour-accent);

    background: var(--colour-background);

    color: var(--colour-link-hover);
}


.blog-pagination .page-numbers.current {
    border-color: var(--colour-accent);

    background: var(--colour-accent);

    color: #FFFFFF;
}


/*
 * Previous / Next
 */

.blog-pagination .page-numbers.prev,
.blog-pagination .page-numbers.next {
    padding-inline: 1rem;
}


/*
 * ------------------------------------------------------
 * Empty category
 * ------------------------------------------------------
 */

.blog-category-empty {
    padding: var(--space-8);

    border: 1px solid var(--colour-border);
    border-radius: var(--radius-large);

    background: var(--colour-surface);

    text-align: center;
}


.blog-category-empty h2 {
    margin-bottom: var(--space-3);
}


.blog-category-empty p {
    margin-bottom: var(--space-5);
}




/* ======================================================
   Blog Pagination - Active Page
====================================================== */

.blog-pagination .page-numbers.current {
    background: var(--colour-accent);
    border-color: var(--colour-accent);
    color: #FFFFFF;
}




/* ======================================================
   Blog Home
====================================================== */


/*
 * ------------------------------------------------------
 * Blog Hero
 * ------------------------------------------------------
 */

.blog-home-hero {
    padding-block: clamp(4rem, 8vw, 7rem);

    background:
        linear-gradient(
            135deg,
            var(--colour-brand) 0%,
            var(--colour-brand-light) 100%
        );

    color: #ffffff;
}


.blog-home-hero__content {
    width: min(100%, 900px);
}


.blog-home-hero__eyebrow {
    margin-bottom: var(--space-4);

    color: #D9A0D0;

    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .12em;
    line-height: 1.4;
    text-transform: uppercase;
}


.blog-home-hero__title {
    max-width: 900px;

    margin: 0;

    color: #ffffff;

    font-size: clamp(
        2.75rem,
        6vw,
        4.5rem
    );

    line-height: 1.08;
}


.blog-home-hero__description {
    max-width: 760px;

    margin-top: var(--space-5);

    color: rgba(255, 255, 255, .82);

    font-size: 1.1rem;
}


/*
 * ------------------------------------------------------
 * Categories
 * ------------------------------------------------------
 */

.blog-home-categories {
    padding-block: var(--space-5);

    border-bottom: 1px solid var(--colour-border);

    background: var(--colour-surface);
}


.blog-home-categories__nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
}


.blog-home-categories__label {
    margin-right: .5rem;

    color: var(--colour-heading);

    font-size: .85rem;
    font-weight: 700;
}


.blog-home-categories__link {
    display: inline-flex;
    align-items: center;

    padding: .45rem .8rem;

    border: 1px solid var(--colour-border);
    border-radius: 999px;

    background: var(--colour-background);

    color: var(--colour-heading);

    font-size: .85rem;
    font-weight: 600;

    transition:
        border-color .2s ease,
        color .2s ease,
        background-color .2s ease;
}


.blog-home-categories__link:hover {
    border-color: var(--colour-accent);

    background: var(--colour-background);

    color: var(--colour-accent);
}


/*
 * ------------------------------------------------------
 * Section headings
 * ------------------------------------------------------
 */

.blog-home-section-heading {
    margin-bottom: var(--space-6);
}


.blog-home-section-heading__eyebrow {
    margin-bottom: var(--space-3);

    color: var(--colour-accent);

    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}


.blog-home-section-heading h2 {
    margin: 0;
}


/*
 * ------------------------------------------------------
 * Featured article
 * ------------------------------------------------------
 */

.blog-home-featured {
    padding-block: clamp(4rem, 8vw, 7rem);
}


.blog-featured {
    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(0, .85fr);

    overflow: hidden;

    border: 1px solid var(--colour-border);
    border-radius: var(--radius-large);

    background: var(--colour-surface);

    box-shadow: var(--shadow);
}


.blog-featured__image {
    display: block;

    min-height: 420px;

    overflow: hidden;

    background: var(--colour-brand);
}


.blog-featured__image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .3s ease;
}


.blog-featured:hover .blog-featured__image img {
    transform: scale(1.03);
}


.blog-featured__content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: clamp(
        2rem,
        5vw,
        4rem
    );
}


.blog-featured__category {
    margin-bottom: .35rem;

    color: var(--colour-accent);

    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}


.blog-featured__date {
    margin-bottom: var(--space-4);

    color: var(--colour-text);

    font-size: .85rem;
}


.blog-featured__title {
    margin-bottom: var(--space-4);

    font-size: clamp(
        1.8rem,
        3vw,
        2.7rem
    );

    line-height: 1.2;
}


.blog-featured__title a {
    color: var(--colour-heading);
}


.blog-featured__title a:hover {
    color: var(--colour-link-hover);
}


.blog-featured__excerpt {
    margin-bottom: var(--space-6);

    color: var(--colour-text);

    line-height: 1.65;
}


.blog-featured__link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;

    align-self: flex-start;

    color: var(--colour-link);

    font-weight: 700;
}


.blog-featured__link span {
    transition:
        transform .2s ease;
}


.blog-featured__link:hover span {
    transform: translateX(4px);
}


/*
 * ------------------------------------------------------
 * Latest articles
 * ------------------------------------------------------
 */

.blog-home-latest {
    padding-block: clamp(4rem, 8vw, 7rem);

    background: var(--colour-surface);
}


.blog-home-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: var(--space-6);
}


/*
 * ------------------------------------------------------
 * Blog cards
 * ------------------------------------------------------
 */

.blog-card {
    display: flex;
    flex-direction: column;

    overflow: hidden;

    border: 1px solid var(--colour-border);
    border-radius: var(--radius-large);

    background: var(--colour-background);

    box-shadow: var(--shadow-sm);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}


.blog-card:hover {
    transform: translateY(-4px);

    box-shadow: var(--shadow);
}


.blog-card__image {
    display: block;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    background: var(--colour-surface);
}


.blog-card__image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .3s ease;
}


.blog-card:hover .blog-card__image img {
    transform: scale(1.03);
}


.blog-card__body {
    display: flex;
    flex-direction: column;

    flex: 1;

    padding: var(--space-5);
}


.blog-card__category {
    margin-bottom: .35rem;

    color: var(--colour-accent);

    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}


.blog-card__date {
    margin-bottom: var(--space-3);

    color: var(--colour-text);

    font-size: .85rem;
}


.blog-card__title {
    margin-bottom: var(--space-3);

    font-size: 1.45rem;
    line-height: 1.25;
}


.blog-card__title a {
    color: var(--colour-heading);
}


.blog-card__title a:hover {
    color: var(--colour-link-hover);
}


.blog-card__excerpt {
    margin-bottom: var(--space-5);

    color: var(--colour-text);

    font-size: .95rem;
    line-height: 1.6;
}


.blog-card__link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;

    margin-top: auto;

    color: var(--colour-link);

    font-size: .9rem;
    font-weight: 700;
}


.blog-card__link span {
    transition:
        transform .2s ease;
}


.blog-card:hover .blog-card__link span {
    transform: translateX(4px);
}


/*
 * ------------------------------------------------------
 * Pagination
 * ------------------------------------------------------
 */

.blog-pagination {
    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: .5rem;

    margin-top: var(--space-8);
}


.blog-pagination .page-numbers {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 44px;
    min-height: 44px;

    padding: .5rem .85rem;

    border: 1px solid var(--colour-border);
    border-radius: var(--radius);

    background: var(--colour-background);

    color: var(--colour-heading);

    font-size: .9rem;
    font-weight: 600;

    text-decoration: none;
}


.blog-pagination .page-numbers:hover {
    border-color: var(--colour-accent);

    color: var(--colour-link-hover);
}


.blog-pagination .page-numbers.current {
    border-color: var(--colour-accent);

    background: var(--colour-accent);

    color: #FFFFFF;
}


/*
 * ------------------------------------------------------
 * Empty state
 * ------------------------------------------------------
 */

.blog-home-empty {
    padding: var(--space-8);

    border: 1px solid var(--colour-border);
    border-radius: var(--radius-large);

    background: var(--colour-background);

    text-align: center;
}


/*
 * ------------------------------------------------------
 * CTA
 * ------------------------------------------------------
 */

.blog-home-cta {
    padding-block: clamp(
        4rem,
        8vw,
        6rem
    );

    background:
        linear-gradient(
            135deg,
            var(--colour-brand) 0%,
            var(--colour-brand-light) 100%
        );

    color: #FFFFFF;
}


.blog-home-cta__inner {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: var(--space-7);
}


.blog-home-cta__eyebrow {
    margin-bottom: var(--space-3);

    color: #D9A0D0;

    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}


.blog-home-cta h2 {
    margin-bottom: var(--space-3);

    color: #FFFFFF;
}


.blog-home-cta p {
    max-width: 650px;

    margin: 0;

    color: rgba(255, 255, 255, .78);
}

.blog-post__content p a:not(.button),
.blog-post__content li a:not(.button),
.blog-post__content blockquote a:not(.button) {
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}