@charset "UTF-8"; /*** The new CSS reset - version 1.11.3 (last updated 25.08.2024) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *, path, clipPath)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* Firefox: solve issue where nested ordered lists continue numbering from parent (https://bugzilla.mozilla.org/show_bug.cgi?id=1881517) */ ol { counter-reset: revert; } /* For images to not be able to exceed their container */ /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } input::-webkit-search-cancel-button { display: none; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::-moz-placeholder { color: unset; } ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } /** * @license * MyFonts Webfont Build ID 3867246, 2020-12-16T11:57:38-0500 * * The fonts listed in this notice are subject to the End User License * Agreement(s) entered into by the website owner. All other parties are * explicitly restricted from using the Licensed Webfonts(s). * * You may obtain a valid license at the URLs below. * * Webfont: Crucial Medium by Jehoo Creative * URL: https://www.myfonts.com/collections/jehoo-creative-foundry * © 2025 MyFonts Inc. */ @font-face { font-family: "Crucial"; src: url("../fonts/crucial/Crucial-Medium.woff2") format("woff2"), url("../fonts/crucial/Crucial-Medium.woff") format("woff"); } /** * @license * * Font Family: Supreme * Designed by: Jérémie Hornus, Ilya Naumoff * URL: https://www.fontshare.com/fonts/supreme * © 2025 Indian Type Foundry * * Supreme Variable (Variable font) * Supreme VariableItalic (Variable font) * */ /** * This is a variable font * You can control variable axes as shown below: * font-variation-settings: wght 800.0; * * available axes: 'wght' (range from 100.0 to 800.0 */ @font-face { font-family: "Supreme"; src: url("../fonts/supreme/Supreme-Variable.woff2") format("woff2"), url("../fonts/supreme/Supreme-Variable.woff") format("woff"), url("../fonts/supreme/Supreme-Variable.ttf") format("truetype"); font-weight: 100 800; font-display: swap; font-style: normal; } /** * This is a variable font * You can control variable axes as shown below: * font-variation-settings: wght 800.0; * * available axes: 'wght' (range from 100.0 to 800.0 */ @font-face { font-family: "Supreme"; src: url("../fonts/supreme/Supreme-VariableItalic.woff2") format("woff2"), url("../fonts/supreme/Supreme-VariableItalic.woff") format("woff"), url("../fonts/supreme/Supreme-VariableItalic.ttf") format("truetype"); font-weight: 100 800; font-display: swap; font-style: italic; } /* * https://remixicon.com * https://github.com/Remix-Design/RemixIcon * Copyright RemixIcon.com * Released under the Apache License Version 2.0 */ :root { --grid-columns: 12; --grid-gap: 1.6rem; --grid-gap-block: 1.6rem; --grid-edge: 2.4rem; --header-height: 8rem; --footer-height: 4rem; --breadcrumb-height: 3.2rem; --layout-max-width: 172rem; --container-columns: 12; --column-size: 12; --minus-gap: 1; --cta-height: 4.8rem; --radius--default: 3rem; --ratio--square: 1/1; --ratio--2x1: 2/1; --ratio--3x2: 3/2; --ratio--5x3: 5/3; --ratio--7x3: 7/3; --ratio--16x9: 16/9; --ratio--21x9: 21/9; --shadow--default: 0 0 2rem hsl(from var(--black, black) h s l/15%); --white: hsl(0, 0%, 100%); --black: hsl(0, 0%, 0%); --hue: 180; --saturation: 10%; --luminosity: 0%; --luminosity2: 0; --luminosity-factor: 1; --meta-white: oklch(1 0.01 var(--hue)); --meta-black: oklch(0.15 0.08 var(--hue)); --meta-color: oklch(0.5 0.04 var(--hue)); --color-glass: oklch(from color-mix(in oklch shorter hue, var(--meta-color), var(--theme-light, var(--meta-white)) 95%) l 0.03 h/3%); --color-darker: oklch(from color-mix(in oklch shorter hue, var(--meta-color), var(--theme-invert, var(--meta-black)) 93%) l 0.005 h); --color-darker--always: oklch(from color-mix(in oklch shorter hue, var(--meta-color), var(--meta-black) 93%) l 0.005 h); --color-dark: oklch(from color-mix(in oklch shorter hue, var(--meta-color), var(--theme-invert, var(--meta-black)) 75%) l 0.02 h); --color-deeper: oklch(from color-mix(in oklch shorter hue, var(--meta-color), var(--theme-invert, var(--meta-black)) 35%) l 0.03 h); --color-deep: oklch(from color-mix(in oklch shorter hue, var(--meta-color), var(--theme-invert, var(--meta-black)) 10%) calc(l + 0.14) 0.045 h); --color-medium: oklch(from color-mix(in oklch shorter hue, var(--meta-color), var(--theme-color, var(--meta-black)) 60%) calc(l + 0.35) 0.04 h); --color-light: oklch(from color-mix(in oklch shorter hue, var(--meta-color), var(--theme-light, var(--meta-white)) 80%) l 0.02 h); --color-light--always: oklch(from color-mix(in oklch shorter hue, var(--meta-color), var(--meta-white) 80%) l 0.02 h); --color-lighter: oklch(from color-mix(in oklch shorter hue, var(--meta-color), var(--theme-light, var(--meta-white)) 85%) l 0.05 h); --color-bright: oklch(from color-mix(in oklch shorter hue, var(--meta-color), var(--theme-light, var(--meta-white)) 95%) l 0.01 h); --root-font-size: 16; --scale-font-size: 10; --font-size: 1.6rem; --line-height: 1.5em; --title-font: Crucial, serif; --text-font: Supreme, sans-serif; --text-color: var(--text-color--light); --text-color--darker: var(--color-darker); --text-color--deep: var(--color-deep); --text-color--medium: var(--color-medium); --text-color--light: var(--color-light); --text-color--bright: var(--color-bright); --title-color: var(--title-color--bright); --title-color--deep: var(--color-deep); --title-color--medium: var(--color-medium); --title-color--light: var(--color-light); --title-color--bright: var(--color-bright); --stroke-color: var(--stroke-color--dark); --stroke-color--dark: var(--color-dark); --stroke-color--deeper: var(--color-deeper); --stroke-color--medium: var(--color-medium); --stroke-color--bright: var(--color-bright); --stroke-color--light: var(--color-light); --background-color: var(--background-color--darker); --background-color--glass-darker: hsl(from var(--color-darker) h s l / 75%); --background-color--darker: var(--color-darker); --background-color--dark: var(--color-dark); --background-color--lighter: var(--color-lighter); --background-color--glass: var(--color-glass); --icon-color: var(--text-color); --transition-property: all; --transition-easing: linear(0, 0.002, 0.01 3.6%, 0.034, 0.074 9.1%, 0.128 11.4%, 0.194 13.4%, 0.271 15%, 0.344 16.1%, 0.544, 0.66 20.6%, 0.717 22.4%, 0.765 24.6%, 0.808 27.3%, 0.845 30.4%, 0.883 35.1%, 0.916 40.6%, 0.942 47.2%, 0.963 55%, 0.979 64%, 0.991 74.4%, 0.998 86.4%, 1); --transition-duration: 0.65s; --transition: var(--transition-property) var(--transition-easing) var(--transition-duration) var(--transition-delay, 0s); } @media screen and ( min-width: 48em ) { :root { --header-height: 4rem; } } :root { --z-index-content: 50; --z-index-lines: 100; --z-index-pagination: 150; --z-index-curtain: 200; --z-index-header: 250; --z-index-header-nav: 300; } html, body { font-family: var(--text-font); font-size: calc(var(--scale-font-size, var(--root-font-size, 16)) / var(--root-font-size, 16) * 100%); font-optical-sizing: auto; font-weight: 300; text-wrap: pretty; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .page__wrapper, .dialog { font-size: var(--font-size); line-height: var(--line-height); } :where(*:not(.icon)) { color: var(--text-color); } em { font-style: italic; } strong { font-weight: 700; } abbr { text-decoration: underline; text-underline-offset: 0.16em; text-decoration-thickness: 0.1rem; text-decoration-style: dotted; } html, body { background: var(--background-color); color: var(--text-color); } ::-moz-selection { color: var(--selection-color, var(--background-color)); background: var(--selection-background, var(--text-color)); } ::selection { color: var(--selection-color, var(--background-color)); background: var(--selection-background, var(--text-color)); } .theme--light { --luminosity: 100%; --luminosity-factor: -1; --title-deg: -29deg; --theme-invert: var(--meta-white); --theme-light: var(--meta-black); } .flex { display: flex; flex-wrap: wrap; align-content: flex-start; } .flex--row { gap: var(--grid-gap-block) var(--grid-gap); } .flex--row > :where(*:not([class*=col-])) { flex: 0 0 100%; } .flex > [class*=col-] { flex: var(--width, 0 0 calc(((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1)) / var(--container-columns) * var(--column-size) + var(--grid-gap) * (var(--column-size) - var(--minus-gap)) + var(--grid-offset, 0%))); min-width: var(--min-width, calc(((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1)) / var(--container-columns) * var(--column-size) + var(--grid-gap) * (var(--column-size) - var(--minus-gap)) + var(--grid-offset, 0%))); } .grid { display: grid; gap: 0 var(--grid-gap); grid-template-columns: repeat(var(--container-columns, var(--grid-columns)), 1fr); grid-auto-flow: column; } .grid > [class*=col-] { grid-column-end: span clamp(1, var(--column-size), var(--container-columns)); } .grid > :where(*:not([class*=col-])) { grid-column: 1/-1; } *:not(.flex, .grid) > [class*=col-] { width: calc(((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1)) / var(--container-columns) * var(--column-size) + var(--grid-gap) * (var(--column-size) - var(--minus-gap)) + var(--grid-offset, 0%)); } .col-demi { --column-size: calc(var(--container-columns) * 0.5); } .first { order: -1; } html { background: var(--background-color); } html, body { overflow-x: hidden; } body::before, body::after { content: ""; display: block; width: 0.1rem; height: 100vh; height: 100dvh; background: var(--stroke-color); position: absolute; top: 0; z-index: var(--z-index-lines); } body::before { left: var(--grid-edge); } body::after { right: var(--grid-edge); } .page__wrapper { display: grid; grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr) auto; padding: calc(var(--grid-edge) * 0.5) var(--grid-edge); grid-template-areas: "header" "content" "footer"; width: 100vw; width: 100dvw; height: 100vh; height: 100dvh; overflow: hidden; position: relative; } @media screen and ( min-width: 48em ) { .page__wrapper { padding: var(--grid-edge); } } .page__wrapper:has(.page__breadcrumb) { --content-padding-block: 0; } .page__wrapper::before { content: ""; display: block; width: 100%; height: 100%; background: var(--background-color--glass-darker); backdrop-filter: blur(2.4rem); position: absolute; top: 0; left: 0; z-index: var(--z-index-curtain); transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } .page__header { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: header; max-width: 100vw; max-width: 100dvw; position: relative; z-index: var(--z-index-header); } .page__content { -ms-grid-row: 2; -ms-grid-column: 1; grid-area: content; position: relative; z-index: var(--z-index-content); } .page__footer { -ms-grid-row: 3; -ms-grid-column: 1; grid-area: footer; } img { display: block; width: 100%; -webkit-user-select: none; -moz-user-select: none; user-select: none; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; } .section :where(h1, h2, h3, h4, h5, h6) { font-family: var(--title-font); color: var(--title-color); } .title--alt { font-family: var(--text-font); font-weight: 400; color: var(--title-color--light); } .title--gradient { background: linear-gradient(var(--title-deg, 119deg), var(--title-color), var(--title-color--medium)); -webkit-background-clip: text; background-clip: text; color: transparent; position: relative; } .title--gradient::before { content: attr(data-text); display: inline-block; width: 100%; padding-block: inherit; margin-block: inherit; opacity: 0.75; color: var(--title-color--deep); position: absolute; left: 0; top: 0.3em; z-index: -2; } .logo__theme { fill: var(--text-color--bright); } [class^=ri-], [class*=ri-] { font-family: "remixicon" !important; font-style: normal; font-weight: normal !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } [class^=ri-]::before, [class*=ri-]::before { color: var(--icon-color); transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } .icon--menu { display: inline-block; width: 1.2rem; height: 100%; position: relative; } .icon--menu::before, .icon--menu::after { content: ""; display: block; width: 100%; height: 0.1rem; background: var(--icon-color); position: absolute; top: 50%; left: 50%; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } .icon--menu::before { translate: -50% -250%; } .icon--menu::after { translate: -50% 150%; } .button { --section-font-size: 12; --section-font-size-min: 1.2rem; display: inline-flex; padding: 0.75em 0; gap: 0.75em; color: var(--text-color--light); border-block-end: 0.1rem solid var(--stroke-color--medium); font-weight: 550; text-transform: uppercase; letter-spacing: 0.125em; line-height: 1.2em; --transition-property: color, border-color; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } @media (hover: hover) { .button:hover { color: var(--color-bright); border-color: var(--stroke-color--bright); } } .button [class*=ri-] { outline: 0 !important; font-size: 1.25em !important; margin: 0 !important; } .header { --text-color: var(--text-color--medium); --icon-color: var(--text-color--medium); display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; grid-template-areas: "title space school" "nav nav nav"; align-items: center; height: var(--header-height); border-block: 0.1rem solid var(--stroke-color); } @media screen and ( min-width: 48em ) { .header { grid-template-rows: auto; grid-template-areas: "title nav school"; } } .header__title { -ms-grid-row: 1; -ms-grid-column: 1; --text-color: var(--text-color--bright); grid-area: title; align-self: stretch; display: flex; align-items: center; border-inline-end: 0.1rem solid var(--stroke-color); outline: 0.1rem solid transparent; background: linear-gradient(var(--title-deg, 119deg), var(--title-color), var(--title-color--medium)); -webkit-background-clip: text; background-clip: text; font-weight: 750; color: transparent; position: relative; z-index: 2; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } .header__title abbr { text-decoration: none; } @media (hover: hover) { .header__title:hover { outline-color: var(--stroke-color--bright); } } .header__title, .header__button { height: 100%; padding-inline: 1.6rem; -webkit-user-select: none; -moz-user-select: none; user-select: none; font-size: 1.2rem; text-transform: uppercase; letter-spacing: 0.125em; line-height: 1.2em; } .header__button { display: flex; width: 100%; align-items: center; gap: 1em; outline: 0.1rem solid transparent; cursor: pointer; font-weight: 550; position: relative; z-index: 3; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } .header__button span { transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } @media (hover: hover) { .header__button:hover { outline-color: var(--stroke-color--bright); } } .header__button * { pointer-events: none; } .header__button .icon { order: -1; } .header__nav { -ms-grid-row: 2; -ms-grid-column: 1; -ms-grid-column-span: 3; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto; grid-template-areas: "themes subjects"; align-self: stretch; grid-area: nav; position: relative; } .footer > .header__nav { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 1; } @media screen and ( max-width: 47.9375em ) { .header__nav { border-block-start: 0.1rem solid var(--stroke-color); } } .header__nav .header__overflow { width: calc(100% + 0.4rem); height: calc(100vh - var(--grid-edge) - var(--header-height)); position: absolute; z-index: 2; left: -0.2rem; overflow-y: scroll; overscroll-behavior-y: none; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; scrollbar-width: none; } .header__nav .header__list { width: calc(100% - 0.2rem); translate: 0.1rem 0; } .header__nav .header__list::before { content: ""; display: block; width: 100%; height: 100%; border: 0.1rem solid var(--stroke-color); position: absolute; top: 0; left: 0; } .header__nav .header__item { --text-color: var(--text-color--medium); font-size: max(3.3333333333vw * var(--ratio, 1), 2.4rem); line-height: 1.1em; font-weight: 200; position: relative; } .header__nav .header__item::before { content: ""; display: block; width: 100%; height: 100%; background: var(--background-color--glass); clip-path: rect(1.2rem calc(100% - 1.2rem) calc(100% - 1.2rem) 1.2rem round 1.2rem); opacity: 0; pointer-events: none; position: absolute; top: 0; left: 0; z-index: -1; } .header__nav .header__item a { display: block; padding: 0.8333333333em; position: relative; z-index: 2; } .header__nav .header__item a::after { content: ""; display: block; width: 100%; height: 100%; border: 0.1rem solid var(--stroke-color--bright); pointer-events: none; opacity: 0; position: absolute; top: 0; left: 0; z-index: 2; --transition-duration: 0.32s; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } .header__nav .header__item.active { --text-color: var(--text-color--bright); } .header__nav .header__item.active::before { opacity: 1; } @media (hover: hover) { .header__nav .header__item:hover a::after { opacity: 1; } } .header__nav .header__item + .header__item { border-block-start: 0.1rem solid var(--stroke-color); } .header__themes { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: themes; border-inline-end: 0.1rem solid var(--stroke-color); } .header__themes .header__list { counter-reset: number; } .header__themes .header__item { counter-increment: number; } .header__themes .header__item a { display: flex; gap: 0.5em; } .header__themes .header__item a::before { content: counter(number) "."; } .header__subjects { -ms-grid-row: 1; -ms-grid-column: 2; grid-area: subjects; flex: 1; } @media screen and ( min-width: 48em ) { .header__subjects { position: relative; } } .header__school { -ms-grid-row: 1; -ms-grid-column: 3; grid-area: school; display: flex; align-items: center; justify-items: center; padding-inline: 1.6rem; height: 100%; border-inline-start: 0.1rem solid var(--stroke-color); outline: 0.1rem solid transparent; position: relative; --transition-property: outline-color; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } @media (hover: hover) { .header__school:hover { outline-color: var(--stroke-color--bright); z-index: 2; } } .header__school .logo { height: 1.6rem; } .row { display: grid; grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr); height: 100%; padding: var(--grid-edge); overflow: hidden; } .column { grid-column: 1/-1; grid-row: 1/-1; display: grid; grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr); height: 100%; } @keyframes spin { 0% { rotate: 0deg; } 100% { rotate: 360deg; } } .section { --section-background: var(--background-color--glass); --section-font-size: 32; --section-font-size-min: 1.6rem; grid-column: 1/-1; grid-row: 1/-1; height: 100%; max-height: 100%; text-align: center; font-weight: 350; line-height: 1.5; position: relative; z-index: 2; } .section * { font-size: max(var(--section-font-size) / 1440 * 100vw * var(--ratio), var(--section-font-size-min)); } .section::before { content: ""; display: block; width: 100%; height: 100%; background: var(--section-background); backdrop-filter: blur(2.4rem); border-radius: 1.6rem; pointer-events: none; position: absolute; top: 0; left: 0; z-index: -1; } .section h1 { --section-font-size: 120; } .section h2 { --section-font-size: 96; } .section h3 { --section-font-size: 80; } .section h4 { --section-font-size: 64; } .section h5 { --section-font-size: 56; } .section h6 { --section-font-size: 48; } .section :where(h1, h2, h3, h4, h5, h6) { font-size: max(var(--section-font-size) / 1440 * 100vw * var(--ratio), 1.8rem); line-height: 1em; } .section :where(h1, h2, h3, h4, h5, h6):not(.title--alt) { margin-block: -0.3em; padding-block: 0.3em; } .section *:not(h1, h2, h3, h4, h5, h6) { font-feature-settings: "dlig" on; } :where(.section > * + *) { margin-block-start: 0.75em; } .section .giant { --section-font-size: 144; } .section .xxxl { --section-font-size: 120; } .section .xxl { --section-font-size: 96; } .section .xl { --section-font-size: 80; } .section .lg { --section-font-size: 64; } .section .md { --section-font-size: 56; } .section .sm { --section-font-size: 48; } .section .xs { --section-font-size: 40; } .section .xxs { --section-font-size: 32; } .section .xxs-mid { --section-font-size: 28; } .section .xxxs { --section-font-size: 24; } .section .pygmy { --section-font-size: 21; } .section .lilliputian { --section-font-size-min: 0px; --section-font-size: 6; } .section strong { --text-color: var(--text-color--bright); font-weight: 700; } .section mark { --selection-background: var(--text-color--light); --text-color: var(--text-color--darker); background: var(--background-color--lighter); padding-inline: 0.25em; } .section small { --section-font-size: 24; font-style: italic; } .section strong, .section em, .section abbr, .section a:not([class]) { --text-color: var(--text-color--bright); } .section em, .section abbr, .section a:not([class]) { font-weight: 400; } .section iframe { width: 100%; height: 100%; } .section code { flex: 1; width: 100%; max-width: 100%; max-height: 100%; } .section video { flex: 1; max-width: 100%; max-height: 100%; } .section a:has(img) { display: flex; align-items: center; } .section a:has(img), .section img { width: auto; height: auto; flex: 1; max-width: 100%; max-height: 100%; } .section img.top { -o-object-position: center 20%; object-position: center 20%; } .section:not(.section--background) img { -o-object-fit: contain; object-fit: contain; } .section code { flex: 0; } .section code.syntax-highlight, .section code.syntax-highlight button, .section div.syntax-highlight, .section div.syntax-highlight button { --section-font-size: 19; } .section .syntax { display: grid; grid-template-columns: 1fr auto; align-items: start; -moz-column-gap: 1em; column-gap: 1em; } .section .syntax > * { grid-row: 1/-1; } .section .syntax .buttons { grid-column: span 1/-1; position: static !important; } .section .syntax pre { overflow: scroll; } .section ul li::before { content: "•"; margin-inline-end: 0.5em; } .section ol { counter-reset: numlist; } .section ol li::before { counter-increment: numlist; content: counter(numlist) "."; margin-inline-end: 0.5em; color: var(--text-color); } .section ul, .section ol { text-wrap: balance; } .section .pros li::before { content: "+"; } .section .cons li::before { content: "-"; } .section pre { text-align: left; } .section a:not([class]) { text-decoration: underline; text-underline-offset: 0.16em; text-decoration-thickness: 0.1rem; text-decoration-style: solid; --transition-property: text-underline-offset; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } @media (hover: hover) { .section a:not([class]):hover { text-underline-offset: 0.34em; } } .section sup { vertical-align: super; } .section i:has(svg) { display: inline-flex; vertical-align: middle; border: 0.1rem solid var(--stroke-color--deeper); border-radius: 0.25em; } .section i:has(svg) svg { width: 1.3em; } .section i:has(svg) path { --color-icon: var(--text-color); } .section [class*=ri-] { display: inline-flex; align-items: center; justify-content: center; aspect-ratio: 1/1; width: 1lh; margin-inline-end: 0.5ch; outline: 0.1rem solid var(--stroke-color--deeper); border-radius: 0.25em; font-size: 0.75em; color: var(--text-color); } .section [class*=ri-]::before { color: var(--text-color); } .section .align-left { text-align: left; } .section .twitter-tweet, .section .bluesky-embed { width: 100%; max-height: 100%; padding: max(2.7777777778vw * var(--ratio), var(--grid-edge)); margin: 0 !important; -webkit-mask-image: linear-gradient(to bottom, transparent, black calc(2.7777777778vw * var(--ratio)), black, black calc(100% - 2.7777777778vw * var(--ratio)), transparent); mask-image: linear-gradient(to bottom, transparent, black calc(2.7777777778vw * var(--ratio)), black, black calc(100% - 2.7777777778vw * var(--ratio)), transparent); overflow: hidden; position: absolute; top: 50%; left: 50%; translate: -50% -50%; overflow-y: scroll; overscroll-behavior-y: none; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; scrollbar-width: none; } .section__iframe { flex: 1; width: 100%; max-width: 100%; max-height: 100%; outline: 0.1rem solid var(--stroke-color); outline-offset: -0.1rem; position: relative; z-index: 2; } .section__iframe::before { content: ""; display: block; width: 1.6rem; height: 1.6rem; border: 0.2rem solid var(--stroke-color--medium); border-block-start-color: transparent; border-radius: 10rem; position: absolute; top: 50%; left: 50%; translate: -50% -50%; z-index: -1; animation: spin 1s linear infinite; } .section__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5em; } * + .section__links { margin-block-start: 1em; } .section--default { display: flex; flex-direction: column; align-items: center; justify-content: center; padding-inline: max(10vw * var(--ratio), var(--grid-edge)); padding-block: max(2.2222222222vw * var(--ratio), var(--grid-edge)); } @media screen and ( max-width: 47.9375em ) { .section--default { padding-inline: max(3.3333333333vw * var(--ratio), var(--grid-edge)); padding-block: max(1.6666666667vw * var(--ratio), var(--grid-edge)); } } .section--background img { width: 100%; height: 100%; margin: 0; border-radius: 1.6rem; position: absolute; top: 0; left: 0; z-index: -1; } .section--background img:not(.full) { opacity: 0.3; } .section__pros-cons { width: 100%; } .code__wrapper { --section-font-size: 18; --text-color: var(--color-light--always); display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto; grid-template-areas: "tabs" "syntaxes"; gap: 1em; justify-items: start; width: 100%; max-height: 100%; } * + .code__wrapper { margin-block-start: 1.5em; } .code__tabs { -ms-grid-row: 1; -ms-grid-column: 1; --section-font-size: 14; --section-font-size-min: 1.2rem; grid-area: tabs; display: flex; gap: 1em; } .code__tab { --text-color: var(--text-color--medium); display: inline-flex; align-items: center; justify-content: center; padding: 0.5em 1em; cursor: pointer; outline: 0.1rem solid var(--stroke-color--deeper); text-transform: uppercase; letter-spacing: 0.125em; line-height: 1; font-weight: 550; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } .code__tab.active { --text-color: var(--text-color--bright); outline-color: var(--stroke-color--light); } @media (hover: hover) { .code__tab:hover { outline-color: var(--stroke-color--light); } } .code__syntaxes { -ms-grid-row: 3; -ms-grid-column: 1; grid-area: syntaxes; width: 100%; max-height: 100%; padding: 1em; background: var(--color-darker--always); overflow: scroll; outline: 0.1rem solid var(--stroke-color--deeper); } .code__syntax { margin: 0; } .code__syntax:not(.active) { display: none; } .code__syntax:not(.no-color) .hljs { --hue: 320; --hue-rotation: 60; --hue-step: 75; --luminosity: .85; --chroma: .4; } .code__syntax:not(.no-color) .hljs-comment { --text-color: var(--text-color--deep); font-style: italic; } .code__syntax:not(.no-color) .hljs-name, .code__syntax:not(.no-color) .hljs-title { --text-color: oklch(from var(--color-light) var(--luminosity,.7) var(--chroma,.4) calc(var(--hue) + var(--hue-rotation)) ); } .code__syntax:not(.no-color) .hljs-attr, .code__syntax:not(.no-color) .hljs-keyword, .code__syntax:not(.no-color) .hljs-selector-id { --text-color: oklch(from var(--color-light) var(--luminosity,.7) var(--chroma,.4) calc(var(--hue) + var(--hue-step) + var(--hue-rotation)) ); } .code__syntax:not(.no-color) .hljs-string, .code__syntax:not(.no-color) .hljs-selector-class { --text-color: oklch(from var(--color-light) var(--luminosity,.7) var(--chroma,.4) calc(var(--hue) + var(--hue-step) * 2 + var(--hue-rotation)) ); } .code__syntax:not(.no-color) .hljs-number { --text-color: oklch(from var(--color-light) var(--luminosity,.7) var(--chroma,.4) calc(var(--hue) + var(--hue-step) * 3 + var(--hue-rotation)) ); } .code__syntax:not(.no-color) .hljs-meta, .code__syntax:not(.no-color) .hljs-property { --text-color: oklch(from var(--color-light) var(--luminosity,.7) var(--chroma,.4) calc(var(--hue) + var(--hue-step) * 4 + var(--hue-rotation) ) ); } .code__syntax:not(.no-color) .hljs-literal, .code__syntax:not(.no-color) .hljs-attribute { --text-color: oklch(from var(--color-light) var(--luminosity,.7) var(--chroma,.4) calc(var(--hue) + var(--hue-step) * 5 + var(--hue-rotation)) ); } .pagination { --text-color: var(--text-color--medium); padding-inline: 1em; background: hsl(from var(--color-darker) h s l/5%); outline: 0.1rem solid var(--stroke-color); backdrop-filter: blur(2.4rem); pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; font-size: 1.2rem; font-weight: 500; letter-spacing: 0.5ch; position: absolute; z-index: var(--z-index-pagination); } .pagination--v { top: 50%; left: var(--grid-edge); translate: -50% 0; rotate: -90deg; } .pagination--h { bottom: calc(var(--grid-edge) + var(--footer-height)); left: 50%; translate: -50% 50%; } @media screen and ( max-width: 47.9375em ) { .pagination--h { bottom: calc(var(--grid-edge) * 0.5 + var(--footer-height)); } } .footer { display: grid; grid-template-columns: auto auto 1fr auto auto; grid-template-rows: auto; grid-template-areas: "nav assets space actions information"; align-items: center; height: var(--footer-height); outline: 0.1rem solid var(--stroke-color); outline-offset: -0.1rem; } .footer__nav, .footer__assets, .footer__actions, .footer__information { display: flex; padding-inline: 1.2rem; } .footer__nav button, .footer__nav a, .footer__assets button, .footer__assets a, .footer__actions button, .footer__actions a, .footer__information button, .footer__information a { --icon-color: var(--text-color--medium); display: flex; height: var(--footer-height); align-items: center; justify-content: center; aspect-ratio: 1/1; border-block: 0.1rem solid transparent; cursor: pointer; position: relative; z-index: 2; font-size: 1.9rem; } .footer__nav button *, .footer__nav a *, .footer__assets button *, .footer__assets a *, .footer__actions button *, .footer__actions a *, .footer__information button *, .footer__information a * { pointer-events: none; } @media (hover: hover) { .footer__nav button:not(.hidden):hover, .footer__nav a:not(.hidden):hover, .footer__assets button:not(.hidden):hover, .footer__assets a:not(.hidden):hover, .footer__actions button:not(.hidden):hover, .footer__actions a:not(.hidden):hover, .footer__information button:not(.hidden):hover, .footer__information a:not(.hidden):hover { --icon-color: var(--text-color--bright); } .footer__nav button:not(.hidden):hover::before, .footer__nav a:not(.hidden):hover::before, .footer__assets button:not(.hidden):hover::before, .footer__assets a:not(.hidden):hover::before, .footer__actions button:not(.hidden):hover::before, .footer__actions a:not(.hidden):hover::before, .footer__information button:not(.hidden):hover::before, .footer__information a:not(.hidden):hover::before { opacity: 1; scale: 1; } } .footer__nav button::before, .footer__nav a::before, .footer__assets button::before, .footer__assets a::before, .footer__actions button::before, .footer__actions a::before, .footer__information button::before, .footer__information a::before { content: ""; display: block; width: var(--footer-height); height: var(--footer-height); border-block: 0.1rem solid var(--stroke-color--medium); background: var(--background-color--dark); opacity: 0; pointer-events: none; position: absolute; top: -0.1rem; left: 0; z-index: -1; scale: 0 1; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } .footer__nav { -ms-grid-row: 2; -ms-grid-column: 1; -ms-grid-column-span: 3; grid-area: nav; border-inline-end: 0.1rem solid var(--stroke-color); } .footer > .footer__nav { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 1; } .footer__assets { -ms-grid-row: 1; -ms-grid-column: 2; grid-area: assets; border-inline-end: 0.1rem solid var(--stroke-color); } .footer__actions { -ms-grid-row: 1; -ms-grid-column: 4; grid-area: actions; border-inline: 0.1rem solid var(--stroke-color); } .footer__information { -ms-grid-row: 1; -ms-grid-column: 5; grid-area: information; } @media screen and ( min-width: 48em ){ .header__title { -ms-grid-row: 1; -ms-grid-column: 1; } .header__nav { -ms-grid-row: 1; -ms-grid-column: 2; -ms-grid-column-span: 1; } .header__school { -ms-grid-row: 1; -ms-grid-column: 3; } .footer__nav { -ms-grid-row: 1; -ms-grid-column: 2; -ms-grid-column-span: 1; } } /* * Syntax.js Library v3.1.0 * * Copyright 2024 Bunoon * Released under the MIT License */ :root { --syntax-js-color-keyword: #a71500; --syntax-js-color-keyword: hsl(from var(--color-deep) 340 80% l); --syntax-js-color-value: hsl(from var(--color-deep) 50 80% l); --syntax-js-color-attribute: hsl( from var(--color-deep) 270 80% calc(var(--luminosity) + 60% * var(--luminosity-factor)) ); --syntax-js-color-keyword-hover: #ff0000; --syntax-js-color-value-hover: #ffac1c; --syntax-js-color-attribute-hover: #a656f5; --syntax-js-color-comment: hsl( from var(--color-deep) 150 15% calc(var(--luminosity) + 40% * var(--luminosity-factor)) ); --syntax-js-color-multi-line-comment: var(--syntax-js-color-comment); --syntax-js-color-string: hsl( from var(--color-deep) 130 80% calc(var(--luminosity) + 70% * var(--luminosity-factor)) ); --syntax-js-color-multi-line-string: var(--syntax-js-color-string); --syntax-js-color-black: var(--text-color); --syntax-js-color-white: #f5f5f5; --syntax-js-color-dark-gray: #808080; --syntax-js-color-gray: #bbbbbb; --syntax-js-color-lighter-gray: #c0c0c0; --syntax-js-container-background-color: var(--background-color--glass); --syntax-js-container-border-color: var(--syntax-js-color-black); --syntax-js-container-syntax-background-color: var( --background-color--glass ); --syntax-js-container-syntax-border-color: #cccccc; --syntax-js-container-numbers-background-color: #dddddd; --syntax-js-container-numbers-border-color: var(--syntax-js-color-gray); --syntax-js-container-description-background-color: var( --syntax-js-container-numbers-background-color ); --syntax-js-container-description-border-color: var( --syntax-js-container-numbers-border-color ); --syntax-js-tab-background-color: var(--syntax-js-color-white); --syntax-js-tab-text-color: var(--syntax-js-color-black); --syntax-js-tab-border-color: var(--syntax-js-color-black); --syntax-js-tab-active-background-color: var(--syntax-js-color-black); --syntax-js-tab-active-text-color: var(--syntax-js-color-white); --syntax-js-tab-active-border-color: var(--syntax-js-color-black); --syntax-js-tab-hover-background-color: var( --syntax-js-container-numbers-background-color ); --syntax-js-tab-hover-text-color: var(--syntax-js-color-black); --syntax-js-tab-hover-border-color: var(--syntax-js-color-black); --syntax-js-button-background-color: var(--color-glass); --syntax-js-button-text-color: var(--color-light); --syntax-js-button-hover-background-color: var(--syntax-js-color-dark-gray); --syntax-js-button-hover-text-color: var(--syntax-js-color-white); --syntax-js-border-radius: 0; --syntax-js-border-style-scrollbar: inset 0 0 6px var(--syntax-js-color-dark-gray); --syntax-js-border-size: 0.5px; --syntax-js-transition: all 0.3s; --syntax-js-js-animation-length: 0.5s; } /* ------------------------------------------------------------------------- Syntax.js - Code ------------------------------------------------------------------------- */ code.syntax-highlight, div.syntax-highlight { font-family: var(--syntax-js-default-font); } code.syntax-highlight button, div.syntax-highlight button { font-family: var(--syntax-js-default-font); } code.syntax-highlight div.tab-switch, div.syntax-highlight div.tab-switch { animation: fade-in-animation var(--syntax-js-js-animation-length); } code.syntax-highlight div.code, div.syntax-highlight div.code { position: relative; color: var(--syntax-js-color-black); } code.syntax-highlight div.code div.tabs, div.syntax-highlight div.code div.tabs { -moz-user-select: none; -webkit-user-select: none; -o-user-select: none; user-select: none; cursor: default; text-wrap: nowrap; margin-bottom: 1em; display: flex; gap: 1em; } code.syntax-highlight div.code div.tabs button.tab, code.syntax-highlight div.code div.tabs button.tab-active, div.syntax-highlight div.code div.tabs button.tab, div.syntax-highlight div.code div.tabs button.tab-active { display: inline-block; padding: 10px; padding-left: 15px; padding-right: 15px; border-radius: var(--syntax-js-border-radius); cursor: default; outline: none !important; } code.syntax-highlight div.code div.tabs button, div.syntax-highlight div.code div.tabs button { background: transparent; color: var(--color-deeper); border: 0.1rem solid var(--color-deeper); font-size: 0.7em; text-transform: uppercase; letter-spacing: 0.125em; font-weight: 550; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } code.syntax-highlight div.code div.tabs button.tab:hover, div.syntax-highlight div.code div.tabs button.tab:hover { cursor: pointer; border-color: var(--stroke-color--bright); } code.syntax-highlight div.code div.tabs button.tab-active, div.syntax-highlight div.code div.tabs button.tab-active { border-color: var(--stroke-color--bright); color: var(--color-light); } code.syntax-highlight div.code div.tab-contents, div.syntax-highlight div.code div.tab-contents { display: flex; width: 100%; } code.syntax-highlight div.code div.tab-contents pre, div.syntax-highlight div.code div.tab-contents pre { margin: 0 !important; } code.syntax-highlight div.code div.tab-contents div.description, div.syntax-highlight div.code div.tab-contents div.description { -moz-user-select: none; -webkit-user-select: none; -o-user-select: none; user-select: none; cursor: default; margin-right: 15px; background-color: var(--syntax-js-container-description-background-color); padding: 10px; padding-left: 15px; padding-right: 15px; border-radius: var(--syntax-js-border-radius); text-align: left; border: var(--syntax-js-border-size) solid var(--syntax-js-container-description-border-color); color: var(--syntax-js-color-black); width: 150px; display: none; } @media (min-width: 768px) { code.syntax-highlight div.code div.tab-contents div.description, div.syntax-highlight div.code div.tab-contents div.description { display: block; } } code.syntax-highlight div.code div.tab-contents div.numbers, div.syntax-highlight div.code div.tab-contents div.numbers { -moz-user-select: none; -webkit-user-select: none; -o-user-select: none; user-select: none; cursor: default; margin-right: 1em; padding: 0.5em 0.75em; border-radius: var(--syntax-js-border-radius); text-align: right; font-weight: 550; border: 0.1rem solid var(--color-deeper); display: none; } code.syntax-highlight div.code div.tab-contents div.numbers p, div.syntax-highlight div.code div.tab-contents div.numbers p { margin: 0; text-wrap: nowrap; color: var(--color-deeper); } @media (min-width: 768px) { code.syntax-highlight div.code div.tab-contents div.numbers, div.syntax-highlight div.code div.tab-contents div.numbers { display: block; } } code.syntax-highlight div.code div.tab-contents div.syntax, div.syntax-highlight div.code div.tab-contents div.syntax { flex-grow: 1; padding: 0.5em 1em; border: 0.1rem solid var(--color-deeper); position: relative; overflow: hidden; } code.syntax-highlight div.code div.tab-contents div.syntax div.buttons, div.syntax-highlight div.code div.tab-contents div.syntax div.buttons { -moz-user-select: none; -webkit-user-select: none; -o-user-select: none; user-select: none; cursor: default; position: absolute; top: 0.5em; right: 0.5em; z-index: 10; text-wrap: nowrap; display: flex; gap: 0.5em; } code.syntax-highlight div.code div.tab-contents div.syntax div.buttons button.button, code.syntax-highlight div.code div.tab-contents div.syntax div.buttons div.language-label, div.syntax-highlight div.code div.tab-contents div.syntax div.buttons button.button, div.syntax-highlight div.code div.tab-contents div.syntax div.buttons div.language-label { padding: 0.5em 1em; outline: 0.1rem solid var(--color-deeper); outline-offset: -0.1rem; backdrop-filter: blur(2.4rem); font-weight: 550; font-size: 1.2rem; text-transform: uppercase; letter-spacing: 0.125em; color: var(--color-deeper); position: relative; z-index: 2; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } code.syntax-highlight div.code div.tab-contents div.syntax div.buttons div.language-label, div.syntax-highlight div.code div.tab-contents div.syntax div.buttons div.language-label { outline-color: var(--color-light); color: var(--color-light); z-index: 3; flex: 1; } code.syntax-highlight div.code div.tab-contents div.syntax div.buttons button.button:hover, div.syntax-highlight div.code div.tab-contents div.syntax div.buttons button.button:hover { cursor: pointer; outline-color: var(--color-light); color: var(--color-light); z-index: 4; } code.syntax-highlight div.code div.tab-contents div.syntax p, div.syntax-highlight div.code div.tab-contents div.syntax p { margin: 0; text-wrap: initial; color: var(--syntax-js-color-black); } @media (min-width: 768px) { code.syntax-highlight div.code div.tab-contents div.syntax p, div.syntax-highlight div.code div.tab-contents div.syntax p { text-wrap: nowrap; } } code.syntax-highlight div.code div.tab-contents div.syntax p span.keyword, code.syntax-highlight div.code div.tab-contents div.syntax p span.keyword-clickable, div.syntax-highlight div.code div.tab-contents div.syntax p span.keyword, div.syntax-highlight div.code div.tab-contents div.syntax p span.keyword-clickable { font-weight: 700; color: var(--syntax-js-color-keyword); } code.syntax-highlight div.code div.tab-contents div.syntax p span.keyword-clickable, code.syntax-highlight div.code div.tab-contents div.syntax p span.no-highlight-keyword-clickable, div.syntax-highlight div.code div.tab-contents div.syntax p span.keyword-clickable, div.syntax-highlight div.code div.tab-contents div.syntax p span.no-highlight-keyword-clickable { transition: var(--syntax-js-transition); } code.syntax-highlight div.code div.tab-contents div.syntax p span.keyword-clickable:hover, code.syntax-highlight div.code div.tab-contents div.syntax p span.no-highlight-keyword-clickable:hover, div.syntax-highlight div.code div.tab-contents div.syntax p span.keyword-clickable:hover, div.syntax-highlight div.code div.tab-contents div.syntax p span.no-highlight-keyword-clickable:hover { color: var(--syntax-js-color-keyword-hover); cursor: pointer; } code.syntax-highlight div.code div.tab-contents div.syntax p span.value, code.syntax-highlight div.code div.tab-contents div.syntax p span.value-clickable, div.syntax-highlight div.code div.tab-contents div.syntax p span.value, div.syntax-highlight div.code div.tab-contents div.syntax p span.value-clickable { font-weight: 700; color: var(--syntax-js-color-value); } code.syntax-highlight div.code div.tab-contents div.syntax p span.value-clickable, code.syntax-highlight div.code div.tab-contents div.syntax p span.no-highlight-value-clickable, div.syntax-highlight div.code div.tab-contents div.syntax p span.value-clickable, div.syntax-highlight div.code div.tab-contents div.syntax p span.no-highlight-value-clickable { transition: var(--syntax-js-transition); } code.syntax-highlight div.code div.tab-contents div.syntax p span.value-clickable:hover, code.syntax-highlight div.code div.tab-contents div.syntax p span.no-highlight-value-clickable:hover, div.syntax-highlight div.code div.tab-contents div.syntax p span.value-clickable:hover, div.syntax-highlight div.code div.tab-contents div.syntax p span.no-highlight-value-clickable:hover { color: var(--syntax-js-color-value-hover); cursor: pointer; } code.syntax-highlight div.code div.tab-contents div.syntax p span.attribute, code.syntax-highlight div.code div.tab-contents div.syntax p span.attribute-clickable, div.syntax-highlight div.code div.tab-contents div.syntax p span.attribute, div.syntax-highlight div.code div.tab-contents div.syntax p span.attribute-clickable { font-weight: 700; color: var(--syntax-js-color-attribute); } code.syntax-highlight div.code div.tab-contents div.syntax p span.attribute-clickable, code.syntax-highlight div.code div.tab-contents div.syntax p span.no-highlight-attribute-clickable, div.syntax-highlight div.code div.tab-contents div.syntax p span.attribute-clickable, div.syntax-highlight div.code div.tab-contents div.syntax p span.no-highlight-attribute-clickable { transition: var(--syntax-js-transition); } code.syntax-highlight div.code div.tab-contents div.syntax p span.attribute-clickable:hover, code.syntax-highlight div.code div.tab-contents div.syntax p span.no-highlight-attribute-clickable:hover, div.syntax-highlight div.code div.tab-contents div.syntax p span.attribute-clickable:hover, div.syntax-highlight div.code div.tab-contents div.syntax p span.no-highlight-attribute-clickable:hover { color: var(--syntax-js-color-attribute-hover); cursor: pointer; } code.syntax-highlight div.code div.tab-contents div.syntax p span.comment, div.syntax-highlight div.code div.tab-contents div.syntax p span.comment { font-style: italic; color: var(--syntax-js-color-comment); } code.syntax-highlight div.code div.tab-contents div.syntax p span.multi-line-comment, div.syntax-highlight div.code div.tab-contents div.syntax p span.multi-line-comment { font-style: italic; color: var(--syntax-js-color-multi-line-comment); } code.syntax-highlight div.code div.tab-contents div.syntax p span.string, div.syntax-highlight div.code div.tab-contents div.syntax p span.string { color: var(--syntax-js-color-string); } code.syntax-highlight div.code div.tab-contents div.syntax p span.multi-line-string, div.syntax-highlight div.code div.tab-contents div.syntax p span.multi-line-string { color: var(--syntax-js-color-multi-line-string); } .button-opener { width: 3em; font-family: "remixicon" !important; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); position: relative; } .button-opener::before { content: "\ea6c"; color: var(--icon-color); transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); pointer-events: none; position: absolute; top: 50%; left: 50%; translate: -50% -50%; } .button-opener.close::before { scale: -1 1; } /* ------------------------------------------------------------------------- Syntax.js - Custom Scroll Bar ------------------------------------------------------------------------- */ .custom-scroll-bars::-webkit-scrollbar { width: 12px; } .custom-scroll-bars::-webkit-scrollbar-track { box-shadow: var(--syntax-js-border-style-scrollbar); } .custom-scroll-bars::-webkit-scrollbar-thumb { box-shadow: var(--syntax-js-border-style-scrollbar); background: var(--syntax-js-color-white); } .custom-scroll-bars::-webkit-scrollbar-thumb:hover { background-color: var(--syntax-js-color-white); } .custom-scroll-bars::-webkit-scrollbar-thumb:active { background-color: var(--syntax-js-color-lighter-gray); } /* ------------------------------------------------------------------------- Syntax.js - Animations ------------------------------------------------------------------------- */ @keyframes fade-in-animation { 0% { opacity: 0; } 100% { opacity: 1; } } .header__overflow { transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } .js-header__button:has(~ .js-header__menu.open) { --text-color: var(--text-color--bright); --icon-color: var(--text-color--bright); background: var(--background-color--glass); } .js-header__button:has(~ .js-header__menu.open) .icon--menu::before { rotate: 45deg; translate: -50% -50%; } .js-header__button:has(~ .js-header__menu.open) .icon--menu::after { rotate: 135deg; translate: -50% -50%; } .js-header__menu:not(.open) { opacity: 0; pointer-events: none; } body:has(.js-header__menu.open)::before, body:has(.js-header__menu.open)::after { z-index: var(--z-index-header); } .page__wrapper:has(.js-header__menu.open)::before { opacity: 1; pointer-events: auto; } .page__wrapper::before { opacity: 0; pointer-events: none; } .no-scroll, .no-scroll body, .no-scroll .page__wrapper { overflow: hidden; -ms-overflow-style: none; scrollbar-width: none; } .js-footer__theme [class*=ri-] { position: absolute; top: 50%; left: 50%; translate: -50% -50%; } :root.theme--light .js-footer__theme .ri-moon-clear-line { scale: 0; translate: -50% 0%; rotate: 90deg; } :root:not(.theme--light) .js-footer__theme .ri-sun-line { scale: 0; translate: -50% -100%; rotate: -90deg; } .js-section { translate: 0 calc((100% + 2.4rem) * (var(--section-index) - var(--column-position))); --transition-duration: 1s; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); transition-property: translate, opacity; } .js-section:not(.active) { opacity: 0; pointer-events: none; } .js-column { translate: calc((100% + 2.4rem) * (var(--column-index) - var(--row-position))) 0; --transition-duration: 1s; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } .js-button__v.hidden, .js-button__h.hidden { --icon-color: var(--color-deeper); cursor: default; }