Div Code Block
body {
background-color: rgb(var(—swatch-background));
background-image: url(http://www.nuttest.club/local--files/members:woedstyle-2p0/whitenoise.png);
background-blend-mode: multiply;
background-repeat: repeat;
background-size: 31.250rem 31.250rem;
}
div#container-wrap {
background-image:
repeating-linear-gradient(
315deg,
hsla(0, 0%, 100%, 0),
hsla(0, 0%, 100%, 0) 0.25vh,
rgba(88, 88, 88, 0.1) 0.35vh,
rgba(88, 88, 88, 0.2) 0.5vh
);
background-size: 100% 100%;
background-repeat: repeat;
}
Regular Code Block
body { background-color: rgb(var(--swatch-background)); background-blend-mode: multiply; background-repeat: repeat; background-size: 31.250rem 31.250rem; } div#container-wrap { background-image: repeating-linear-gradient( 315deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0) 0.25vh, rgba(88, 88, 88, 0.1) 0.35vh, rgba(88, 88, 88, 0.2) 0.5vh ); background-size: 100% 100%; background-repeat: repeat; }
This here is a blockquote
This is a regular blockquote inside this blockquote div!
Bold Text Right Here
Italics Text Right Here
Bold Italics Text Right here
Underlined Text Right here
Title H1
Title H2
Title H3
Title H4
Title H5
Title H6
- Tabulator
- Tabulation
- Long Tab
- This empty tab has a really long name for some odd reason. I wonder why? It is very strange.
- Empty Tab
- Empty Tab
- Empty Tab
- Empty Tab
- Empty Tab
This is a tab view.
Hey look, more text here.
How quaint.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a | table |
---|---|
You should know | how to make these |
already |
:root { /* header measurements */ --header-height-on-desktop: 10rem; --header-height-on-mobile: 10rem; --header-h1-font-size: clamp(2rem, 5vw, 2.8125rem); --header-h2-font-size: clamp(0.875rem, 3vw, 0.9375rem); --logo-image: url("https://nu-scptheme.github.io/Black-Highlighter/img/logo.svg"); } #header { --search-textbox-text-color: var(--swatch-secondary-color); background: none; } #header::before { content: " "; position: absolute; width: 100%; height: 100%; left: 0; top: 0.75rem; background-image: var(--logo-image); background-repeat: no-repeat; background-position: center 0; background-size: auto calc(var(--header-height-on-desktop) - 1.5rem); opacity: 0.8; pointer-events: none; } #header h1, #header h2 { margin: 0; padding: 0; width: 100%; height: var(--header-height-on-desktop); display: flex; align-items: center; justify-content: center; display: flex; align-items: center; justify-content: center; } #header h1 a, #header h1 a::before, #header h2 span, #header h2 span::before { margin: 0; padding: 0; z-index: 0; display: block; text-align: center; } #header h1 { z-index: 1; } #header h1 a::before, #header h1 a::after { content: var(--header-title); } #header h1 a::before { color: rgb(var(--swatch-text-tertiary-color)); z-index: -1; -webkit-text-stroke: 0.325rem rgb(var(--swatch-text-dark)); } #header h1 a::after { color: rgb(var(--swatch-headerh1-color)); z-index: 1; } #header h2 { z-index: 0; text-transform: uppercase; pointer-events: none; } #header h2 span { margin-top: calc(var(--header-height-on-mobile)/2 + var(--header-h1-font-size)/2 - 2em); } #header h2 span::before, #header h2 span::after { --wght: 600; content: var(--header-subtitle); position: absolute; left: 50%; transform: translateY(-50%) translateX(-50%); width: 100%; text-align: center; } #header h2 span::before { -webkit-text-stroke: 0.25rem rgb(var(--swatch-text-dark)); } #header h2 span::after { color: rgb(var(--swatch-headerh2-color)); z-index: 1; } #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] { color: rgba(0, 0, 0, 0); } @media (min-width: 36rem) { #login-status { flex-grow: 1; left: 3%; right: initial; } #login-status::before { --mask-image: none; background-color: transparent; } #login-status:not(:focus-within) { color: rgb(var(--login-line-divider-color)); -webkit-user-select: initial; -moz-user-select: initial; -ms-user-select: initial; user-select: initial; } #login-status #account-topbutton, #login-status:not(:focus-within) #account-topbutton { --clip-path: polygon( 0 0, 100% 0, 100% 100%, 0 100% ); background-color: rgba(var(--login-arrow-color), 0); } #login-status #account-topbutton::before{ --clip-path: polygon( 30% 35%, 70% 35%, 50% 60%, 50% 60% ); --mask-image: initial; content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(var(--login-arrow-color), 1); -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); } #login-status #account-topbutton::before, #login-status:not(:focus-within) #account-topbutton::before, #login-status:not(:focus-within) #account-topbutton:hover::before { --clip-path: polygon( 30% 35%, 70% 35%, 50% 60%, 50% 60% ); --mask-image: initial; } #login-status:not(:focus-within) #account-topbutton::after { display: none; } #login-status:not(:focus-within) *:not(#account-topbutton):not([href*="account/messages"]) { --clip-path: polygon( 0 0, 100% 0, 100% 100%, 0 100% ); pointer-events: all; -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); } #login-status:not(:focus-within) *:not(#account-topbutton):not(#account-options):not([href*="account/messages"]) { opacity: 1; } #login-status #my-account { --wght: 300; } #account-options { background: var(--gradient-header); } #search-top-box { top: 1.5em; right: 3%; background: rgba(var(--search-focus-textbox-bg-color), 0.4); } #search-top-box:focus-within ~ #login-status { opacity: 1; } #search-top-box::after { transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1); transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1); transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1); } #search-top-box:not(:focus-within)::after { --clip-path: polygon( 0 0, 100% 0, 100% 100%, 0% 100% ); background-color: rgba(var(--search-icon-bg-color, --dark-accent), 1); -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); } #search-top-box:not(:focus-within):hover::after { --clip-path: polygon( 0 0, 100% 0, 100% 100%, 0 100% ); background-color: rgb(var(--search-icon-hover-bg-color)); } #search-top-box form[id="search-top-box-form"]:not(:focus-within) { max-width: var(--search-width); } #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] { max-width: var(--search-width); padding: 0 var(--search-height) 0 1em; outline-width: 0; background-color: rgb(var(--search-focus-textbox-bg-color), 0.35); color: rgba(var(--search-textbox-text-color), 0.4); cursor: pointer; } #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="submit"], #search-top-box form[id="search-top-box-form"]:focus-within input[type="submit"] { pointer-events: all; border: none; } } #page-title::after, .meta-title::after, #page-title::before, .meta-title::before { content: ""; flex-grow: 1; height: 0.0625rem; background: rgb(var(--swatch-primary)); } #page-title::before, .meta-title::before { margin: auto 1.25rem auto auto; }
@import url("https://use.typekit.net/gmf8lgq.css"); :root { --theme-base: "black-highlighter"; --theme-id: "summerbeats"; --theme-name: "Summerbeats Theme"; /* Header */ --logo-image: url("https://scptestwiki.wikidot.com/local--files/theme:summerbeats/scp-vibin.svg"); --header-title: "The Foundationâ„¢"; --header-subtitle: "Just Vibin'."; /* Typefaces */ --body-font: dita,Verdana,Geneva,sans-serif; --header-font: whomp, Brush Script MT, cursive; --title-font: brandon-grotesque,Franklin Gothic Medium,Franklin Gothic,ITC Franklin Gothic,Arial,sans-serif; --mono-font: dico-mono-script,Consolas,monaco,monospace; /* Standard Colors */ --white-monochrome: 225, 225, 205; --pale-gray-monochrome: 205, 200, 180; --light-pale-gray-monochrome: 215, 215, 215; --very-light-gray-monochrome: 154, 154, 154; --light-gray-monochrome: 0, 160, 30; --gray-monochrome: 60, 55, 55; --dark-gray-monochrome: 40, 40, 35; --black-monochrome: 0, 0, 0 ; --pale-accent: 235, 130, 165; --bright-accent: 225, 0, 25; --medium-accent: 0, 115, 170; --medium-dark-accent: 160, 25, 55; --green-accent: var(--light-gray-monochrome); --dark-accent: 0, 25, 55; --alt-accent: 225, 180, 0; /* Background and Header Colors */ --background-gradient-color: var(--dark-accent); /* Primary Theme Colors */ --swatch-background: var(--medium-accent); /* Primary Text Colors */ --swatch-text-general: var(--swatch-text-light); --swatch-important-text: var(--alt-accent); /* Primary Menu Colors */ --swatch-menubg-color: var(--dark-accent); --swatch-menutxt-dark-color: var(--medium-accent); --swatch-menutxt-general-color: var(--swatch-menutxt-light-color); --swatch-menubg-dark-color: var(--medium-dark-accent); --swatch-border-color: var(--dark-accent); /* Colors for Secondary & Tertiary items like Blockquote and YUI Tabs */ --swatch-secondary-color: var(--swatch-menubg-dark-color); --swatch-tertiary-color: var(--swatch-menubg-light-color); /* Text Colors for Secondary & Tertiary items like Sidebar Headers and Top-Bar Menu Text */ --swatch-text-secondary-color: var(--swatch-menutxt-dark-color); --swatch-text-tertiary-color: var(--swatch-menutxt-light-color); /* Primary Header Colors */ --swatch-headerh1-color: var(--swatch-primary); --swatch-headerh2-color: var(--swatch-important-text); --swatch-topmenu-border-color: var(--alt-accent); --swatch-topmenu-bg-color: var(--alt-accent); /* Link Colors */ --link-color: var(--pale-accent); --visited-link-color: var(--swatch-primary); --hover-link-color: var(--swatch-primary); --newpage-color: var(--alt-accent); --sidebar-links-text: var(--swatch-menutxt-general-color); /* Rating Module Colors */ --rating-module-button-color: var(--alt-accent); --rating-module-button-plus-color: 0, 200, 0; --rating-module-button-negative-color: 200, 0, 0; --rating-module-button-cancel-color: 200, 200, 200; --rating-module-button-credit-color: 50, 50, 50; --rating-module-text-color: var(--alt-accent); --rating-module-text-hover-color: var(--swatch-menutxt-light-color); /* Header Gradients */ --gradient-header: linear-gradient( to top, rgba(var(--header-gradient-color-bottom),0) 0%, rgba(var(--header-gradient-color-middle),0) 90%, rgba(var(--header-gradient-color-top),0) 100% ); --gradient-topmenu: linear-gradient( to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) var(--header-height-on-desktop), rgba(var(--swatch-topmenu-border-color),1) var(--header-height-on-desktop), rgba(var(--swatch-topmenu-bg-color), 1) calc(var(--header-height-on-desktop) + 0.125rem), rgba(var(--swatch-topmenu-bg-color), 0.95) calc(100% - 0.125rem), rgba(var(--swatch-topmenu-bg-color), 1) calc(100% - 0.125rem), rgba(var(--swatch-topmenu-border-color), 1) 100%); --gradient-topmenu-mobile: linear-gradient( to bottom, rgba(var(--swatch-topmenu-border-color),1) 0, rgba(var(--swatch-topmenu-bg-color), 1) 0.125rem, rgba(var(--swatch-topmenu-bg-color), 1) calc(var(--topbar-height-on-mobile) - 0.125rem), rgba(var(--swatch-topmenu-bg-color), 1) calc(var(--topbar-height-on-mobile) - 0.125rem), rgba(var(--swatch-topmenu-border-color),1) var(--topbar-height-on-mobile)); --diagonal-stripes: initial; --gradient-sidemenu-header: linear-gradient(10deg, rgba(var(--swatch-primary-darker), 0.45) 0%, rgba(var(--swatch-primary-darker), 0.55) 100% ); --background-gradient-distance: 100rem; /* header measurements */ --header-height-on-desktop: 15rem; --header-height-on-mobile: 15rem; } body { background-image: var(--gradient-background); background-size: 100% var(--background-gradient-distance); } /* Link Styling */ #page-content div.code a, #page-content div.blockquote a, #page-content blockquote a, #page-content div.code a:visited, #page-content div.blockquote a:visited, #page-content blockquote a:visited { color: rgb(var(--dark-accent)); } #page-content div:not([id*="wiki-tabview"]) a, #login-status a:not([href="javascript:;"]), #page-content span > a { padding: 0 0; margin: 0 0; background-image: linear-gradient(105deg, transparent 0%, transparent 1em, rgb(var(--bright-accent)) 1em, rgb(var(--bright-accent)) calc((100% - 1em) / 6), rgb(var(--pale-accent)) calc(((100% - 1em) / 6) + 0.0625rem), rgb(var(--pale-accent)) calc(((100% - 1em) / 6) * 2), rgb(var(--medium-accent)) calc((((100% - 1em) / 6) * 2) + 0.0625rem), rgb(var(--medium-accent)) calc(((100% - 1em) / 6) * 3), rgb(var(--bright-accent)) calc((((100% - 1em) / 6) * 3) + 0.0625rem), rgb(var(--bright-accent)) calc(((100% - 1em) / 6) * 4), rgb(var(--pale-accent)) calc((((100% - 1em) / 6) * 4) + 0.0625rem), rgb(var(--pale-accent)) calc(((100% - 1em) / 6) * 5), rgb(var(--medium-accent)) calc((((100% - 1em) / 6) *5 ) + 0.0625rem), rgb(var(--medium-accent)) calc(100% - 1em), transparent calc(100% - 1em), transparent 100%); background-position: 0 0; background-size: 0% 100vh; background-repeat: no-repeat; background-clip: padding-box; background-attachment: local; background-color: rgba(0,0,0,0); box-decoration-break: clone; text-shadow: rgba(0,0,0,0) 0px 0px 0px; will-change: text-shadow, background-size, padding; transition: margin 100ms cubic-bezier(0.4, 0.0, 0.2, 1), padding 100ms cubic-bezier(0.4, 0.0, 0.2, 1), background-size 300ms cubic-bezier(0.4, 0.0, 0.2, 1), text-shadow 200ms cubic-bezier(0.4, 0.0, 0.2, 1); } #page-content div:not([id*="wiki-tabview"]) a:hover, #page-content div:not([id*="wiki-tabview"]) a:active, #login-status a:not([href="javascript:;"]):hover, #login-status a:not([href="javascript:;"]):active, #page-content span > a:hover, #page-content span > a:active { text-decoration: none; padding: 0.125rem 1em; margin: -0.125rem -1em; background-size: 100% 100%; text-shadow: rgb(var(--alt-accent)) 2px 0px 0px, rgb(var(--alt-accent)) 1.75517px 0.958851px 0px, rgb(var(--alt-accent)) 1.0806px 1.68294px 0px, rgb(var(--alt-accent)) 0.141474px 1.99499px 0px, rgb(var(--alt-accent)) -0.832294px 1.81859px 0px, rgb(var(--alt-accent)) -1.60229px 1.19694px 0px, rgb(var(--alt-accent)) -1.97999px 0.28224px 0px, rgb(var(--alt-accent)) -1.87291px -0.701566px 0px, rgb(var(--alt-accent)) -1.30729px -1.51361px 0px, rgb(var(--alt-accent)) -0.421592px -1.95506px 0px, rgb(var(--alt-accent)) 0.567324px -1.91785px 0px, rgb(var(--alt-accent)) 1.41734px -1.41108px 0px, rgb(var(--alt-accent)) 1.92034px -0.558831px 0px; transition: margin 600ms cubic-bezier(0.4, 0.0, 0.2, 1), padding 600ms cubic-bezier(0.4, 0.0, 0.2, 1), background-size 500ms cubic-bezier(0.4, 0.0, 0.2, 1), text-shadow 400ms cubic-bezier(0.4, 0.0, 0.2, 1); } #page-content div:not([id*="wiki-tabview"]) a:focus-within, #login-status a:not([href="javascript:;"]):focus-within, #page-content span > a:focus-within { text-decoration: none; box-shadow: inset calc(100% / 3) 0 0 0 rgb(var(--bright-accent)), inset calc((100% / 3) * 2) 0 0 0 rgb(var(--pale-accent)), inset 100% 0 0 0 rgb(var(--medium-accent)); text-shadow: rgb(var(--alt-accent)) 2px 0px 0px, rgb(var(--alt-accent)) 1.75517px 0.958851px 0px, rgb(var(--alt-accent)) 1.0806px 1.68294px 0px, rgb(var(--alt-accent)) 0.141474px 1.99499px 0px, rgb(var(--alt-accent)) -0.832294px 1.81859px 0px, rgb(var(--alt-accent)) -1.60229px 1.19694px 0px, rgb(var(--alt-accent)) -1.97999px 0.28224px 0px, rgb(var(--alt-accent)) -1.87291px -0.701566px 0px, rgb(var(--alt-accent)) -1.30729px -1.51361px 0px, rgb(var(--alt-accent)) -0.421592px -1.95506px 0px, rgb(var(--alt-accent)) 0.567324px -1.91785px 0px, rgb(var(--alt-accent)) 1.41734px -1.41108px 0px, rgb(var(--alt-accent)) 1.92034px -0.558831px 0px; transition: box-shadow 500ms cubic-bezier(0.4, 0.0, 0.2, 1), text-shadow 400ms cubic-bezier(0.4, 0.0, 0.2, 1); } #side-bar { background-image: var(--gradient-background); background-color: rgb(var(--swatch-background)); background-attachment: fixed; background-position: 0 0; background-size: 100% 100%; } #side-bar .heading, #side-bar .side-block > .collapsible-block:nth-child(1) .collapsible-block-folded { background: initial; } #side-bar .heading p, #side-bar .side-block > .collapsible-block .collapsible-block-link { color: rgb(var(--swatch-text-primary)); } #side-bar div.menu-item a, #side-bar div.menu-item .text { text-align: center; justify-content: center; align-items: center; } #header { background-image: initial; } #header h1 a::before { --text-shadow: rgba(0,0,0,0); color: rgba(0,0,0,0); } #header h2 span::before { --text-shadow: rgba(0,0,0,0); font-size: 200%; font-weight: 900; } #header::before { content: " "; position: absolute; width: 100%; height: 100%; top: 0; background-image: var(--logo-image); background-repeat: no-repeat; background-position: calc(50% - 20rem) center; background-size: auto 10rem; opacity: 1; } #header-extra-div-1, #header-extra-div-2, #header-extra-div-3 { --mask-size: 60%; --mask-y-pos: 50%; --mask-x-pos: 56%; display: block; height: var(--header-height-on-desktop); width: 100%; top: 0; left: 0; position: absolute; pointer-events: none; } #header-extra-div-1::before, #header-extra-div-2::before, #header-extra-div-3::before { --logo-mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 25.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.2' baseProfile='tiny' id='TheFoundation_x2122_' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 620 162.7' overflow='visible' xml:space='preserve'%3E%3Cg id='The'%3E%3Cpath d='M36.8,140.3c15.1-19.8,13.3-45.4,15.7-77.5c0.3-3.5-2-6.5-6-4C31.3,68,19,77.9,6.1,85.6c-1.5,0.9-2.9,2-3.5,3.8 C-8,145.5,15,99.2,26.5,102c0.9,15.6,1.5,48-18.8,54.2c-1.9,1.2-2.7,2.9-2.2,3.8C16.7,161.4,28.5,150.6,36.8,140.3z'/%3E%3Cpath d='M141.9,68c-8,2.8-14.1,27.3-26.2,19.8c11.9-8.6,17.3-19.6,15.5-24.7c-0.9-2.5-3.6-3.5-8.2-1.8c-17.3,6.5-25.3,24.7-23,35 c-9.4,7.2-2.4-14.3-5-18c-6.6-7.9-16.4,18.8-18.1,19.2c-2.1,0.7,16.7-55.9-0.5-40.9C67,69.5,59.7,70.5,59.1,74.2 c2.4,1.5,8.1-6.6,9.9-3.9c0.4,0.9-1.4,5.8-1.4,5.8c-9,25.4-15.9,37.8-17.6,46.6c4.8,6.9,18.7,0.1,20.6-1.5 c3.5-3.4,4.6-14.1,7.7-15.6c1.7,0.1,1.5,3.4,2.5,4.8c4.5,9.4,17.9-3.3,20.8-10.2c16.9,16.2,33.6-24.8,38.2-27.2 c18.2,6.5-45.6,84.6-92.5,68c-3.8-2.1-19.7,12.2-19.3,15.9c6.4,7.5,26,0.6,36.7-2.8C119.2,136,168.6,67.1,141.9,68z M114.7,86.3 c-2.6-5.8,1.3-17.8,3.6-18.7C123.6,68,118.9,81.7,114.7,86.3z'/%3E%3C/g%3E%3Cg id='Foundation'%3E%3Cpath d='M592,126.5c-4.9-3-12.5,1.7-14-1.3c19.8-13.9-3.8-14.4-14.5-18.5c-2-0.8-2.5,1.7-0.4,2.7c1.6,0.8,2.7,1.2,3.3,1.6 c3.2,5.4-17.1,7.3-21.9,8.1c-0.8-0.8,0.1-2.3,0.4-3c33.7-14.2-3.3-26.3-8.8-4c-6.1-8.7,9.6-17.3,19.2-13.9c1,0.3,1.5,0.2,1.6-0.1 c-7.3-10.9-31.4-3.9-39.4,2.3c-5.1,1.5-15.2,4.4-14.3-2c2-3.8,13.6-8.3,17.9-10c3.7-2.7-6.7-7.6-8.4-9.3c-5.6-1.8-20,5.3-28.9,11.5 c-29.4,2.6,19.8-20,20-18.6c2.2,0.2,7.5,1.8,9.8,2.4c0.6,0.1,3.3-1.5,4.4-2.4c0-0.9-6.4-1.7-6.8-2.9c0.3-0.6,2.1-1.4,6-3.5 c0.6-0.3,1.1-0.8,1.4-1.3c1-2-7.4-7.1-9-7.8c-5.8-1.5-9.7,3.1-18.7,6c-37.2-11.7-58.7-36-7.8-39.4c2.4-1.1-8.5-9.8-15-13 c-8.7-4.3-18,2.8-23.7,11.9c-9.9,14.3,18.4,34.6,42.9,41.9C486,64,463.1,71.4,451,78.4c-2.6,1.1-7.6,1.2-7.2-1.8 c2-5.2,15.1-11.2,17.4-13.5c0.4-1.5-5.3-3.8-10.1-5c-2.1-1.7-19.1,14-21.1,5.8c1.8-6.7,15.5-9.3,22.4-7.5c1.7,0.4,3-0.2,3.2-1 c-14.3-10.8-42.8,1.8-49.5,9.3c-2.8,1.8-8.1,1.6-7.7-1.8c0.6-7.3,22.9-25.8,35.8-33.8c2.7-1.9,7.7-4.6,7.9-6.6 c0.3-3.4-8.8-4.1-13.1-4.4c-9.2-1.4-24.3,18.5-28.1,21.9c-21-1.4-37.2,9.8-42.6,19.4c-12,2.5,8.6-17.6-6-17.5 c-5.6-0.2-9.9,5.4-12.9,5.3c-1.4-1.4,9.3-13.4-2.1-14.1c-7.8-0.2-12.3,3.4-19.5,3.3c-0.8,0-1.3,0.5-1.3,1c-0.2,2.2,5.1,1.4,5.8,1.5 c5.5,4.6-17.5,16.5-19.1,18.5c-8.6-2.6,12.7-20.6,11.4-20.9c0.1-1.2-8.4-1.9-10.9-2.2c-5.5,0.2-11.6,10.2-18.8,18 c-2.9,2-5.4,4.2-5.9,1.1c0-4.5,12-12.9,11.9-16.9c-2.2-10.3-18.4,0.7-24.9-0.2c-0.8,0-1.3,0.5-1.3,1.1c0.4,3.2,6.9-0.5,7.1,2.1 c0,3.4-8.8,11.5-13.8,18.3c-1.9,1.3-2.7-0.9-2.7-2.4c20.8-30.2-17.2-19.9-9.6,1.6c-10-3.5-1.1-19.8,8.6-22c2.9-0.7,0.4-2.4-1.5-2.2 c-35.9,6-43.8,62.2-2.3,29.2c1.5,0.6,3.4,0.6,5,0.1c-2,4.5-0.3,6.6,7,6.5c7.4-0.2,16-7.7,16.7-7.7c-1.1,13.1,17.7,7.2,24.8,1.6 c13.5,14.4,21.2-1.5,31.3-5.4c1.7,1.5-1,5.6-0.7,8c0.2,9.4,16.3,4.1,21.7,0.1c-0.4,4,2,7,7.6,7.4c9.3,0.6,14.1-5.2,15.2-5.1 c-2.4,11.7,15.7,9,22.4,4c-2.8,13,19.4,7.4,21,5.9c-1.2,10.2,13.6,10.4,21,7.3c-0.1,10.4,27.4,10.6,37.1,9.1 c-7.5,14.7,24.7,13.7,32.9,10.1c-11.4,13.8,14.9,18,23.6,15.1c0.6,0.9,1.5,1.7,2.7,2.2c-1.3,3.3,3.1,11.1,7.2,13.2 c6.5,4.3,18.8-3.2,23.2-1.5c0.9,3.4-9.4,4.9-15.5,9.7c-37.8-4.7-66.2-1.7-87.3-38.4c-2.8-1-20-4.2-22.8-1 c0.6,13.3,13.2,25.1,22.9,30.1c22.8,11.8,55.8,7.8,84.2,11.7c-4.9,4.8-6.5,10.3,2.7,15.1c13.8,8.1,42.5-3.6,21.7-11.5 C580.9,143.3,604.1,134.1,592,126.5z M398,42.8c-3.5,5.1-8.8,10.4-11.8,15.3c0,0-1.4,1-3,0.9C372.5,56.8,391.4,38.4,398,42.8z M579.1,152.9c8.3,6.2-10.4,6.5-4.8-2.2C575.9,151.3,577.5,152.1,579.1,152.9z'/%3E%3Cpath d='M524.6,83.8c8.7,4.4,23.7,1.2,28.7-8.4c7.7-19.8-27.3-20.5-33.6-5.5C517,75.1,518.7,80.8,524.6,83.8z'/%3E%3Cpath d='M232.7,37.2c-0.4-3.8-2.4-2-5.9-1.5c-2.5-1.2,11.3-25.8,9.3-33.9c-0.6-3.3-4.8-1.5-6.6-0.7c-13.7,6.2-33.2,13.7-45.8,18.4 c-3.1,1.1-5.2,2.7-6.1,3.9c-1.5,2.8-8.6,14.3-8.7,17.7c0.6,4.4,15.7-2.8,28.3-4.5c1.8-0.4,2.3,0.6,2.4,1.3c0.1,0.7-0.9,7.5-2.7,7.9 c-3.7,1.5-22.7,3.8-21.9,7.8c0.4,2,3.1,1.4,3.5,1.4c4.2-0.8,14.9-3.1,15.6-3.2c1-0.2,1.1,0.6,0.9,1.1c-5.3,12.9-13.9,27.5-26.4,30 c-2.4,0.5-8.3,0-8.2,3.2c24.8,10.5,60.1-27.6,61.2-40.9c0.3-0.1,8.7-2.8,9.4-3.1C232.5,41.4,232.9,38.6,232.7,37.2z'/%3E%3C/g%3E%3C/svg%3E%0A"); content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; mask-image: var(--logo-mask-image); mask-repeat: no-repeat; mask-size: var(--mask-size); } #header-extra-div-1::before { background-image: radial-gradient(circle at 90%, rgb(var(--alt-accent)) 0%, rgb(var(--bright-accent)) 50%); background-size: 100%; background-repeat: no-repeat; z-index: 1; mask-size: var(--mask-size); mask-position: var(--mask-x-pos) var(--mask-y-pos); } #header-extra-div-2::before { background: rgb(var(--alt-accent)); mask-size: calc(var(--mask-size) + 0.125rem); mask-position: calc(var(--mask-x-pos) + 0.0625rem) calc(var(--mask-y-pos) + 0.125rem); } #header-extra-div-3::before { background: rgb(var(--alt-accent)); mask-size: calc(var(--mask-size) + 0.25rem); mask-position: calc(var(--mask-x-pos) - 0.0625rem) calc(var(--mask-y-pos) + 0.1875rem); } #header-extra-div-1::after { --tm-mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.2' baseProfile='tiny' id='TheFoundation_x2122_' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 620 162.7' overflow='visible' xml:space='preserve'%3E%3Cpath id='_x2122_' d='M603.1,120.7c-9.6,8.8,4.4,23.6,13.7,14.6C626.5,126.5,612.5,111.7,603.1,120.7z M605.4,132.7l0-7.6l-1.3,0 l0-1.5l4.2,0l0,1.5l-1.3,0l0,7.6L605.4,132.7z M615.1,132.7l-1.3,0l-0.1-6.1l0,0l-1,6.1l-1,0l-1.1-6.1l0,0l0.1,6.1l-1.4,0l-0.1-9.1 l2.2,0l0.8,5.1l0,0l0.9-5.1l2.1,0L615.1,132.7z'/%3E%3C/svg%3E%0A"); content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgb(var(--alt-accent)); mask-image: var(--tm-mask-image); mask-size: var(--mask-size); mask-position: var(--mask-x-pos) var(--mask-y-pos); mask-repeat: no-repeat; } #login-status { display: flex; flex-direction: row; flex-wrap: nowrap; top: -3rem; position: absolute; overflow: visible; font-size: 0.8435rem; color: rgb(var(--swatch-menutxt-light-color)); text-shadow: initial; filter: drop-shadow(0.125rem 0.125rem 0 rgb(var(--green-accent))); transition: top 50ms cubic-bezier(0.4, 0.0, 0.2, 1), filter 350ms cubic-bezier(0.4, 0.0, 0.2, 1); align-items: center; justify-content: center; } #login-status::before { content: ""; background: rgb(var(--alt-accent)); position: absolute; width: 100%; height: 2rem; top: -1.5rem; left: 0; z-index: -1; filter: drop-shadow(0 0 0 rgb(var(--bright-accent))); transition: top 300ms cubic-bezier(0.4, 0.0, 0.2, 1), filter 400ms cubic-bezier(0.4, 0.0, 0.2, 1); } #login-status::after { content: "LOYAL â–² CLIENT"; background-color: rgb(var(--alt-accent)); position: absolute; display: inline-flex; align-items: center; justify-content: center; width: 11rem; height: 1.5rem; bottom: -2.3125rem; left: 25%; color: rgb(var(--swatch-background)); transition: bottom 200ms cubic-bezier(0.4, 0.0, 0.2, 1); } #login-status:hover, #login-status:active { top: 0; filter: drop-shadow(0.25rem 0.25rem 0 rgb(var(--green-accent))); } #login-status:focus-within { top: 0; filter: drop-shadow(0.25rem 0.25rem 0 rgb(var(--green-accent))); } #login-status:hover::before, #login-status:active::before { top: 0; filter: drop-shadow(0.25rem 0.25rem 0 rgb(var(--bright-accent))); } #login-status:focus-within::before { top: 0; filter: drop-shadow(0.25rem 0.25rem 0 rgb(var(--bright-accent))); } #login-status:hover::after, #login-status:active::after { bottom: 10rem; } #login-status:focus-within::after { bottom: 10rem; } #login-status .printuser { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; font-family: var(--header-font); font-size: 1.75em; line-height: 0.75; font-weight: initial !important; color: rgb(var(--swatch-menutxt-dark-color)); } #login-status .printuser a { position: relative; top: -0.2rem; filter: drop-shadow(0 0 0 rgb(var(--swatch-primary))); transition: filter 500ms cubic-bezier(0.4, 0.0, 0.2, 1); } #login-status:hover .printuser a, #login-status:active .printuser a { filter: drop-shadow(0.125rem 0.125rem 0 rgb(var(--swatch-primary))); } #login-status:focus-within .printuser a { filter: drop-shadow(0.125rem 0.125rem 0 rgb(var(--swatch-primary))); } #login-status #my-account { display: flex; height: 100%; line-height: 2em; align-items: center; justify-content: center; color: rgb(var(--swatch-menutxt-dark-color)); text-transform: uppercase; font-family: var(--title-font); } #account-options { background-image: initial; background-color: rgb(var(--alt-accent)); top: calc(var(--base-font-size) * 2 + 0.0625rem); padding: initial; border: none; } #account-options::after { content: ""; position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; background-color: rgb(var(--bright-accent)); filter: drop-shadow(0.25rem 0.25rem 0 rgb(var(--bright-accent))); } #account-options ul { background-color: rgb(var(--alt-accent)); padding: 0.5em; } #account-options ul li a, #account-options ul li a:hover, #account-options ul li a:active { color: rgb(var(--swatch-menutxt-dark-color)); text-decoration: none; } #top-bar { text-transform: uppercase; font-family: var(--title-font); font-weight: 900; } #search-top-box, #search-top-box * { box-sizing: padding-box; } #search-top-box { display: flex; width: auto; top: -3rem; padding: 0.5rem; background: rgb(var(--alt-accent)); position: absolute; overflow: visible; font-size: 0.8435rem; color: rgb(var(--swatch-menutxt-light-color)); filter: drop-shadow(0.125rem 0.125rem 0 rgb(var(--green-accent))); transition: top 50ms cubic-bezier(0.4, 0.0, 0.2, 1), filter 350ms cubic-bezier(0.4, 0.0, 0.2, 1); } #search-top-box::before { content: ""; background: rgb(var(--alt-accent)); position: absolute; width: 100%; height: 100%; top: -1.5rem; left: 0; z-index: -1; filter: drop-shadow(0 0 0 rgb(var(--bright-accent))); transition: top 100ms cubic-bezier(0.4, 0.0, 0.2, 1), filter 400ms cubic-bezier(0.4, 0.0, 0.2, 1); } #search-top-box::after { content: "FIND â–² PRODUCT"; background-color: rgb(var(--alt-accent)); position: absolute; display: inline-flex; align-items: center; justify-content: center; width: 11rem; height: 1.5rem; bottom: -1.6875rem; left: 25%; color: rgb(var(--swatch-background)); transition: bottom 100ms cubic-bezier(0.4, 0.0, 0.2, 1); } #search-top-box:hover, #search-top-box:active { top: 0; filter: drop-shadow(0.25rem 0.25rem 0 rgb(var(--green-accent))); } #search-top-box:focus-within { top: 0; filter: drop-shadow(0.25rem 0.25rem 0 rgb(var(--green-accent))); } #search-top-box:hover::before, #search-top-box:active::before { top: 0; filter: drop-shadow(0.25rem 0.25rem 0 rgb(var(--bright-accent))); } #search-top-box:focus-within::before { top: 0; filter: drop-shadow(0.25rem 0.25rem 0 rgb(var(--bright-accent))); } #search-top-box:hover::after, #search-top-box:active::after { bottom: 10rem; } #search-top-box:focus-within::after { bottom: 10rem; } #search-top-box-form > input, #search-top-box-form > input:hover, #search-top-box-form > input:focus, #search-top-box-form > input:focus-within { background-color: rgb(var(--medium-accent)); font-family: var(--mono-font); color: rgb(var(--swatch-menutxt-light-color)); box-shadow: 0 0 0 0.125rem rgb(var(--bright-accent)); } #search-top-box-form input[type="submit"] { background-color: rgb(var(--bright-accent)); box-shadow: 0 0 0 0.125rem rgb(var(--bright-accent)); border-color: rgb(var(--bright-accent)); } #top-bar div.mobile-top-bar > ul > li:hover, #top-bar div.mobile-top-bar > ul > li:active, #top-bar div.top-bar > ul > li:hover, #top-bar div.top-bar > ul > li:active { background-color: transparent; } #top-bar div.mobile-top-bar > ul > li:focus-within, #top-bar div.top-bar > ul > li:focus-within { background-color: transparent; } #top-bar div.mobile-top-bar > ul > li > a, #top-bar div.top-bar > ul > li > a { color: rgb(var(--swatch-important-text)); font-weight: 600; font-family: var(--body-font); font-size: var(--base-font-size); will-change: color, text-shadow, left, top; transition: color 60ms cubic-bezier(0.4, 0.0, 0.2, 1), text-shadow 140ms cubic-bezier(0.4, 0.0, 0.2, 1), left 200ms cubic-bezier(0.4, 0.0, 0.2, 1), top 200ms cubic-bezier(0.4, 0.0, 0.2, 1); } #top-bar div.mobile-top-bar > ul > li.sfhover > a, #top-bar div.mobile-top-bar > ul > li:hover > a, #top-bar div.mobile-top-bar > ul > li:active > a, #top-bar div.top-bar > ul > li.sfhover > a, #top-bar div.top-bar > ul > li:hover > a, #top-bar div.top-bar > ul > li:active > a { text-shadow: 0.125rem 0.125rem 0 rgb(var(--swatch-primary)), 0.25rem 0.25rem 0 rgb(var(--green-accent)); color: rgb(var(--swatch-menutxt-light-color)); font-weight: 900; transition: color 120ms cubic-bezier(0.4, 0.0, 0.2, 1), text-shadow 300ms cubic-bezier(0.4, 0.0, 0.2, 1), left 400ms cubic-bezier(0.4, 0.0, 0.2, 1), top 400ms cubic-bezier(0.4, 0.0, 0.2, 1); } #top-bar div.mobile-top-bar > ul > li:focus-within > a, #top-bar div.top-bar > ul > li:focus-within > a { text-shadow: 0.125rem 0.125rem 0 rgb(var(--swatch-primary)), 0.25rem 0.25rem 0 rgb(var(--green-accent)); color: rgb(var(--swatch-menutxt-light-color)); font-weight: 900; transition: color 120ms cubic-bezier(0.4, 0.0, 0.2, 1), text-shadow 300ms cubic-bezier(0.4, 0.0, 0.2, 1), left 400ms cubic-bezier(0.4, 0.0, 0.2, 1), top 400ms cubic-bezier(0.4, 0.0, 0.2, 1); } #top-bar div.mobile-top-bar > ul > li > a:after, #top-bar div.mobile-top-bar > ul > li > a:before, #top-bar div.top-bar > ul > li > a:after, #top-bar div.top-bar > ul > li > a:before { position:absolute; width:100%; height:100%; top: 0; left: 0; z-index: -1; content:" "; } #top-bar div.mobile-top-bar > ul > li > a:after, #top-bar div.top-bar > ul > li > a:after { display: none; } #top-bar div.mobile-top-bar > ul > li > a:before, #top-bar div.top-bar > ul > li > a:before { background-color: rgba(0,0,0,0); background-image: linear-gradient(105deg, rgb(var(--bright-accent)) 0%, rgb(var(--bright-accent)) calc((100% + (1em - 0.0625rem))/3), rgb(var(--pale-accent)) calc((100% + 1em)/3), rgb(var(--pale-accent)) calc((100%/3)*2), rgb(var(--medium-accent)) calc(((100% + 0.0625rem)/3)*2), rgb(var(--medium-accent)) 100%, transparent 100%, transparent 100%); background-size: 0%; background-repeat: no-repeat; will-change: background-size; mask: linear-gradient(105deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) calc(1em - 0.0625rem), rgba(0,0,0,1) 1em, rgba(0,0,0,1) calc(100% - 0.5em), rgba(0,0,0,0) calc(100% - (0.5em + 0.0625rem)), rgba(0,0,0,0) 100%); transition: background-size 300ms cubic-bezier(0.4, 0.0, 0.2, 1); } #top-bar div.mobile-top-bar > ul > li.sfhover > a:before, #top-bar div.mobile-top-bar > ul > li:hover > a:before, #top-bar div.mobile-top-bar > ul > li:active > a:before, #top-bar div.top-bar > ul > li.sfhover > a:before, #top-bar div.top-bar > ul > li:hover > a:before, #top-bar div.top-bar > ul > li:active > a:before { background-size: 100%; transition: background-size 500ms cubic-bezier(0.4, 0.0, 0.2, 1); } #top-bar div.mobile-top-bar > ul > li:focus-within > a:before, #top-bar div.top-bar > ul > li:focus-within > a:before { background-size: 100%; transition: background-size 500ms cubic-bezier(0.4, 0.0, 0.2, 1); } #top-bar div.mobile-top-bar > ul > li > ul, #top-bar div.top-bar > ul > li > ul { --transition-timing: 100ms; --speedy-transition-timing: 50ms; backdrop-filter: none; box-shadow: initial; background-color: transparent; border: none; opacity: 1; visibility: visible; pointer-events: none; transition: box-shadow var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1); } #top-bar div.top-bar > ul > li:not(:first-of-type):not(:last-of-type) > ul { left: 50%; transform: translateX(-50%); } #top-bar div.mobile-top-bar > ul > li:hover > ul, #top-bar div.mobile-top-bar > ul > li:active > ul, #top-bar div.top-bar > ul > li:hover > ul, #top-bar div.top-bar > ul > li:active > ul { pointer-events: all; box-shadow: 0 -0.125rem 0 0 rgb(var(--swatch-menubg-medium-dark-color)), 0 -0.5625rem 0 0 rgb(var(--swatch-menubg-medium-color)), 0 -0.6875rem 0 0 rgb(var(--swatch-menubg-light-color)); margin-top: calc(var(--topbar-height-on-desktop) + 0.5rem); border-top-left-radius: 0, 0.25rem; border-top-right-radius: 0, 0.25rem; transition: box-shadow var(--transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1); } #top-bar div.mobile-top-bar > ul > li:focus-within > ul, #top-bar div.top-bar > ul > li:focus-within > ul { pointer-events: all; } #top-bar div.top-bar > ul > li > ul > li { height: 2.5rem; color: rgb(var(--swatch-menutxt-light-color)); background-color: rgb(var(--swatch-menubg-black-color)); text-align: center; margin: 0; } #top-bar div.top-bar > ul > li > ul > li:nth-child(even) > a { background: rgba(var(--swatch-menubg-light-color),1); } #top-bar div.top-bar > ul > li > ul > li:nth-child(odd) > a { background: rgba(var(--swatch-menubg-light-color),0.9); } #top-bar div.top-bar > ul > li > ul > li:nth-child(odd) { position: relative; transform-origin: top left; transform: perspective(350px) rotateX(-90deg) skew(0); } #top-bar div.top-bar > ul > li > ul > li:nth-child(even) { position: relative; transform-origin: top right; transform: perspective(350px) rotateX(-90deg) skew(0) translateX(0.4375rem); } #top-bar div.top-bar > ul > li > ul > li::after, #top-bar div.top-bar > ul > li > ul:hover > li::after, #top-bar div.top-bar > ul > li > ul:active > li::after { content: " "; width: 0.625rem;; height: 100%; position: absolute; z-index: -1; filter: blur(0.0625rem); } #top-bar div.top-bar > ul > li > ul:focus-within > li::after { content: " "; width: 1rem; height: 100%; position: absolute; z-index: -1; filter: blur(0.0625rem); } #top-bar div.top-bar > ul > li > ul > li:nth-child(odd)::after, #top-bar div.top-bar > ul > li > ul:hover > li:nth-child(odd)::after, #top-bar div.top-bar > ul > li > ul:active > li:nth-child(odd)::after { bottom: 0.0625rem; right: 0; transform-origin: top left; background-image: linear-gradient(to bottom, rgba(var(--swatch-menubg-black-color),0) 0%, rgba(var(--swatch-menubg-black-color),0) 40%, rgba(var(--swatch-menubg-black-color),0.25) 70%, rgba(var(--swatch-menubg-black-color),1) 100%); transform: skew(-12deg) translateX(0.5rem); } #top-bar div.top-bar > ul > li > ul:focus-within > li:nth-child(odd)::after { bottom: 0.0625rem; right: 0; transform-origin: top left; background-image: linear-gradient(to bottom, rgba(var(--swatch-menubg-black-color),0) 0%, rgba(var(--swatch-menubg-black-color),0) 40%, rgba(var(--swatch-menubg-black-color),0.25) 70%, rgba(var(--swatch-menubg-black-color),1) 100%); transform: skew(-12deg) translateX(0.5rem); } #top-bar div.top-bar > ul > li > ul > li:nth-child(even)::after, #top-bar div.top-bar > ul > li > ul:hover > li:nth-child(even)::after, #top-bar div.top-bar > ul > li > ul:active > li:nth-child(even)::after { top: 0.0625rem; right: 0; transform-origin: top left; background-image: linear-gradient(to top, rgba(var(--swatch-menubg-black-color),0) 0%, rgba(var(--swatch-menubg-black-color),0) 40%, rgba(var(--swatch-menubg-black-color),0.25) 70%, rgba(var(--swatch-menubg-black-color),1) 100%); transform: skew(12deg); } #top-bar div.top-bar > ul > li > ul:focus-within > li:nth-child(even)::after { top: 0.0625rem; right: 0; transform-origin: top left; background-image: linear-gradient(to top, rgba(var(--swatch-menubg-black-color),0) 0%, rgba(var(--swatch-menubg-black-color),0) 40%, rgba(var(--swatch-menubg-black-color),0.25) 70%, rgba(var(--swatch-menubg-black-color),1) 100%); transform: skew(12deg); } #top-bar div.top-bar > ul > li:hover > ul > li, #top-bar div.top-bar > ul > li:active > ul > li { transition: var(--transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) 0s; } #top-bar div.top-bar > ul > li:focus-within > ul > li { transition: var(--transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) 0s; } #top-bar div.top-bar > ul > li:hover > ul > li:nth-child(odd), #top-bar div.top-bar > ul > li:active > ul > li:nth-child(odd) { transform: perspective(350px) rotateX(0deg) skew(10deg); } #top-bar div.top-bar > ul > li:focus-within > ul > li:nth-child(odd) { transform: perspective(350px) rotateX(0deg) skew(10deg); } #top-bar div.top-bar > ul > li:hover > ul > li:nth-child(even), #top-bar div.top-bar > ul > li:active > ul > li:nth-child(even) { transform: perspective(350px) rotateX(0deg) skew(-10deg) translateX(0.4375rem); } #top-bar div.top-bar > ul > li:focus-within > ul > li:nth-child(even) { transform: perspective(350px) rotateX(0deg) skew(-10deg) translateX(0.4375rem); } /* Brute Force Timing on Dropdown Will Need to be manually changed if dropdown # is altered */ /* SCP Series */ #top-bar div.top-bar > ul > li:nth-of-type(1) > ul, #top-bar div.top-bar > ul > li:nth-of-type(1) > ul > li:nth-of-type(1) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 10); } #top-bar div.top-bar > ul > li:nth-of-type(1) > ul > li:nth-of-type(2) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 9); } #top-bar div.top-bar > ul > li:nth-of-type(1) > ul > li:nth-of-type(3) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 8); } #top-bar div.top-bar > ul > li:nth-of-type(1) > ul > li:nth-of-type(4) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 7); } #top-bar div.top-bar > ul > li:nth-of-type(1) > ul > li:nth-of-type(5) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 6); } #top-bar div.top-bar > ul > li:nth-of-type(1) > ul > li:nth-of-type(6) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 5); } #top-bar div.top-bar > ul > li:nth-of-type(1) > ul > li:nth-of-type(7) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 4); } #top-bar div.top-bar > ul > li:nth-of-type(1) > ul > li:nth-of-type(8) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 3); } #top-bar div.top-bar > ul > li:nth-of-type(1) > ul > li:nth-of-type(9) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 2); } #top-bar div.top-bar > ul > li:nth-of-type(1) > ul > li:nth-of-type(10) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) var(--transition-timing); } #top-bar div.top-bar > ul > li:nth-of-type(1) > ul > li:nth-of-type(11) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) 0ms; } /* Tales */ #top-bar div.top-bar > ul > li:nth-of-type(2) > ul, #top-bar div.top-bar > ul > li:nth-of-type(2) > ul > li:nth-of-type(1) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 3); } #top-bar div.top-bar > ul > li:nth-of-type(2) > ul > li:nth-of-type(2) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 2); } #top-bar div.top-bar > ul > li:nth-of-type(2) > ul > li:nth-of-type(3) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) var(--transition-timing); } #top-bar div.top-bar > ul > li:nth-of-type(2) > ul > li:nth-of-type(4) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) 0ms; } /* Library */ #top-bar div.top-bar > ul > li:nth-of-type(3) > ul, #top-bar div.top-bar > ul > li:nth-of-type(3) > ul > li:nth-of-type(1) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 8); } #top-bar div.top-bar > ul > li:nth-of-type(3) > ul > li:nth-of-type(2) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 7); } #top-bar div.top-bar > ul > li:nth-of-type(3) > ul > li:nth-of-type(3) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 6); } #top-bar div.top-bar > ul > li:nth-of-type(3) > ul > li:nth-of-type(4) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 5); } #top-bar div.top-bar > ul > li:nth-of-type(3) > ul > li:nth-of-type(5) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 4); } #top-bar div.top-bar > ul > li:nth-of-type(3) > ul > li:nth-of-type(6) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 3); } #top-bar div.top-bar > ul > li:nth-of-type(3) > ul > li:nth-of-type(7) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 2); } #top-bar div.top-bar > ul > li:nth-of-type(3) > ul > li:nth-of-type(8) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) var(--transition-timing); } #top-bar div.top-bar > ul > li:nth-of-type(3) > ul > li:nth-of-type(9) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) 0ms; } /* Universe */ #top-bar div.top-bar > ul > li:nth-of-type(4) > ul, #top-bar div.top-bar > ul > li:nth-of-type(4) > ul > li:nth-of-type(1) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 4); } #top-bar div.top-bar > ul > li:nth-of-type(4) > ul > li:nth-of-type(2) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 3); } #top-bar div.top-bar > ul > li:nth-of-type(4) > ul > li:nth-of-type(3) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 2); } #top-bar div.top-bar > ul > li:nth-of-type(4) > ul > li:nth-of-type(4) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) var(--transition-timing); } #top-bar div.top-bar > ul > li:nth-of-type(4) > ul > li:nth-of-type(5) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) 0ms; } /* SCP Global */ #top-bar div.top-bar > ul > li:nth-of-type(5) > ul, #top-bar div.top-bar > ul > li:nth-of-type(5) > ul > li:nth-of-type(1) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 14); } #top-bar div.top-bar > ul > li:nth-of-type(5) > ul > li:nth-of-type(2) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 13); } #top-bar div.top-bar > ul > li:nth-of-type(5) > ul > li:nth-of-type(3) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 12); } #top-bar div.top-bar > ul > li:nth-of-type(5) > ul > li:nth-of-type(4) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 11); } #top-bar div.top-bar > ul > li:nth-of-type(5) > ul > li:nth-of-type(5) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 10); } #top-bar div.top-bar > ul > li:nth-of-type(5) > ul > li:nth-of-type(6) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 9); } #top-bar div.top-bar > ul > li:nth-of-type(5) > ul > li:nth-of-type(7) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 8); } #top-bar div.top-bar > ul > li:nth-of-type(5) > ul > li:nth-of-type(8) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 7); } #top-bar div.top-bar > ul > li:nth-of-type(5) > ul > li:nth-of-type(9) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 6); } #top-bar div.top-bar > ul > li:nth-of-type(5) > ul > li:nth-of-type(10) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 5); } #top-bar div.top-bar > ul > li:nth-of-type(5) > ul > li:nth-of-type(11) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 4); } #top-bar div.top-bar > ul > li:nth-of-type(5) > ul > li:nth-of-type(12) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 3); } #top-bar div.top-bar > ul > li:nth-of-type(5) > ul > li:nth-of-type(13) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 2); } #top-bar div.top-bar > ul > li:nth-of-type(5) > ul > li:nth-of-type(14) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) var(--transition-timing); } #top-bar div.top-bar > ul > li:nth-of-type(5) > ul > li:nth-of-type(15) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) 0ms; } /* Background */ #top-bar div.top-bar > ul > li:nth-of-type(6) > ul, #top-bar div.top-bar > ul > li:nth-of-type(6) > ul > li:nth-of-type(1) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 5); } #top-bar div.top-bar > ul > li:nth-of-type(6) > ul > li:nth-of-type(2) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 4); } #top-bar div.top-bar > ul > li:nth-of-type(6) > ul > li:nth-of-type(3) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 3); } #top-bar div.top-bar > ul > li:nth-of-type(6) > ul > li:nth-of-type(4) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 2); } #top-bar div.top-bar > ul > li:nth-of-type(6) > ul > li:nth-of-type(5) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) var(--transition-timing); } #top-bar div.top-bar > ul > li:nth-of-type(6) > ul > li:nth-of-type(6) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) 0ms; } /* Info Pages */ #top-bar div.top-bar > ul > li:nth-of-type(7) > ul, #top-bar div.top-bar > ul > li:nth-of-type(7) > ul > li:nth-of-type(1) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 11); } #top-bar div.top-bar > ul > li:nth-of-type(7) > ul > li:nth-of-type(2) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 10); } #top-bar div.top-bar > ul > li:nth-of-type(7) > ul > li:nth-of-type(3) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 9); } #top-bar div.top-bar > ul > li:nth-of-type(7) > ul > li:nth-of-type(4) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 8); } #top-bar div.top-bar > ul > li:nth-of-type(7) > ul > li:nth-of-type(5) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 7); } #top-bar div.top-bar > ul > li:nth-of-type(7) > ul > li:nth-of-type(6) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 6); } #top-bar div.top-bar > ul > li:nth-of-type(7) > ul > li:nth-of-type(7) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 5); } #top-bar div.top-bar > ul > li:nth-of-type(7) > ul > li:nth-of-type(8) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 4); } #top-bar div.top-bar > ul > li:nth-of-type(7) > ul > li:nth-of-type(9) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 3); } #top-bar div.top-bar > ul > li:nth-of-type(7) > ul > li:nth-of-type(10) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 2); } #top-bar div.top-bar > ul > li:nth-of-type(7) > ul > li:nth-of-type(11) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) var(--transition-timing); } #top-bar div.top-bar > ul > li:nth-of-type(7) > ul > li:nth-of-type(12) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) 0ms; } /* Hover Dropdowns do not need the same treatment */ #top-bar div.top-bar > ul > li:hover > ul, #top-bar div.top-bar > ul > li:active > ul, #top-bar div.top-bar > ul > li:hover > ul > li:nth-of-type(1), #top-bar div.top-bar > ul > li:active > ul > li:nth-of-type(1) { transition-delay: 0ms; } #top-bar div.top-bar > ul > li:focus-within > ul, #top-bar div.top-bar > ul > li:focus-within > ul > li:nth-of-type(1) { transition-delay: 0ms; } #top-bar div.top-bar > ul > li:hover > ul > li:nth-of-type(2), #top-bar div.top-bar > ul > li:active > ul > li:nth-of-type(2) { transition-delay: calc(var(--transition-timing) * 0.3 * 3); } #top-bar div.top-bar > ul > li:focus-within > ul > li:nth-of-type(2) { transition-delay: calc(var(--transition-timing) * 0.3 * 3); } #top-bar div.top-bar > ul > li:hover > ul > li:nth-of-type(3), #top-bar div.top-bar > ul > li:active > ul > li:nth-of-type(3) { transition-delay: calc(var(--transition-timing) * 0.59 * 3); } #top-bar div.top-bar > ul > li:focus-within > ul > li:nth-of-type(3) { transition-delay: calc(var(--transition-timing) * 0.59 * 3); } #top-bar div.top-bar > ul > li:hover > ul > li:nth-of-type(4), #top-bar div.top-bar > ul > li:active > ul > li:nth-of-type(4) { transition-delay: calc(var(--transition-timing) * 0.87 * 3); } #top-bar div.top-bar > ul > li:focus-within > ul > li:nth-of-type(4) { transition-delay: calc(var(--transition-timing) * 0.87 * 3); } #top-bar div.top-bar > ul > li:hover > ul > li:nth-of-type(5), #top-bar div.top-bar > ul > li:active > ul > li:nth-of-type(5) { transition-delay: calc(var(--transition-timing) * 1.14 * 3); } #top-bar div.top-bar > ul > li:focus-within > ul > li:nth-of-type(5) { transition-delay: calc(var(--transition-timing) * 1.14 * 3); } #top-bar div.top-bar > ul > li:hover > ul > li:nth-of-type(6), #top-bar div.top-bar > ul > li:active > ul > li:nth-of-type(6) { transition-delay: calc(var(--transition-timing) * 1.4 * 3); } #top-bar div.top-bar > ul > li:focus-within > ul > li:nth-of-type(6) { transition-delay: calc(var(--transition-timing) * 1.4 * 3); } #top-bar div.top-bar > ul > li:hover > ul > li:nth-of-type(7), #top-bar div.top-bar > ul > li:active > ul > li:nth-of-type(7) { transition-delay: calc(var(--transition-timing) * 1.65 * 3); } #top-bar div.top-bar > ul > li:focus-within > ul > li:nth-of-type(7) { transition-delay: calc(var(--transition-timing) * 1.65 * 3); } #top-bar div.top-bar > ul > li:hover > ul > li:nth-of-type(8), #top-bar div.top-bar > ul > li:active > ul > li:nth-of-type(8) { transition-delay: calc(var(--transition-timing) * 1.89 * 3); } #top-bar div.top-bar > ul > li:focus-within > ul > li:nth-of-type(8) { transition-delay: calc(var(--transition-timing) * 1.89 * 3); } #top-bar div.top-bar > ul > li:hover > ul > li:nth-of-type(9), #top-bar div.top-bar > ul > li:active > ul > li:nth-of-type(9) { transition-delay: calc(var(--transition-timing) * 2.12 * 3); } #top-bar div.top-bar > ul > li:focus-within > ul > li:nth-of-type(9) { transition-delay: calc(var(--transition-timing) * 2.12 * 3); } #top-bar div.top-bar > ul > li:hover > ul > li:nth-of-type(10), #top-bar div.top-bar > ul > li:active > ul > li:nth-of-type(10) { transition-delay: calc(var(--transition-timing) * 2.34 * 3); } #top-bar div.top-bar > ul > li:focus-within > ul > li:nth-of-type(10) { transition-delay: calc(var(--transition-timing) * 2.34 * 3); } #top-bar div.top-bar > ul > li:hover > ul > li:nth-of-type(11), #top-bar div.top-bar > ul > li:active > ul > li:nth-of-type(11) { transition-delay: calc(var(--transition-timing) * 2.55 * 3); } #top-bar div.top-bar > ul > li:focus-within > ul > li:nth-of-type(11) { transition-delay: calc(var(--transition-timing) * 2.55 * 3); } #top-bar div.top-bar > ul > li:hover > ul > li:nth-of-type(12), #top-bar div.top-bar > ul > li:active > ul > li:nth-of-type(12) { transition-delay: calc(var(--transition-timing) * 2.75 * 3); } #top-bar div.top-bar > ul > li:focus-within > ul > li:nth-of-type(12) { transition-delay: calc(var(--transition-timing) * 2.75 * 3); } #top-bar div.top-bar > ul > li:hover > ul > li:nth-of-type(13), #top-bar div.top-bar > ul > li:active > ul > li:nth-of-type(13) { transition-delay: calc(var(--transition-timing) * 2.94 * 3); } #top-bar div.top-bar > ul > li:focus-within > ul > li:nth-of-type(13) { transition-delay: calc(var(--transition-timing) * 2.94 * 3); } #top-bar div.top-bar > ul > li:hover > ul > li:nth-of-type(14), #top-bar div.top-bar > ul > li:active > ul > li:nth-of-type(14) { transition-delay: calc(var(--transition-timing) * 3.12 * 3); } #top-bar div.top-bar > ul > li:focus-within > ul > li:nth-of-type(14) { transition-delay: calc(var(--transition-timing) * 3.12 * 3); } #top-bar div.top-bar > ul > li:hover > ul > li:nth-of-type(15), #top-bar div.top-bar > ul > li:active > ul > li:nth-of-type(15) { transition-delay: calc(var(--transition-timing) * 3.29 * 3); } #top-bar div.top-bar > ul > li:focus-within > ul > li:nth-of-type(15) { transition-delay: calc(var(--transition-timing) * 3.29 * 3); } #top-bar div.top-bar > ul > li:hover > ul > li:nth-of-type(16), #top-bar div.top-bar > ul > li:active > ul > li:nth-of-type(16) { transition-delay: calc(var(--transition-timing) * 3.45 * 3); } #top-bar div.top-bar > ul > li:focus-within > ul > li:nth-of-type(16) { transition-delay: calc(var(--transition-timing) * 3.45 * 3); } #top-bar div.top-bar > ul > li:hover > ul > li:nth-of-type(17), #top-bar div.top-bar > ul > li:active > ul > li:nth-of-type(17) { transition-delay: calc(var(--transition-timing) * 3.6 * 3); } #top-bar div.top-bar > ul > li:focus-within > ul > li:nth-of-type(17) { transition-delay: calc(var(--transition-timing) * 3.6 * 3); } #top-bar div.top-bar > ul > li:hover > ul > li:nth-of-type(18), #top-bar div.top-bar > ul > li:active > ul > li:nth-of-type(18) { transition-delay: calc(var(--transition-timing) * 3.74 * 3); } #top-bar div.top-bar > ul > li:focus-within > ul > li:nth-of-type(18) { transition-delay: calc(var(--transition-timing) * 3.74 * 3); } #top-bar div.top-bar > ul > li:hover > ul > li:nth-of-type(19), #top-bar div.top-bar > ul > li:active > ul > li:nth-of-type(19) { transition-delay: calc(var(--transition-timing) * 3.87 * 3); } #top-bar div.top-bar > ul > li:focus-within > ul > li:nth-of-type(19) { transition-delay: calc(var(--transition-timing) * 3.87 * 3); } #top-bar div.top-bar > ul > li:hover > ul > li:nth-of-type(20), #top-bar div.top-bar > ul > li:active > ul > li:nth-of-type(20) { transition-delay: calc(var(--transition-timing) * 3.99 * 3); } #top-bar div.top-bar > ul > li:focus-within > ul > li:nth-of-type(20) { transition-delay: calc(var(--transition-timing) * 3.99 * 3); } #top-bar div.top-bar > ul > li > ul > li:last-of-type { border-radius: 0rem 0rem 0.25rem 0.25rem; } .code pre [class*="hl-"] { filter: invert(1) hue-rotate(180deg); } @media only screen and (max-width: 48rem) { /* Header Styling */ #header-extra-div-1, #header-extra-div-2, #header-extra-div-3 { --mask-size: 80%; } #header::before { background-image: var(--logo-image); background-repeat: no-repeat; background-position: center center; background-size: auto calc(var(--header-height-on-desktop) - 4rem); } #header h2 span::before { color: rgb(var(--medium-accent)); text-shadow: rgb(var(--alt-accent)) 2px 0px 0px, rgb(var(--alt-accent)) 1.75517px 0.958851px 0px, rgb(var(--alt-accent)) 1.0806px 1.68294px 0px, rgb(var(--alt-accent)) 0.141474px 1.99499px 0px, rgb(var(--alt-accent)) -0.832294px 1.81859px 0px, rgb(var(--alt-accent)) -1.60229px 1.19694px 0px, rgb(var(--alt-accent)) -1.97999px 0.28224px 0px, rgb(var(--alt-accent)) -1.87291px -0.701566px 0px, rgb(var(--alt-accent)) -1.30729px -1.51361px 0px, rgb(var(--alt-accent)) -0.421592px -1.95506px 0px, rgb(var(--alt-accent)) 0.567324px -1.91785px 0px, rgb(var(--alt-accent)) 1.41734px -1.41108px 0px, rgb(var(--alt-accent)) 1.92034px -0.558831px 0px !important; } /*Login box styling */ #login-status, #login-status::before { left: initial; right: initial; width: 100%; } #login-status::after { left: 3%; bottom: -2.3125rem; max-width: 45vw; } /* Search box styling */ #search-top-box-input { display: flex; min-width: calc(var(--base-font-size)*0.93333*11.4); } #search-top-box { height: initial; width: 100%; top: -3rem; padding: 0.5rem 0; align-items: center; justify-content: center; transition: top 50ms cubic-bezier(0.4, 0.0, 0.2, 1), filter 350ms cubic-bezier(0.4, 0.0, 0.2, 1); } #search-top-box:hover, #search-top-box:active, #search-top-box:focus-within { background: rgb(var(--alt-accent)); padding: 0.5rem 0; box-shadow: initial; } #search-top-box:hover ~ #login-status, #search-top-box:active ~ #login-status, #search-top-box:focus-within ~ #login-status { opacity: 0; visibility: 0; } #search-top-box::after { right: 3%; left: initial; bottom: -1.6875rem; max-width: 45vw; } #search-top-box:hover::before, #search-top-box:active::before { top: 0; right: inherit; left: 0; z-index: -1; mask-image: inherit; background-color: rgb(var(--alt-accent)); width: 100%; height: 100%; filter: drop-shadow(0.25rem 0.25rem 0 rgb(var(--bright-accent))); } #search-top-box:not(:focus-within)::before, #search-top-box:focus-within::before { top: 0; right: inherit; left: 0; z-index: -1; mask-image: inherit; background-color: rgb(var(--alt-accent)); width: 100%; height: 100%; filter: drop-shadow(0.25rem 0.25rem 0 rgb(var(--bright-accent))); } #search-top-box form[id="search-top-box-form"] { position: relative; height: initial; visibility: visible; width: 90%; display: flex; align-items: center; justify-content: center; } #search-top-box form[id="search-top-box-form"]::after { content: ""; position: absolute; width: calc(var(--base-font-size)*0.93333*1.5 + .5rem); height: 100%; top: 0; right: 0; pointer-events: none; background-color: rgb(var(--swatch-menutxt-light-color)); mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' data-prefix='fas' data-icon='search' class='svg-inline--fa fa-search fa-w-16' viewBox='0 0 512 512'%3E%3Cpath fill='%23fff' d='M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z'/%3E%3C/svg%3E"); mask-position: 50%; mask-size: 75%; mask-repeat: no-repeat; } #search-top-box form[id="search-top-box-form"] input { height: initial; top: initial; transform: initial; position: initial; appearance: initial; } #search-top-box form[id="search-top-box-form"]:focus-within input[type="text"]:hover, #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"]:hover, #search-top-box form[id="search-top-box-form"]:hover input[type="text"], #search-top-box form[id="search-top-box-form"] input[type="text"] { background: rgb(var(--medium-accent)); transition: inherit; color: rgb(var(--swatch-menutxt-light-color)); border-radius: var(--border-radius-width); } #search-top-box form[id="search-top-box-form"] input[type="text"], #search-top-box form[id="search-top-box-form"]:focus-within input[type="text"], #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] { height: initial; width: 100%; position: inherit; transform: inherit; border-width: 0.0625rem; cursor: inherit; color: rgb(var(--swatch-menutxt-light-color)); } #search-top-box form[id="search-top-box-form"] input[type="submit"], #search-top-box form[id="search-top-box-form"]:focus-within input[type="submit"], #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="submit"], #search-top-box form[id="search-top-box-form"] input[type="submit"]:hover, #search-top-box form[id="search-top-box-form"]:focus-within input[type="submit"]:hover, #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="submit"]:hover { appearance: auto; position: relative; background-color: rgb(var(--bright-accent)); background-image: initial; opacity: 1; width: calc(var(--base-font-size)*0.93333*1.5 + .5rem); box-shadow: 0 0 0 0.125rem rgb(var(--bright-accent)); border: none; border-left: 0.0625rem solid rgb(var(--swatch-primary-darkest)); border-color: rgb(var(--bright-accent)); padding: 0.25rem; margin: inherit; font-size: calc(var(--base-font-size)*0.93333*0.85); border-radius: var(--border-radius-width); transition: background-color .3s cubic-bezier(.4,0,.2,1),color .3s cubic-bezier(.4,0,.2,1); color: transparent; text-shadow: initial; } #search-top-box-input { background-color: rgba(var(--dark-accent)); } /* Mobile Topbar Styling */ #top-bar .mobile-top-bar { background-image: var(--gradient-background); background-color: rgb(var(--swatch-background)); background-attachment: fixed; background-position: 0 0; background-size: 100vw 300vh; } #top-bar > div.mobile-top-bar > div.open-menu > p > a { color: rgb(var(--swatch-important-text)) !important; } #top-bar div.mobile-top-bar > ul > li > ul { max-width: calc(100vw - (var(--topbar-height-on-mobile) * 1.5)); min-width: calc(100vw - (var(--topbar-height-on-mobile) * 1.5)); transform: translate(calc((-50% - (var(--topbar-height-on-mobile) * 1.5) / 8))); } #top-bar div.mobile-top-bar > ul > li:hover > ul, #top-bar div.mobile-top-bar > ul > li:active > ul { transform: translate(calc((-50% - (var(--topbar-height-on-mobile) * 1.5) / 8))); } #top-bar div.mobile-top-bar > ul > li:focus-within > ul { transform: translate(calc((-50% - (var(--topbar-height-on-mobile) * 1.5) / 8))); } #top-bar div.mobile-top-bar > ul > li > ul > li { --transition-timing: 100ms; --speedy-transition-timing: 200ms; color: rgb(var(--swatch-menutxt-light-color)); background-color: rgb(var(--swatch-menubg-black-color)); text-align: center; margin: 0; } #top-bar div.mobile-top-bar > ul > li > ul > li:nth-child(4n) > a, #top-bar div.mobile-top-bar > ul > li > ul > li:nth-child(4n-1) > a { background: rgba(var(--swatch-menubg-light-color),1); } #top-bar div.mobile-top-bar > ul > li > ul > li:nth-child(4n-2) > a, #top-bar div.mobile-top-bar > ul > li > ul > li:nth-child(4n-3) > a { background: rgba(var(--swatch-menubg-light-color),0.9); } #top-bar div.mobile-top-bar > ul > li > ul > li:nth-child(4n), #top-bar div.mobile-top-bar > ul > li > ul > li:nth-child(4n-1) { position: relative; transform-origin: top left; transform: perspective(350px) rotateX(-90deg) skew(0); } #top-bar div.mobile-top-bar > ul > li > ul > li:nth-child(4n-2), #top-bar div.mobile-top-bar > ul > li > ul > li:nth-child(4n-3) { position: relative; transform-origin: top right; transform: perspective(350px) rotateX(-90deg) skew(0) translateX(0.4375rem); } #top-bar div.mobile-top-bar > ul > li > ul > li::after, #top-bar div.mobile-top-bar > ul > li > ul:hover > li::after, #top-bar div.mobile-top-bar > ul > li > ul:active > li::after { content: " "; width: 50%; height: 90%; position: absolute; bottom: 0; right: 0; z-index: -1; filter: blur(0.0625rem); } #top-bar div.mobile-top-bar > ul > li > ul:focus-within > li::after { content: " "; width: 50%; height: 90%; position: absolute; bottom: 0; right: 0; z-index: -1; filter: blur(0.0625rem); } #top-bar div.mobile-top-bar > ul > li > ul > li:nth-child(4n)::after, #top-bar div.mobile-top-bar > ul > li > ul:hover > li:nth-child(4n)::after, #top-bar div.mobile-top-bar > ul > li > ul:active > li:nth-child(4n)::after { transform-origin: top left; background-image: linear-gradient(to bottom, rgba(var(--swatch-menubg-black-color),0) 0%, rgba(var(--swatch-menubg-black-color),0) 20%, rgba(var(--swatch-menubg-black-color),0.5) 50%, rgba(var(--swatch-menubg-black-color),1) 100%); transform: skew(-15deg) translateX(0.5rem); } #top-bar div.mobile-top-bar > ul > li > ul:focus-within > li:nth-child(4n)::after { transform-origin: top left; background-image: linear-gradient(to bottom, rgba(var(--swatch-menubg-black-color),0) 0%, rgba(var(--swatch-menubg-black-color),0) 20%, rgba(var(--swatch-menubg-black-color),0.5) 50%, rgba(var(--swatch-menubg-black-color),1) 100%); transform: skew(-15deg) translateX(0.5rem); } #top-bar div.mobile-top-bar > ul > li > ul > li:nth-child(4n-2)::after, #top-bar div.mobile-top-bar > ul > li > ul:hover > li:nth-child(4n-2)::after, #top-bar div.mobile-top-bar > ul > li > ul:active > li:nth-child(4n-2)::after { transform-origin: top left; background-image: linear-gradient(to top, rgba(var(--swatch-menubg-black-color),0) 0%, rgba(var(--swatch-menubg-black-color),0) 40%, rgba(var(--swatch-menubg-black-color),0.5) 70%, rgba(var(--swatch-menubg-black-color),1) 100%); transform: skew(15deg); } #top-bar div.mobile-top-bar > ul > li > ul:focus-within > li:nth-child(4n-2)::after { transform-origin: top left; background-image: linear-gradient(to top, rgba(var(--swatch-menubg-black-color),0) 0%, rgba(var(--swatch-menubg-black-color),0) 40%, rgba(var(--swatch-menubg-black-color),0.5) 70%, rgba(var(--swatch-menubg-black-color),1) 100%); transform: skew(15deg); } #top-bar div.mobile-top-bar > ul > li:hover > ul > li, #top-bar div.mobile-top-bar > ul > li:active > ul > li { transition: var(--transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) 0s; } #top-bar div.mobile-top-bar > ul > li:focus-within > ul > li { transition: var(--transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) 0s; } #top-bar div.mobile-top-bar > ul > li:hover > ul > li:nth-child(4n), #top-bar div.mobile-top-bar > ul > li:hover > ul > li:nth-child(4n-1), #top-bar div.mobile-top-bar > ul > li:active > ul > li:nth-child(4n), #top-bar div.mobile-top-bar > ul > li:active > ul > li:nth-child(4n-1) { transform: perspective(350px) rotateX(0deg) skew(10deg); } #top-bar div.mobile-top-bar > ul > li:focus-within > ul > li:nth-child(4n), #top-bar div.mobile-top-bar > ul > li:focus-within > ul > li:nth-child(4n-1) { transform: perspective(350px) rotateX(0deg) skew(10deg); } #top-bar div.mobile-top-bar > ul > li:hover > ul > li:nth-child(4n-2), #top-bar div.mobile-top-bar > ul > li:hover > ul > li:nth-child(4n-3), #top-bar div.mobile-top-bar > ul > li:active > ul > li:nth-child(4n-2), #top-bar div.mobile-top-bar > ul > li:active > ul > li:nth-child(4n-3) { transform: perspective(350px) rotateX(0deg) skew(-10deg) translateX(0.5rem); } #top-bar div.mobile-top-bar > ul > li:focus-within > ul > li:nth-child(4n-2), #top-bar div.mobile-top-bar > ul > li:focus-within > ul > li:nth-child(4n-3) { transform: perspective(350px) rotateX(0deg) skew(-10deg) translateX(0.5rem); } /* Brute Force Timing on Mobile Dropdown Will Need to be manually changed if dropdown # is altered */ /* SCPS */ #top-bar div.mobile-top-bar > ul > li:nth-of-type(1) > ul, #top-bar div.mobile-top-bar > ul > li:nth-of-type(1) > ul > li:nth-of-type(1), #top-bar div.mobile-top-bar > ul > li:nth-of-type(1) > ul > li:nth-of-type(2) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 5); } #top-bar div.mobile-top-bar > ul > li:nth-of-type(1) > ul > li:nth-of-type(3), #top-bar div.mobile-top-bar > ul > li:nth-of-type(1) > ul > li:nth-of-type(4) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 4); } #top-bar div.mobile-top-bar > ul > li:nth-of-type(1) > ul > li:nth-of-type(5), #top-bar div.mobile-top-bar > ul > li:nth-of-type(1) > ul > li:nth-of-type(6) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 3); } #top-bar div.mobile-top-bar > ul > li:nth-of-type(1) > ul > li:nth-of-type(7), #top-bar div.mobile-top-bar > ul > li:nth-of-type(1) > ul > li:nth-of-type(8) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 2); } #top-bar div.mobile-top-bar > ul > li:nth-of-type(1) > ul > li:nth-of-type(8), #top-bar div.mobile-top-bar > ul > li:nth-of-type(1) > ul > li:nth-of-type(10) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) var(--transition-timing); } #top-bar div.mobile-top-bar > ul > li:nth-of-type(1) > ul > li:nth-of-type(11), #top-bar div.mobile-top-bar > ul > li:nth-of-type(1) > ul > li:nth-of-type(12) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) 0ms; } /* Tales */ #top-bar div.mobile-top-bar > ul > li:nth-of-type(2) > ul, #top-bar div.mobile-top-bar > ul > li:nth-of-type(2) > ul > li:nth-of-type(1), #top-bar div.mobile-top-bar > ul > li:nth-of-type(2) > ul > li:nth-of-type(2) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) var(--transition-timing); } #top-bar div.mobile-top-bar > ul > li:nth-of-type(2) > ul > li:nth-of-type(3), #top-bar div.mobile-top-bar > ul > li:nth-of-type(2) > ul > li:nth-of-type(4) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) 0ms; } /* Library */ #top-bar div.mobile-top-bar > ul > li:nth-of-type(3) > ul, #top-bar div.mobile-top-bar > ul > li:nth-of-type(3) > ul > li:nth-of-type(1), #top-bar div.mobile-top-bar > ul > li:nth-of-type(3) > ul > li:nth-of-type(2) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 4); } #top-bar div.mobile-top-bar > ul > li:nth-of-type(3) > ul > li:nth-of-type(3), #top-bar div.mobile-top-bar > ul > li:nth-of-type(3) > ul > li:nth-of-type(4) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 3); } #top-bar div.mobile-top-bar > ul > li:nth-of-type(3) > ul > li:nth-of-type(5), #top-bar div.mobile-top-bar > ul > li:nth-of-type(3) > ul > li:nth-of-type(6) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 2); } #top-bar div.mobile-top-bar > ul > li:nth-of-type(3) > ul > li:nth-of-type(7), #top-bar div.mobile-top-bar > ul > li:nth-of-type(3) > ul > li:nth-of-type(8) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) var(--transition-timing); } #top-bar div.mobile-top-bar > ul > li:nth-of-type(3) > ul > li:nth-of-type(9), #top-bar div.mobile-top-bar > ul > li:nth-of-type(3) > ul > li:nth-of-type(10) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) 0ms; } /* Universe */ #top-bar div.mobile-top-bar > ul > li:nth-of-type(4) > ul, #top-bar div.mobile-top-bar > ul > li:nth-of-type(4) > ul > li:nth-of-type(1), #top-bar div.mobile-top-bar > ul > li:nth-of-type(4) > ul > li:nth-of-type(2) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 4); } #top-bar div.mobile-top-bar > ul > li:nth-of-type(4) > ul > li:nth-of-type(3), #top-bar div.mobile-top-bar > ul > li:nth-of-type(4) > ul > li:nth-of-type(4) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 3); } #top-bar div.mobile-top-bar > ul > li:nth-of-type(4) > ul > li:nth-of-type(5), #top-bar div.mobile-top-bar > ul > li:nth-of-type(4) > ul > li:nth-of-type(6) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 2); } #top-bar div.mobile-top-bar > ul > li:nth-of-type(4) > ul > li:nth-of-type(7), #top-bar div.mobile-top-bar > ul > li:nth-of-type(4) > ul > li:nth-of-type(8) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) var(--transition-timing); } #top-bar div.mobile-top-bar > ul > li:nth-of-type(4) > ul > li:nth-of-type(9), #top-bar div.mobile-top-bar > ul > li:nth-of-type(4) > ul > li:nth-of-type(10) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) 0ms; } /* GUIDES */ #top-bar div.mobile-top-bar > ul > li:nth-of-type(5) > ul, #top-bar div.mobile-top-bar > ul > li:nth-of-type(5) > ul > li:nth-of-type(1), #top-bar div.mobile-top-bar > ul > li:nth-of-type(5) > ul > li:nth-of-type(2) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 5); } #top-bar div.mobile-top-bar > ul > li:nth-of-type(5) > ul > li:nth-of-type(3), #top-bar div.mobile-top-bar > ul > li:nth-of-type(5) > ul > li:nth-of-type(4) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 4); } #top-bar div.mobile-top-bar > ul > li:nth-of-type(5) > ul > li:nth-of-type(5), #top-bar div.mobile-top-bar > ul > li:nth-of-type(5) > ul > li:nth-of-type(6) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 3); } #top-bar div.mobile-top-bar > ul > li:nth-of-type(5) > ul > li:nth-of-type(7), #top-bar div.mobile-top-bar > ul > li:nth-of-type(5) > ul > li:nth-of-type(8) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 2); } #top-bar div.mobile-top-bar > ul > li:nth-of-type(5) > ul > li:nth-of-type(8), #top-bar div.mobile-top-bar > ul > li:nth-of-type(5) > ul > li:nth-of-type(10) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) var(--transition-timing); } #top-bar div.mobile-top-bar > ul > li:nth-of-type(5) > ul > li:nth-of-type(11), #top-bar div.mobile-top-bar > ul > li:nth-of-type(5) > ul > li:nth-of-type(12) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) 0ms; } /* Hover Dropdowns do not need the same treatment */ #top-bar div.mobile-top-bar > ul > li:hover > ul, #top-bar div.mobile-top-bar > ul > li:active > ul, #top-bar div.mobile-top-bar > ul > li:hover > ul > li:nth-of-type(1), #top-bar div.mobile-top-bar > ul > li:active > ul > li:nth-of-type(1), #top-bar div.mobile-top-bar > ul > li:hover > ul > li:nth-of-type(2), #top-bar div.mobile-top-bar > ul > li:active > ul > li:nth-of-type(2) { transition-delay: 0ms; } #top-bar div.mobile-top-bar > ul > li:focus-within > ul, #top-bar div.mobile-top-bar > ul > li:focus-within > ul > li:nth-of-type(1), #top-bar div.mobile-top-bar > ul > li:focus-within > ul > li:nth-of-type(2) { transition-delay: 0ms; } #top-bar div.mobile-top-bar > ul > li:hover > ul > li:nth-of-type(3), #top-bar div.mobile-top-bar > ul > li:active > ul > li:nth-of-type(3), #top-bar div.mobile-top-bar > ul > li:hover > ul > li:nth-of-type(4), #top-bar div.mobile-top-bar > ul > li:active > ul > li:nth-of-type(4) { transition-delay: var(--transition-timing); } #top-bar div.mobile-top-bar > ul > li:focus-within > ul > li:nth-of-type(3), #top-bar div.mobile-top-bar > ul > li:focus-within > ul > li:nth-of-type(4) { transition-delay: var(--transition-timing); } #top-bar div.mobile-top-bar > ul > li:hover > ul > li:nth-of-type(5), #top-bar div.mobile-top-bar > ul > li:active > ul > li:nth-of-type(5), #top-bar div.mobile-top-bar > ul > li:hover > ul > li:nth-of-type(6), #top-bar div.mobile-top-bar > ul > li:active > ul > li:nth-of-type(6) { transition-delay: calc(var(--transition-timing) * 1.9); } #top-bar div.mobile-top-bar > ul > li:focus-within > ul > li:nth-of-type(5), #top-bar div.mobile-top-bar > ul > li:focus-within > ul > li:nth-of-type(6) { transition-delay: calc(var(--transition-timing) * 1.9); } #top-bar div.mobile-top-bar > ul > li:hover > ul > li:nth-of-type(7), #top-bar div.mobile-top-bar > ul > li:active > ul > li:nth-of-type(7), #top-bar div.mobile-top-bar > ul > li:hover > ul > li:nth-of-type(8), #top-bar div.mobile-top-bar > ul > li:active > ul > li:nth-of-type(8) { transition-delay: calc(var(--transition-timing) * 2.7); } #top-bar div.mobile-top-bar > ul > li:focus-within > ul > li:nth-of-type(7), #top-bar div.mobile-top-bar > ul > li:focus-within > ul > li:nth-of-type(8) { transition-delay: calc(var(--transition-timing) * 2.7); } #top-bar div.mobile-top-bar > ul > li:hover > ul > li:nth-of-type(9), #top-bar div.mobile-top-bar > ul > li:active > ul > li:nth-of-type(9), #top-bar div.mobile-top-bar > ul > li:hover > ul > li:nth-of-type(10), #top-bar div.mobile-top-bar > ul > li:active > ul > li:nth-of-type(10) { transition-delay: calc(var(--transition-timing) * 3.4); } #top-bar div.mobile-top-bar > ul > li:focus-within > ul > li:nth-of-type(9), #top-bar div.mobile-top-bar > ul > li:focus-within > ul > li:nth-of-type(10) { transition-delay: calc(var(--transition-timing) * 3.4); } #top-bar div.mobile-top-bar > ul > li:hover > ul > li:nth-of-type(11), #top-bar div.mobile-top-bar > ul > li:active > ul > li:nth-of-type(11), #top-bar div.mobile-top-bar > ul > li:hover > ul > li:nth-of-type(12), #top-bar div.mobile-top-bar > ul > li:active > ul > li:nth-of-type(12) { transition-delay: calc(var(--transition-timing) * 4); } #top-bar div.mobile-top-bar > ul > li:focus-within > ul > li:nth-of-type(11), #top-bar div.mobile-top-bar > ul > li:focus-within > ul > li:nth-of-type(12) { transition-delay: calc(var(--transition-timing) * 4); } #top-bar div.mobile-top-bar > ul > li:hover > ul > li:nth-of-type(13), #top-bar div.mobile-top-bar > ul > li:active > ul > li:nth-of-type(13), #top-bar div.mobile-top-bar > ul > li:hover > ul > li:nth-of-type(14), #top-bar div.mobile-top-bar > ul > li:active > ul > li:nth-of-type(14) { transition-delay: calc(var(--transition-timing) * 4.5); } #top-bar div.mobile-top-bar > ul > li:focus-within > ul > li:nth-of-type(13), #top-bar div.mobile-top-bar > ul > li:focus-within > ul > li:nth-of-type(14) { transition-delay: calc(var(--transition-timing) * 4.5); } #top-bar div.mobile-top-bar > ul > li:hover > ul > li:nth-of-type(15), #top-bar div.mobile-top-bar > ul > li:active > ul > li:nth-of-type(15), #top-bar div.mobile-top-bar > ul > li:hover > ul > li:nth-of-type(16), #top-bar div.mobile-top-bar > ul > li:active > ul > li:nth-of-type(16) { transition-delay: calc(var(--transition-timing) * 4.9); } #top-bar div.mobile-top-bar > ul > li:focus-within > ul > li:nth-of-type(15), #top-bar div.mobile-top-bar > ul > li:focus-within > ul > li:nth-of-type(16) { transition-delay: calc(var(--transition-timing) * 4.9); } #top-bar div.mobile-top-bar > ul > li:hover > ul > li:nth-of-type(17), #top-bar div.mobile-top-bar > ul > li:active > ul > li:nth-of-type(17), #top-bar div.mobile-top-bar > ul > li:hover > ul > li:nth-of-type(18), #top-bar div.mobile-top-bar > ul > li:active > ul > li:nth-of-type(18) { transition-delay: calc(var(--transition-timing) * 5.3); } #top-bar div.mobile-top-bar > ul > li:focus-within > ul > li:nth-of-type(17), #top-bar div.mobile-top-bar > ul > li:focus-within > ul > li:nth-of-type(18) { transition-delay: calc(var(--transition-timing) * 5.3); } #top-bar div.mobile-top-bar > ul > li:hover > ul > li:nth-of-type(19), #top-bar div.mobile-top-bar > ul > li:active > ul > li:nth-of-type(19) #top-bar div.mobile-top-bar > ul > li:hover > ul > li:nth-of-type(20), #top-bar div.mobile-top-bar > ul > li:active > ul > li:nth-of-type(20) { transition-delay: calc(var(--transition-timing) * 5.5); } #top-bar div.mobile-top-bar > ul > li:focus-within > ul > li:nth-of-type(19), #top-bar div.mobile-top-bar > ul > li:focus-within > ul > li:nth-of-type(20) { transition-delay: calc(var(--transition-timing) * 5.5); } }