@charset "UTF-8"; /*** The new CSS reset - version 1.7.3 (last updated 7.8.2022) 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 */ *:where(:not(html, iframe, canvas, img, svg, video, audio, pre):not(pre *, svg *, symbol *, path, clipPath)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; -webkit-tap-highlight-color: transparent; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-width: 100%; } /* 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; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; overflow-wrap: break-word; word-wrap: break-word; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } /* 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; } /* hide arrow in details on safari and ios */ ::-webkit-details-marker { display: none; } @font-face { font-family: "panchang"; src: url("../fonts/panchang/Panchang-Variable.woff2") format("woff2"), url("../fonts/panchang/Panchang-Variable.woff") format("woff"), url("../fonts/panchang/Panchang-Variable.ttf") format("truetype"); font-weight: 200 800; font-display: swap; font-style: normal; } @font-face { font-family: "jura"; src: url("../fonts/jura/Jura-Variable.woff2") format("woff2"); font-weight: 300 700; font-display: swap; font-style: normal; } :root { --grid-columns: 12; --grid-margin: 4rem; --grid-gap: 1.6rem; --grid-gap-block: 1.6rem; --grid-edge: 1.6rem; --layout-max-width: 168rem; --container-columns: 12; --column-size: 12; --minus-gap: 1; --cta-height: 5.6rem; --header-height: 9.2rem; --header-height--dashboard: 9.6rem; --header-padding-block: 2.4rem; --radius--xl: 8rem; --radius--lg: 4rem; --radius--md-lg: 3.2rem; --radius--md: 2.4rem; --radius--default: 1.2rem; --radius--sm: 0.8rem; --shadow--sm: 0 0 1.2rem hsl(from var(--black) h s l/10%); --white: hsl(0, 0%, 100%); --black: hsl(0, 0%, 0%); --red: #f94144; --hue: 160; --color-100: oklch(95% 0.02 var(--hue)); --color-200: oklch(86.70312500000001% 0.041533203125 var(--hue)); --color-300: oklch(75.87500000000001% 0.08328125 var(--hue)); --color-400: oklch(63.359375% 0.118876953125 var(--hue)); --color-450: oklch(55% 0.23 var(--hue)); --color-500: oklch(50% 0.27 var(--hue)); --color-600: oklch(36.640625% 0.118876953125 var(--hue)); --color-700: oklch(24.12500000000000% 0.02 var(--hue)); --color-700: oklch(30% 0.023 var(--hue)); --color-800: oklch(13.296875% 0.025 var(--hue)); --color-900: oklch(5% 0.02 var(--hue)); --box-decoration-size: .8rem; --gradient: linear-gradient( var(--gradient-direction, 101deg), var(--turquoise), var(--green)); --gradient--dark: linear-gradient( var(--gradient-direction, 101deg), var(--turquoise--darker), var(--turquoise--dark) ); --based-font-size: 1.6rem; --based-line-height: 1.5em; --title-font: panchang, sans-serif; --text-font: jura, sans-serif; --text-color--default: var(--color-100, black); --text-color: var(--text-color--default); --title-color--default: var(--color-200, black); --title-color: var(--title-color--default); --stroke-color--default: var(--color-700, black); --stroke-color: var(--stroke-color--default); --background-color--default: var(--color-900); --background-color: var(--background-color--default); --icon-color: currentColor; --error: var(--red); --success: var(--green); --row-background: var(--background-color); --row-padding-block: 3em; --block-padding-block: 3em; --block-margin-block: 4em; --transition-property: all; --transition-easing: cubic-bezier(0.71, 0.19, 0.24, 1); --transition-duration: 0.32s; } :root { --z-index-header-curtain: 50; --z-index-header: 100; --z-index-header-nav: 150; --z-index-header-actions: 200; --z-index-header-logo: 250; --z-index-header-search: 300; --z-index-dialog: 350; } html, body { font-family: var(--text-font); font-size: 10px; font-optical-sizing: auto; font-weight: 400; text-wrap: pretty; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .page__wrapper { font-size: var(--based-font-size); line-height: var(--based-line-height); } *:not(.icon) { color: var(--text-color); } em { font-style: italic; } strong { font-weight: 700; } html, body { background: var(--background-color); color: var(--text-color); } ::-moz-selection { color: var(--selection-color, var(--color-100)); background: var(--selection-background, var(--color-700)); } ::selection { color: var(--selection-color, var(--color-100)); background: var(--selection-background, var(--color-700)); } .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%))); } .flex--baseline { align-items: baseline; } .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-12 { --column-size: 12; } .col-12 > *, .col-12::before, .col-12::after { --container-columns: 12; } .col-12.grid { --grid-columns: 12; } @media screen and ( min-width: 48em ) { .start-5--sm { grid-column-start: 5; } .col-8--sm { --column-size: 8; } .col-8--sm > *, .col-8--sm::before, .col-8--sm::after { --container-columns: 8; } .col-8--sm.grid { --grid-columns: 8; } } @media screen and ( min-width: 64em ) { .col-4--md { --column-size: 4; } .col-4--md > *, .col-4--md::before, .col-4--md::after { --container-columns: 4; } .col-4--md.grid { --grid-columns: 4; } .start-4--md { grid-column-start: 4; } .col-9--md { --column-size: 9; } .col-9--md > *, .col-9--md::before, .col-9--md::after { --container-columns: 9; } .col-9--md.grid { --grid-columns: 9; } } @media screen and ( min-width: 80em ) { .start-3--md-mid { grid-column-start: 3; } .col-10--md-mid { --column-size: 10; } .col-10--md-mid > *, .col-10--md-mid::before, .col-10--md-mid::after { --container-columns: 10; } .col-10--md-mid.grid { --grid-columns: 10; } } .first { order: -1; } html { background: var(--background-color); } html, body { overflow-x: hidden; } .page__wrapper { display: grid; padding: var(--grid-edge); width: 100vw; width: 100dvw; min-height: 100vh; min-height: 100dvh; position: relative; } body:not(.page--scroll) .page__wrapper { grid-template-columns: 4.8rem 1fr; grid-template-rows: auto 1fr 4.8rem; grid-template-areas: "header header" "pagination-v content" "index pagination-h"; gap: var(--grid-gap); height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; overflow: hidden; } body:not(.page--scroll) .page__content { overflow: hidden; } .page__header { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 3; grid-area: header; max-width: 100vw; max-width: 100dvw; } .page__content { -ms-grid-row: 3; -ms-grid-column: 3; grid-area: content; } .page__pagination--h { -ms-grid-row: 5; -ms-grid-column: 3; grid-area: pagination-h; } .page__pagination--v { -ms-grid-row: 3; -ms-grid-column: 1; grid-area: pagination-v; } .page__footer { -ms-grid-row: 5; -ms-grid-column: 1; grid-area: index; } img { display: block; -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; } .ratio--5x3 { --ratio: 5/3; } .ratio--3x2 { --ratio: 3/2; } .ratio--2x1 { --ratio: 2/1; } @keyframes spin { from { transform: translate(-50%, -50%) rotate(0deg) scale(1.5); } to { transform: translate(-50%, -50%) rotate(360deg) scale(1.5); } } .navigation__button--left, .navigation__button--right, .header__theme, .header__subject, .header__button, body:not(.page--scroll) .block__content .button, body:not(.page--scroll) .row, .navigation__button--up, .navigation__button--down { position: relative; z-index: 2; } .navigation__button--left::before, .navigation__button--right::before, .header__theme::before, .header__subject::before, .header__button::before, body:not(.page--scroll) .block__content .button::before, body:not(.page--scroll) .row::before, .navigation__button--up::before, .navigation__button--down::before, .navigation__button--left::after, .navigation__button--right::after, .header__theme::after, .header__subject::after, .header__button::after, body:not(.page--scroll) .block__content .button::after, body:not(.page--scroll) .row::after, .navigation__button--up::after, .navigation__button--down::after { content: ""; border: 0.1rem solid var(--stroke-color); position: absolute; z-index: 2; } body:not(.page--scroll) .row::before, .navigation__button--up::before, .navigation__button--down::before, body:not(.page--scroll) .row::after, .navigation__button--up::after, .navigation__button--down::after { width: 100%; height: var(--box-decoration-size); left: 0; } body:not(.page--scroll) .row::before, .navigation__button--up::before, .navigation__button--down::before { border-block-end: 0; top: 0; } body:not(.page--scroll) .row::after, .navigation__button--up::after, .navigation__button--down::after { border-block-start: 0; bottom: 0; } .navigation__button--left::before, .navigation__button--right::before, .header__theme::before, .header__subject::before, .header__button::before, body:not(.page--scroll) .block__content .button::before, .navigation__button--left::after, .navigation__button--right::after, .header__theme::after, .header__subject::after, .header__button::after, body:not(.page--scroll) .block__content .button::after { width: var(--box-decoration-size); height: 100%; top: 0; } .navigation__button--left::before, .navigation__button--right::before, .header__theme::before, .header__subject::before, .header__button::before, body:not(.page--scroll) .block__content .button::before { border-inline-end: 0; left: 0; } .navigation__button--left::after, .navigation__button--right::after, .header__theme::after, .header__subject::after, .header__button::after, body:not(.page--scroll) .block__content .button::after { border-inline-start: 0; right: 0; } body:not(.page--scroll) .block__content { font-weight: 500; font-size: max(2.7777777778vw * var(--ratio), 1.6rem); line-height: 1.3em; } body:not(.page--scroll) .block__content h1 { --title-size: 8.3333333333vw; } body:not(.page--scroll) .block__content h2 { --title-size: 5.5555555556vw; } body:not(.page--scroll) .block__content h3 { --title-size: 4.4444444444vw; } body:not(.page--scroll) .block__content h4 { --title-size: 3.8888888889vw; } body:not(.page--scroll) .block__content h5 { --title-size: 3.3333333333vw; } body:not(.page--scroll) .block__content h6 { --title-size: 2.7777777778vw; } body:not(.page--scroll) .block__content :is(h1, h2, h3, h4, h5, h6) { font-size: max(var(--title-size) * var(--ratio), 2.4rem); font-size: calc(var(--title-size) * var(--ratio)); line-height: 1em; } body:not(.page--scroll) .block__content :is(h1, h2, h3, h4, h5, h6):has(+ *) { margin-block-end: calc(0.25em * var(--ratio)); } body:not(.page--scroll) .block__content * + *:where(:not(.button)) { margin-block-start: calc(0.25em * var(--ratio)); } body:not(.page--scroll) .block__content img { height: 100%; padding: inherit; } body:not(.page--scroll) .block__content img[src$=".gif"] { min-height: 60vh; } body:not(.page--scroll) .block__content .button__wrapper { display: flex; flex-wrap: wrap; gap: 1.6rem; } body:not(.page--scroll) .block__content .text--sm { font-size: 75%; line-height: 1.5em; } body:not(.page--scroll) .block__content small { display: inline-block; font-size: 75%; line-height: 1.5em; font-style: italic; } body:not(.page--scroll) .block__content mark { font-weight: 800; color: var(--color-400); } body:not(.page--scroll) .block__content abbr { text-decoration: underline; text-decoration-style: dashed; text-underline-offset: 0.15em; text-decoration-thickness: 0.1rem; } body:not(.page--scroll) .block__content a:not(.button) { color: var(--color-400); text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: 0.1rem; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s); } body:not(.page--scroll) .block__content a:not(.button):hover { text-underline-offset: 0.25em; } body:not(.page--scroll) .block__content .button { display: inline-block; padding-inline: 1em; font-weight: 700; font-size: max(40%, 1rem); color: var(--color-400); line-height: 2em; white-space: nowrap; letter-spacing: 0.05em; } body:not(.page--scroll) .block__content .button span { color: var(--color-400); } body:not(.page--scroll) .block__content .button span::before { content: ""; display: block; width: calc(100% + 1.6rem); height: calc(100% + 1.6rem); opacity: 0; background: var(--color-100); mix-blend-mode: color-dodge; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1, 0); transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s); transition-duration: 0.32s; } body:not(.page--scroll) .block__content .button:hover span::before { opacity: 1; background: var(--color-800); transform: translate(-50%, -50%) scale(1); } body:not(.page--scroll) .block__content :is(ul, ol) li { display: grid; grid-template-columns: auto 1fr; } body:not(.page--scroll) .block__content :is(ul, ol) li::before { grid-column: 1/span 1; color: var(--color-300); } body:not(.page--scroll) .block__content ul li::before { content: "• "; } body:not(.page--scroll) .block__content ul.pros li::before { content: "+ "; } body:not(.page--scroll) .block__content ul.cons li::before { content: "- "; } body:not(.page--scroll) .block__content ol { counter-reset: index; } body:not(.page--scroll) .block__content ol li { counter-increment: index; } body:not(.page--scroll) .block__content ol li::before { content: counter(index) ". "; min-width: 1.5em; } body:not(.page--scroll) .block__content li + li { margin-block-start: 0; } body:not(.page--scroll) .block__content iframe { display: block; width: 100%; height: 100%; -webkit-user-select: none; -moz-user-select: none; user-select: none; } body:not(.page--scroll) .block__content .code__wrapper--yellow pre::before { --color-100: gold; } body:not(.page--scroll) .block__content .code__wrapper--violet pre::before { --color-100: DarkSlateBlue; } body:not(.page--scroll) .block__content .code__wrapper--red pre::before { --color-100: crimson; } body:not(.page--scroll) .block__content pre { display: block; margin: 0; padding: 0; position: relative; } body:not(.page--scroll) .block__content pre::before { content: ""; display: block; width: 100%; height: 100%; padding: inherit; background: var(--color-100); opacity: 0.65; background-clip: content-box; mix-blend-mode: hue; position: absolute; top: 0; left: 0; pointer-events: none; } body:not(.page--scroll) .block__content code { background: var(--color-900); border: 0.1rem solid var(--color-700); padding: 1em !important; font-size: max(1.4583333333vw * var(--ratio), 1.3rem); line-height: 1.5em; } body:not(.page--scroll) .block__content * + pre { margin-block-start: 0.5em; } body:not(.page--scroll) .block__content video { max-width: 100%; height: 100%; margin-inline: auto; } body:not(.page--scroll) .block__content .hljs-ln-line.hljs-ln-numbers { --text-color: #565f89; padding-inline-end: 1.5em; } .title, body:not(.page--scroll) .block__content :is(h1, h2, h3, h4, h5, h6) { font-family: var(--title-font); font-weight: var(--title-weight, 700); color: var(--title-color); } .title--light { --title-weight: 500; --title-color: var(--color-100); } .title--extra { --title-weight: 750; } .title--gradient { background: linear-gradient(to right, var(--color-500), hsl(from var(--color-500) calc(var(--hue) + 15) s 30%)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .title--xxl { --title-size: 4rem; } .title--xl { --title-size: 3.2rem; } .title--lg { --title-size: 2.8rem; } .title--md { --title-size: 3.2rem; } .title--sm { --title-size: 2.4rem; } .title--xs { --title-size: 2.1rem; } .title--xxs { --title-size: 1.8rem; } .icon { --icon-thickness: 1; } .icon::before { color: var(--icon-color); transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s); } .icon svg path { fill: var(--text-color); } .icon--chevron-right::before, .icon--chevron-up::before, .icon--chevron-down::before, .icon--chevron-left::before { content: ""; display: block; width: 0.6em; height: 0.6em; border: 0.1rem solid var(--icon-color); border-block-start: 0; border-inline-start: 0; transform: translate(-25%, 0) rotate(-45deg); } .icon--chevron-left::before { transform: scale(-1, 1) translate(-25%, 0) rotate(-45deg); } .icon--chevron-down::before { transform: translate(0, -25%) rotate(45deg); } .icon--chevron-up::before { transform: translate(0, 25%) rotate(225deg); } .icon--check::before { content: ""; display: block; width: 1em; height: 0.5em; border: max(0.1071428571em, 0.15rem) solid var(--icon-color); border-block-start: 0; border-inline-end: 0; transform: translate(0, -25%) rotate(-45deg); } .icon--cross { display: inline-block; width: 1em; height: 1em; position: relative; } .icon--cross::before, .icon--cross::after { content: ""; display: inline-block; width: 0.75em; height: calc(var(--icon-thickness) * 0.1071428571em); border-radius: 100rem; background: var(--icon-color); position: absolute; top: 50%; left: 50%; } .icon--cross::before { transform: translate(-50%, -50%) rotate(45deg); } .icon--cross::after { transform: translate(-50%, -50%) rotate(-45deg); } .icon--frame { display: inline-grid; align-items: center; padding: 0.25em; margin: 0 !important; vertical-align: sub; outline: 0.1rem solid var(--color-700); border-radius: 0.4rem; } .icon--frame::before { scale: 0.5; } .icon--svg { display: inline-grid; align-items: center; margin: 0 !important; vertical-align: sub; outline: 0.1rem solid var(--color-700); border-radius: 0.4rem; } .icon--svg svg { width: max(2.7777777778vw * var(--ratio), 1.6rem); height: max(2.7777777778vw * var(--ratio), 1.6rem); } .header { display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto; grid-template-areas: "course theme" "subject subject"; align-content: center; gap: var(--grid-gap); line-height: 1em; } @media screen and ( min-width: 48em ) { .header { grid-template-columns: auto auto 1fr; grid-template-rows: 1fr; grid-template-areas: "course theme subject"; } } .header__course { -ms-grid-row: 1; -ms-grid-column: 1; --title-size: 1.8rem; grid-area: course; background: linear-gradient(135deg, var(--color-500), hsl(from var(--color-500) calc(h + 10) s l/50%), hsl(from var(--color-500) calc(h + 20) s l/0%), hsl(from var(--color-500) calc(h + 30) s l/0%)); background: linear-gradient(139deg, oklch(from var(--color-500) 60% 0.14 calc(h + 0)/100%) -20%, oklch(from var(--color-500) 59.74% 0.14 calc(h + 0.39)/98.7%) -11.9%, oklch(from var(--color-500) 59.02% 0.14 calc(h + 1.47)/95.1%) -4.5%, oklch(from var(--color-500) 57.72% 0.14 calc(h + 3.42)/89.6%) 2.5%, oklch(from var(--color-500) 56.5% 0.14 calc(h + 5.25)/82.5%) 9%, oklch(from var(--color-500) 54.82% 0.14 calc(h + 7.77)/74.1%) 15.3%, oklch(from var(--color-500) 52.96% 0.14 calc(h + 10.56)/64.8%) 21.2%, oklch(from var(--color-500) 51% 0.14 calc(h + 13.5)/55%) 27.1%, oklch(from var(--color-500) 49% 0.14 calc(h + 16.5)/45%) 32.9%, oklch(from var(--color-500) 47.04% 0.14 calc(h + 19.44)/35.2%) 38.8%, oklch(from var(--color-500) 45.18% 0.14 calc(h + 22.23)/25.9%) 44.7%, oklch(from var(--color-500) 43.5% 0.14 calc(h + 24.75)/17.5%) 51%, oklch(from var(--color-500) 42.08% 0.14 calc(h + 26.88)/10.4%) 57.5%, oklch(from var(--color-500) 40.98% 0.14 calc(h + 28.53)/4.9%) 64.5%, oklch(from var(--color-500) 40.26% 0.14 calc(h + 29.61)/1.3%) 71.9%, oklch(from var(--color-500) 40% 0.14 calc(h + 30)/0%) 80%); } .header__theme { -ms-grid-row: 1; -ms-grid-column: 3; grid-area: theme; } .header__subject { -ms-grid-row: 3; -ms-grid-column: 1; -ms-grid-column-span: 3; grid-area: subject; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; grid-template-areas: "title"; } @media screen and ( min-width: 48em ){ .header__course { -ms-grid-row: 1; -ms-grid-column: 1; } .header__theme { -ms-grid-row: 1; -ms-grid-column: 2; } .header__subject { -ms-grid-row: 1; -ms-grid-column: 3; -ms-grid-column-span: 1; } } .header__subject > * { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: title; } .header__button { grid-area: button; aspect-ratio: 1/1; min-width: 4.4rem; height: 100%; } .header__course, .header__theme, .header__subject { display: grid; align-items: center; padding: 1.2rem 1.6rem; } @media screen and ( min-width: 48em ) { .header__course, .header__theme, .header__subject { padding: 1.6rem 2.4rem; } } .header__theme, .header__subject { --title-size: 1.8rem; color: var(--title-color); } @media screen and ( min-width: 40em ) { .header__theme, .header__subject { --title-size: 2.1rem; } } .navigation__button { display: flex; align-items: center; justify-content: center; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s); cursor: pointer; } .navigation__button > * { pointer-events: none; } .navigation__button--up { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: up; } .navigation__button--down { -ms-grid-row: 5; -ms-grid-column: 1; grid-area: down; } .navigation__button--left { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: left; } .navigation__button--right { -ms-grid-row: 1; -ms-grid-column: 5; grid-area: right; } .navigation__button.hidden { --icon-color: var(--color-700); pointer-events: none; } .navigation__bullets { -ms-grid-row: 3; -ms-grid-column: 1; grid-area: bullets; } .navigation--h > .navigation__bullets { -ms-grid-row: 1; -ms-grid-column: 3; } .navigation__bullet { transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s); } .navigation__bullet.hidden { display: none !important; } .navigation--v { display: grid; grid-template-columns: 4.8rem; grid-template-rows: auto 1fr auto; grid-template-areas: "up" "bullets" "down"; gap: var(--grid-gap); } .navigation--v .navigation__button { height: 4.8rem; } .navigation--v .navigation__bullets { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.8rem; } .navigation--v .navigation__bullet { display: block; width: 0.8rem; height: 0.1rem; background: oklch(from var(--color-700) 25% c h); transform: scale(2, 1); } .navigation--v .navigation__bullet.active { background: var(--color-100); transform: scale(4, 1); } .navigation--h { display: grid; grid-template-columns: 4.8rem 1fr 4.8rem; grid-template-rows: 4.8rem; grid-template-areas: "left bullets right"; gap: var(--grid-gap); } .navigation--h .navigation__button { width: 4.8rem; } .navigation--h .navigation__bullets { display: flex; align-items: center; justify-content: center; gap: 0.8rem; } .navigation--h .navigation__bullet { display: block; height: 100%; width: 0.1rem; background: var(--color-700); transform: scale(1, 0.3333333333); } .navigation--h .navigation__bullet.active { background: var(--color-100); transform: scale(0.75, 0.6666666667); } body:not(.page--scroll) .row { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; grid-template-areas: "column"; align-items: center; width: 100%; height: 100%; max-height: 100%; overflow: hidden; } body:not(.page--scroll) .column { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: column; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; grid-template-areas: "block"; align-items: center; width: 100%; height: 100%; max-height: 100%; overflow: hidden; transform: translate(calc(100% * (var(--column-index) - var(--row-position))), 0); } body:not(.page--scroll) .column .block { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: block; } body:not(.page--scroll) .block { display: flex; flex-direction: column; justify-content: center; width: 100%; height: 100%; overflow: hidden; } body:not(.page--scroll) .block__content { padding-inline: max(2.2222222222vw, 1.6rem); overflow-y: scroll; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; scrollbar-width: none; } body:not(.page--scroll) .block__content > *:first-child { padding-block-start: max(2.2222222222vw, 1.6rem); } body:not(.page--scroll) .block__content > *:last-child { padding-block-end: max(2.2222222222vw, 1.6rem); } body:not(.page--scroll) .block__content .logo { margin-block-start: 1em; width: 3em; height: auto; padding: 0; } body:not(.page--scroll) .block__content.flex--baseline .code__wrapper { margin: 0; padding: 0; } body:not(.page--scroll) .block--h-center { align-items: center; } body:not(.page--scroll) .block--shadow img { filter: drop-shadow(0 0 2rem var(--color-700)); } body:not(.page--scroll) .block--list .block__content ul, body:not(.page--scroll) .block--list .block__content ol { padding: 0; } body:not(.page--scroll) .block:has(iframe) :is(h1, h2, h3, h4, h5, h6), body:not(.page--scroll) .block--frame :is(h1, h2, h3, h4, h5, h6), body:not(.page--scroll) .block--media :is(h1, h2, h3, h4, h5, h6) { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: title; } body:not(.page--scroll) .block:has(iframe) iframe, body:not(.page--scroll) .block:has(iframe) img, body:not(.page--scroll) .block:has(iframe) .block__video, body:not(.page--scroll) .block--frame iframe, body:not(.page--scroll) .block--frame img, body:not(.page--scroll) .block--frame .block__video, body:not(.page--scroll) .block--media iframe, body:not(.page--scroll) .block--media img, body:not(.page--scroll) .block--media .block__video { -ms-grid-row: 2; -ms-grid-column: 1; grid-area: iframe; align-self: stretch; justify-self: stretch; width: auto; height: auto; } body:not(.page--scroll) .block:has(iframe) iframe + *, body:not(.page--scroll) .block:has(iframe) img + *, body:not(.page--scroll) .block:has(iframe) .block__video + *, body:not(.page--scroll) .block--frame iframe + *, body:not(.page--scroll) .block--frame img + *, body:not(.page--scroll) .block--frame .block__video + *, body:not(.page--scroll) .block--media iframe + *, body:not(.page--scroll) .block--media img + *, body:not(.page--scroll) .block--media .block__video + * { margin-block-start: 0.75em !important; } body:not(.page--scroll) .block:has(iframe) iframe, body:not(.page--scroll) .block--frame iframe, body:not(.page--scroll) .block--media iframe { max-width: 100%; } body:not(.page--scroll) .block:has(iframe) .block__video, body:not(.page--scroll) .block--frame .block__video, body:not(.page--scroll) .block--media .block__video { display: flex; align-items: center; overflow: hidden; } body:not(.page--scroll) .block:has(iframe) *, body:not(.page--scroll) .block--frame *, body:not(.page--scroll) .block--media * { -ms-grid-row: 3; -ms-grid-column: 1; grid-area: text; } body:not(.page--scroll) .block:has(iframe) .block__content, body:not(.page--scroll) .block--frame .block__content, body:not(.page--scroll) .block--media .block__content { display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; grid-template-areas: "title" "iframe" "text"; height: 100%; overflow: hidden; } body:not(.page--scroll) .block--background { --title-color: var(--color-100); } body:not(.page--scroll) .block--background .block__content { display: grid; grid-template-columns: 1fr; grid-template-rows: 100%; grid-template-areas: "center"; height: 100%; position: relative; overflow: hidden; } body:not(.page--scroll) .block--background .block__content > *, body:not(.page--scroll) .block--background .block__content::before { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: center; } body:not(.page--scroll) .block--background .block__content::before { content: ""; aspect-ratio: 1/1; height: 40vmin; background: oklch(50% 50% calc(var(--hue) + 15)); background: linear-gradient(to right, oklch(50% 100% var(--hue)), oklch(50% 50% calc(var(--hue) + 20)), transparent 75%); mix-blend-mode: color-dodge; clip-path: polygon(100% 50%, 25% 93.3012701892%, 25% 6.6987298108%); position: absolute; top: 50%; left: 50%; z-index: 2; animation: spin 10s linear infinite; } body:not(.page--scroll) .block--background .block__content *:not(img, iframe) { padding: 0; text-align: center; align-self: center; justify-self: center; z-index: 2; position: relative; } body:not(.page--scroll) .block--background .block__content img, body:not(.page--scroll) .block--background .block__content iframe { align-self: stretch; justify-self: stretch; margin: 0; padding-block: max(2.2222222222vw, 1.6rem); filter: brightness(30%); } body:not(.page--scroll) .block--background .block__content iframe { filter: brightness(60%); } body:not(.page--scroll) .block--red .block__content::before { --hue: 0; } body:not(.page--scroll) .block--brown .block__content::before { --hue: 95; } body:not(.page--scroll) .block--orange .block__content::before { --hue: 80; } body:not(.page--scroll) .block--yellow .block__content::before { --hue: 100; } body:not(.page--scroll) .block--green .block__content::before { --hue: 120; } body:not(.page--scroll) .block--turquoise .block__content::before { --hue: 160; } body:not(.page--scroll) .block--blue .block__content::before { --hue: 190; } body:not(.page--scroll) .block--purple .block__content::before { --hue: 310; } body:not(.page--scroll) .block--pink .block__content::before { --hue: 330; } body:not(.page--scroll) .block--black .block__content::before, body:not(.page--scroll) .block--grey .block__content::before, body:not(.page--scroll) .block--white .block__content::before { background: linear-gradient(to right, oklch(100% 0% var(--hue)), oklch(50% 0% calc(var(--hue) + 20)), transparent 75%); } .footer { display: flex; align-items: center; justify-content: center; aspect-ratio: 1/1; font-size: 1.4rem; line-height: 1em; font-weight: 700; } .footer p::before { content: attr(data-column) "." attr(data-block); } .page--scroll .page__pagination { display: none; } .page--scroll .page__footer { display: none; } .page--scroll .row { padding-block: max(25vh, 4.8rem) max(25vh, 4.8rem); } .page--scroll .column + .column { margin-block-start: max(6.4rem, 10vh); } .page--scroll .block + .block { margin-block-start: max(6.4rem, 10vh); } .page--scroll .block__content { font-size: 2.4rem; } .page--scroll .block__content h1 { --title-size: 8rem; } .page--scroll .block__content h2 { --title-size: 5.6rem; } .page--scroll .block__content h3 { --title-size: 4.8rem; } .page--scroll .block__content h4 { --title-size: 4rem; } .page--scroll .block__content h5 { --title-size: 3.2rem; } .page--scroll .block__content h6 { --title-size: 2.4rem; } .page--scroll .block__content .button { font-size: 1em; } .page--scroll .block__content .button__wrapper { margin-block-start: 1em; } .js-title { --delay: 0.24s; } .js-title p { white-space: pre-wrap; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .js-title p > span { display: inline-block; } .js-title span span { display: inline-grid; grid-template-rows: 1fr; grid-template-columns: 1fr; grid-template-areas: "center"; height: 100%; --transition-duration: .64s; --transition-timing-function: cubic-bezier(.5,.5,0,1); transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s); transition-delay: calc(var(--delay) * var(--delay-force)); } .js-title:not(.active) span span { transform: translate(0, 100%); opacity: 0; } .js-title:not(.active, .latest) span { transition: none; } .js-title.active span span { transform: translate(0, 0); opacity: 1; transition-delay: calc(var(--delay) * var(--delay-force) + var(--delay) * 0.5); } .js-title.latest span span { --transition-timing-function: cubic-bezier(1,0,.5,.5); opacity: 0; transform: translate(0, -100%); } body:not(.page--scroll) .js-column { --transition-duration: .64s; --transition-timing-function: cubic-bezier(.5,.5,0,1); transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s); } body:not(.page--scroll) .js-column:not(.active) { --transition-timing-function: cubic-bezier(1,0,.5,.5); } body:not(.page--scroll) .js-block { --transition-duration: .64s; --transition-timing-function: cubic-bezier(.5,.5,0,1); transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s); transform: translate(0, calc(100% * (var(--block-index) - var(--column-position)))); } body:not(.page--scroll) .js-block:not(.active) { --transition-timing-function: cubic-bezier(1,0,.5,.5); opacity: 0; pointer-events: none; } pre code.hljs { display: block; overflow-x: auto; padding: 1em; } code.hljs { padding: 3px 5px; } /*! Theme: Tokyo-night-Dark origin: https://github.com/enkia/tokyo-night-vscode-theme Description: Original highlight.js style Author: (c) Henri Vandersleyen License: see project LICENSE Touched: 2022 */ /* Comment */ .hljs-meta, .hljs-comment { color: #565f89; } /* Red */ /*INFO: This keyword, HTML elements, Regex group symbol, CSS units, Terminal Red */ .hljs-tag, .hljs-doctag, .hljs-selector-id, .hljs-selector-class, .hljs-regexp, .hljs-template-tag, .hljs-selector-pseudo, .hljs-selector-attr, .hljs-variable.language_, .hljs-deletion { color: #f7768e; } /*Orange */ /*INFO: Number and Boolean constants, Language support constants */ .hljs-variable, .hljs-template-variable, .hljs-number, .hljs-literal, .hljs-type, .hljs-params, .hljs-link { color: #ff9e64; } /* Yellow */ /* INFO: Function parameters, Regex character sets, Terminal Yellow */ .hljs-built_in, .hljs-attribute { color: #e0af68; } /* cyan */ /* INFO: Language support functions, CSS HTML elements */ .hljs-selector-tag { color: #2ac3de; } /* light blue */ /* INFO: Object properties, Regex quantifiers and flags, Markdown headings, Terminal Cyan, Markdown code, Import/export keywords */ .hljs-keyword, .hljs-title.function_, .hljs-title, .hljs-title.class_, .hljs-title.class_.inherited__, .hljs-subst, .hljs-property { color: #7dcfff; } /*Green*/ /* INFO: Object literal keys, Markdown links, Terminal Green */ .hljs-selector-tag { color: #73daca; } /*Green(er) */ /* INFO: Strings, CSS class names */ .hljs-quote, .hljs-string, .hljs-symbol, .hljs-bullet, .hljs-addition { color: #9ece6a; } /* Blue */ /* INFO: Function names, CSS property names, Terminal Blue */ .hljs-code, .hljs-formula, .hljs-section { color: #7aa2f7; } /* Magenta */ /*INFO: Control Keywords, Storage Types, Regex symbols and operators, HTML Attributes, Terminal Magenta */ .hljs-name, .hljs-keyword, .hljs-operator, .hljs-keyword, .hljs-char.escape_, .hljs-attr { color: #bb9af7; } /* white*/ /* INFO: Variables, Class names, Terminal White */ .hljs-punctuation { color: #c0caf5; } .hljs { background: #1a1b26; color: #9aa5ce; } .hljs-emphasis { font-style: italic; } .hljs-strong { font-weight: bold; }