@import url("https://fonts.googleapis.com/css?family=Russo+One&display=swap&subset=latin-ext");

@supports(display: grid) {
    :root {
        /* ===S-CSS-P INTEGRATION=== */
        /* If you're making a new CSS theme, please include the following three variables at minimum. */
        --theme-base: "black-highlighter";
        /* must be either "black-highlighter" or "sigma9" */
        --theme-id: "neo-linkage";
        /* set this to the URL of your theme's page - eg for "component:ar-theme", set it to "ar-theme" */
        --theme-name: "Neo linkAge Theme";
        /* set this to your theme's full name */

        /* ===HEADER ELEMENTS=== */
        --logo-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 300 300%22%3E%3Cdefs/%3E%3ClinearGradient id=%22a%22 x1=%22259.878%22 x2=%22149.525%22 y1=%22123.173%22 y2=%2219.76%22 gradientTransform=%22matrix(1 0 0 -1 0 300)%22 gradientUnits=%22userSpaceOnUse%22%3E%3Cstop offset=%220%22 stop-color=%22%23c9171e%22/%3E%3Cstop offset=%221%22 stop-color=%22%23451214%22/%3E%3C/linearGradient%3E%3Cpath fill=%22url(%23a)%22 d=%22M170.2 266.6l-21.9 12.6-16.2-9.3-18 10.5 34.2 19.6 40-23.1z%22/%3E%3ClinearGradient id=%22b%22 x1=%22243.746%22 x2=%22133.393%22 y1=%22196.793%22 y2=%2293.38%22 gradientTransform=%22matrix(1 0 0 -1 0 300)%22 gradientUnits=%22userSpaceOnUse%22%3E%3Cstop offset=%220%22 stop-color=%22%23c9171e%22/%3E%3Cstop offset=%221%22 stop-color=%22%23451214%22/%3E%3C/linearGradient%3E%3Cpath fill=%22url(%23b)%22 d=%22M225.4 91.3l21.9 12.7v18.6l18.1 10.3V93.5l-40-23.1z%22/%3E%3ClinearGradient id=%22c%22 x1=%22130.414%22 x2=%2220.061%22 y1=%22273.926%22 y2=%22170.513%22 gradientTransform=%22matrix(1 0 0 -1 0 300)%22 gradientUnits=%22userSpaceOnUse%22%3E%3Cstop offset=%220%22 stop-color=%22%23c9171e%22/%3E%3Cstop offset=%221%22 stop-color=%22%23451214%22/%3E%3C/linearGradient%3E%3Cpath fill=%22url(%23c)%22 d=%22M47.1 130.6v-25.3l16.1-9.4V75.1L29 94.8v46.1z%22/%3E%3Cg%3E%3ClinearGradient id=%22d%22 x1=%22227.725%22 x2=%2274.512%22 y1=%22230.841%22 y2=%2287.264%22 gradientTransform=%22matrix(1 0 0 -1 0 300)%22 gradientUnits=%22userSpaceOnUse%22%3E%3Cstop offset=%220%22 stop-color=%22%23c9171e%22/%3E%3Cstop offset=%221%22 stop-color=%22%23451214%22/%3E%3C/linearGradient%3E%3Cpath fill=%22url(%23d)%22 d=%22M81.9 290.1L8.9 248v-84.3l53-30.6 27.8 16-53 30.6v52.2L81.9 258l45.3-26.1v-45l27.7-16.1V248z%22/%3E%3C/g%3E%3Cg%3E%3ClinearGradient id=%22e%22 x1=%22190.284%22 x2=%2237.07%22 y1=%22270.795%22 y2=%22127.218%22 gradientTransform=%22matrix(1 0 0 -1 0 300)%22 gradientUnits=%22userSpaceOnUse%22%3E%3Cstop offset=%220%22 stop-color=%22%23c9171e%22/%3E%3Cstop offset=%221%22 stop-color=%22%23451214%22/%3E%3C/linearGradient%3E%3Cpath fill=%22url(%23e)%22 d=%22M70.9 42.2l73-42.2 72.9 42.2v61L189 119.3V58.2L143.9 32 98.6 58.2v52.2l39 22.5V165l-66.7-38.5z%22/%3E%3C/g%3E%3Cg%3E%3ClinearGradient id=%22f%22 x1=%22288.416%22 x2=%22135.203%22 y1=%22166.077%22 y2=%2222.5%22 gradientTransform=%22matrix(1 0 0 -1 0 300)%22 gradientUnits=%22userSpaceOnUse%22%3E%3Cstop offset=%220%22 stop-color=%22%23c9171e%22/%3E%3Cstop offset=%221%22 stop-color=%22%23451214%22/%3E%3C/linearGradient%3E%3Cpath fill=%22url(%23f)%22 d=%22M291.1 156.6v84.3l-73 42.1-52.9-30.6v-32l52.9 30.5 45.2-26.1v-52.2l-45.2-26.1-38.9 22.5-27.9-16.1 66.8-38.5z%22/%3E%3C/g%3E%3C/svg%3E");
        --header-title: "linkAge";
        --header-subtitle: "Find Your Dream, Find Yourself.";

        /* ===TYPEFACES=== */
        --header-font: 'Russo One', Inter, 'Poppins', sans-serif;

        /* ===STANDARD THEME COLORS=== */
        --light-gray-monochrome: 125, 125, 125;
        --pale-accent: 201, 23, 30;
        --bright-accent: 90, 121, 186;
        --medium-accent: 30, 80, 162;
        --dark-accent: 23, 24, 75;

        /* ===HEADER GRADIENT=== */
        --header-gradient-color-bottom: 16, 16, 16;
        --header-gradient-color-middle: var(--dark-accent);
        --header-gradient-color-top: var(--dark-accent);

        /* ===TOPBAR GRADIENT=== */
        --swatch-topmenu-bg-color: var(--light-gray-monochrome);

        /* ===LINK COLORS=== */
        --link-color: var(--bright-accent);
        --visited-link-color: 103, 69, 152;
        --hover-link-color: 103, 69, 152;

        /* ===HEADER MEASUREMENTS=== */
        --header-height-on-desktop: 10rem;
        --header-height-on-mobile: 10rem;
    }

    :root:lang(cn) {
        /* ===HEADER ELEMENTS=== */
        --header-title: "linkAge";
        --header-subtitle: "Find Your Dream, Find Yourself.";

        /* ===TYPEFACES=== */
        --header-font: 'Russo One', Inter, 'Poppins', "Noto Sans SC", sans-serif;
    }

    /* ===HEADER ELEMENTS=== */

    #header {
        /* ===SEARCH ELEMENT=== */
        --search-icon-focus-bg-color: var(--pale-accent);
        --search-focus-outline-color: var(--pale-accent);

        /* ===LOGIN BOX ELEMENT=== */
        --login-dropdown-bg-hover-color: var(--pale-accent);

        background-position: center 0.75rem;
        background-size: auto -webkit-calc(var(--header-height-on-desktop) - 1rem);
        background-size: auto -moz-calc(var(--header-height-on-desktop) - 1rem);
        background-size: auto calc(var(--header-height-on-desktop) - 1rem);
    }

    #header h1,
    #header h2 {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -moz-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        max-height: var(--header-height-on-desktop);
        overflow: hidden;
    }

    #header h1 a,
    #header h2 span {
        margin: 0;
        padding: 0;
    }

    #header h1 a {
        line-height: 1;
    }

    #header h2 span {
        line-height: 0;
    }

    #header h1 a::before,
    #header h2 span::before {
        white-space: nowrap;
    }

    #header h1 a::before {
        font-size: 5.25rem;
        font-weight: 400;
        text-shadow: none;
    }

    #header h2 span::before {
        display: block;
        color: transparent;
        text-align: center;
        font-size: 1.25rem;
        text-shadow: none;
    }

    @supports((-webkit-background-clip: text) or (background-clip: text)) {
        #header h1 a::before {
            background-image: -webkit-linear-gradient(to bottom, rgba(var(--swatch-headerh1-color), 1) -webkit-calc(50% - 0.875rem), rgba(var(--swatch-headerh1-color), 0) -webkit-calc(50% - 0.875rem), rgba(var(--swatch-headerh1-color), 0) -webkit-calc(50% + 0.875rem), rgba(var(--swatch-headerh1-color), 1) -webkit-calc(50% + 0.875rem));
            background-image: -moz-linear-gradient(to bottom, rgba(var(--swatch-headerh1-color), 1) -moz-calc(50% - 0.875rem), rgba(var(--swatch-headerh1-color), 0) -moz-calc(50% - 0.875rem), rgba(var(--swatch-headerh1-color), 0) -moz-calc(50% + 0.875rem), rgba(var(--swatch-headerh1-color), 1) -moz-calc(50% + 0.875rem));
            background-image: linear-gradient(to bottom, rgba(var(--swatch-headerh1-color), 1) calc(50% - 0.875rem), rgba(var(--swatch-headerh1-color), 0) calc(50% - 0.875rem), rgba(var(--swatch-headerh1-color), 0) calc(50% + 0.875rem), rgba(var(--swatch-headerh1-color), 1) calc(50% + 0.875rem));
            background-size: cover;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        #header h2 span::before {
            color: rgb(252, 252, 252);
            color: rgb(var(--swatch-headerh2-color));
        }
    }

    /* ===TOPBAR ELEMENTS=== */

    #top-bar {
        /* ===TOPBAR CATEGORIES=== */
        --topmenu-hover-border-color: var(--pale-accent);

        /* ===DROPDOWN MENU=== */
        --dropdown-bg-color: var(--swatch-tertiary-color), 0.9;
        --dropdown-links-hover-bg-color: var(--pale-accent);
    }

    #header div[class*="top-bar"] > ul > li > ul li:hover,
    #header div[class*="top-bar"] > ul > li > ul li:active,
    #header div[class*="top-bar"] > ul > li > ul li:focus-within {
        background-color: rgba(var(--dropdown-links-hover-bg-color), 0.05);
    }

    /* ===SIDE-BAR ELEMENTS=== */

    #side-bar {
        /* ===SOCIAL MEDIA ICONS=== */
        --social-icon-hover-color: var(--pale-accent);

        /* ===MENU-ITEMS=== */
        --sidebar-subtest-color: var(--pale-accent);
        --sidebar-links-hover-bg-color: var(--pale-accent);
    }

    #side-bar div.menu-item {
        --sidebar-links-hover-bg-color: var(--pale-accent);
    }

    /* ===Ayers' Info Bar=== */

    .info-container {
        --barColour: rgb(var(--dark-accent));
    }

    /* ===MOBILE FORMATTING=== */

    @media only screen and (max-width: 56.25rem) {
        #header {
            background-position: -webkit-calc((var(--header-height-on-mobile) - 2.75rem) - var(--size)) -webkit-calc(((var(--size) * -1) + var(--header-height-on-mobile) + var(--y-offset)) / 2);
            background-position: -moz-calc((var(--header-height-on-mobile) - 2.75rem) - var(--size)) -moz-calc(((var(--size) * -1) + var(--header-height-on-mobile) + var(--y-offset)) / 2);
            background-position: calc((var(--header-height-on-mobile) - 2.75rem) - var(--size)) calc(((var(--size) * -1) + var(--header-height-on-mobile) + var(--y-offset)) / 2);
            background-size: var(--size), 100% var(--header-height-on-mobile);
        }
    }
}

:root {
    --pale-accent: 201, 23, 30;
    --bright-accent: 90, 121, 186;
    --medium-accent: 30, 80, 162;
    --dark-accent: 23, 24, 75;
}
.side-block {
    --sidebar-links-hover-bg-color: var(--pale-accent);
}
.side-block div.menu-item {
    --sidebar-links-hover-bg-color: var(--pale-accent);
}