@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);
}
}
}
