@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

html {
    font-size: 100%;
}

:root {
    --bgColor: #fff;
    --textColor: #232333;
    --textInvertedColor: #fff;
    --maincolor: #f25a73;
    --darkMaincolor: #ffb254;
    --hovercolor: var(--maincolor);
    --bordercl: #ffb6c1;
    --draftColor: var(--maincolor);
    --draftBg: #f9f2f4;
}

body {
    font-size: 16px;
}

video {
    width: 100%;
}

img {
    border: none;
}

p {
    font-size: 1rem;
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    line-height: unset;
}

strong {
    font-weight: 600;
}

blockquote {
    border-color: rgb(0 0 0 / 0.5);
    background-color: rgb(0 0 0 / 0.05);
    color: inherit;
    padding: 1px 16px;
}

code {
    font-weight: bold;
    padding: 0px 4px;
    border-radius: 2px;

    &::before {
        display: none;
    }
}

pre code {
    font-weight: normal;
}

figcaption {
    text-align: center;
}

iframe {
    display: block;
    width: 100%;
    border-radius: 4px;
    border: none;
}

section.list-item .description a {
    pointer-events: none;
    border: none;
}

.draft-label {
    color: var(--draftColor);
    background-color: var(--draftBg);
}

footer {
    flex-wrap: wrap;
}

footer > div:not(:last-child)::after {
    content: "|";
    margin-inline: 0.5rem;
}

.social-links {
    display: flex;
}

.soc {
    display: inline-flex;
    position: relative;
    top: 2px;
}

.display-center {
    display: flex;
    justify-content: center;
}

.padding-s {
    padding: 8px;
}

.padding-none {
    padding: 0;
}

.margin-top-base {
    margin-top: 16px;
}

/* --- Open External Button --- */

.open-external {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: none;
    color: rgb(0 0 0 / 1);
    cursor: pointer;
    transition:
        background-color 0.15s ease,
        color 0.15s ease;

    &:hover {
        background-color: rgb(0 0 0 / 0.08);
        color: rgb(0 0 0 / 1);
        border: none;
    }

    svg {
        width: 18px;
        height: 18px;
        max-height: 18px;
    }
}

.demo:has(iframe) .open-external {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1;
}

/* --- Demo --- */

.demo {
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    margin: 24px 0;
}

.demo::before {
    content: "DEMO";
    background-color: var(--maincolor);
    color: var(--textInvertedColor);
    padding: 4px 8px;
    font-size: 0.6em;
    font-weight: 600;
    letter-spacing: 2px;
    line-height: 1.45;
    position: absolute;
    top: 0;
    left: 16px;
    transform: translateY(-50%);
}

/* --- Dark Theme --- */

@media screen and (prefers-color-scheme: dark) {
    :root {
        --textInvertedColor: #232333;
        --bordercl: #555;
        --maincolor: var(--darkMaincolor);
        --draftBg: #4c3315;
        --textColor: #fff;
    }

    ::selection {
        color: var(--textColor);
        background-color: var(--darkMaincolor);
    }

    code {
        color: #232323;
        background-color: rgb(255 255 255 / 0.8);
    }

    blockquote {
        border-color: rgb(255 255 255 / 0.5);
        background-color: rgb(255 255 255 / 0.05);
    }

    .demo {
        border-color: rgba(255, 255, 255, 0.1);
    }

    .open-external {
        color: rgb(255 255 255 / 0.7);

        &:hover {
            background-color: rgb(255 255 255 / 0.08);
            color: rgb(255 255 255 / 1);
        }
    }
}