:root {
	--spacing: 2rem;
	--confine: 100%;
	--confine-sm: 100%;
}

@media (min-width: 40rem) {
	:root {
		--spacing: 4rem;
	}
}

@media (min-width: 60rem) {

}

@media (min-width: 80rem) {
	:root {
		--confine: 76rem;
		--confine-sm: 56rem;
	}
}

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background-color: rgba(255, 255,255, 0.05); }
::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.802); }

html,
body { margin: 0; padding: 0; scroll-behavior: smooth; }
body { background: hsla(60, 1%, 10%, 1.0); }
p { margin: 0 0 0 0; }
p:not(:last-child) { margin: 0 0 1rem 0; }
strong, b { font-weight: 400; }

/* Texts */
body { font-family: "Open Sans"; font-weight: 300; font-size: 0.9rem; text-align: justify; color: hsla(0, 100%, 100%, 1); }
body { text-justify: inter-character; hyphens: auto; -webkit-hyphens: auto; word-spacing: -0.05em; }

h1 { font-size: 2rem; }
h1[shadow] { text-shadow: 0 0.05rem 0.2rem hsla(0, 0%, 0%, 0.8), 0 0.05rem 0.4rem hsla(0, 0%, 0%, 0.8); }
h1[handwriting] { font-family: "Open Sans"; font-weight:300; font-size: 3em; }
h2 { font-size: 1.4rem; }
h3 { font-size: 0.9rem; color: hsla(28, 42%, 60%, 1.0); font-weight: bold; }

h1,
h2,
h3 { font-weight: 300; text-align: left; hyphens: none; -webkit-hyphens: none; margin: 0 0 0.5rem 0; }

h2,
h3 { margin: 0.5rem 0 0.5rem 0; }

h1:first-child,
h2:first-child,
h3:first-child { margin-top: 0; }

blockquote { color: hsla(28, 42%, 60%, 1.0); margin: 3rem; padding-top: 1rem; padding-bottom: 1rem; text-align: center; font-style: italic; }
blockquote::before { margin: 0 auto; color: hsla(28, 42%, 60%, 1.0); display: block; content: ''; border-top: 1px solid hsla(28, 42%, 60%, 1.0); margin-bottom: 1.2rem; width: 40%; }
blockquote::after { margin: 0 auto; color: hsla(28, 42%, 60%, 1.0); display: block; content: ''; border-top: 1px solid hsla(28, 42%, 60%, 1.0); margin-top: 1.2rem; width: 40%; }
[footer] { font-size: 75%; }
[header-fade] { position: fixed; top: 0; right: 0; left: 0; height: 6rem; background: linear-gradient(0deg, hsla(0, 0%, 0%, 0.0) 0%, hsla(0, 0%, 0%, 0.8) 100%); transition: opacity 0.4s; }
body[scrolled] [header-fade] { opacity: 0; }
[align-left] { text-align: left; }
[align-center] { text-align: center; }
[align-center] h1,
[align-center] h2,
[align-center] h3 { text-align: center !important; }
[text-shadow] { text-shadow: 0 0.05rem 0.2rem hsla(0, 0%, 0%, 0.8), 0 0.05rem 0.4rem hsla(0, 0%, 0%, 0.8); }

@media (min-width: 40rem) {
	h1 { font-size: 2.2rem; }
	h2 { font-size: 1.4rem; }
	h3 { font-size: 1rem; color: hsla(28, 42%, 60%, 1.0); text-align: left; }
}

@media (min-width: 80rem) {
	h1 { font-size: 2.6rem; }
	h2 { font-size: 1.8rem; }
	h3 { font-size: 1rem; color: hsla(28, 42%, 60%, 1.0); text-align: left; }
}

a:link { color: hsla(0, 100%, 100%, 0.7); text-decoration: none; position: relative; }
a:visited { color: hsla(0, 100%, 100%, 1); text-decoration: none; }
a:hover { color: hsla(0, 100%, 80%, 1); text-decoration: none; }
a:active { color: hsla(0, 100%, 70%, 1); text-decoration: none; }

/* Header */
header { position: fixed; top: 0; right: 0; left: 0; height: 5rem; background: hsla(0, 0%, 0%, 0.0); transition: background 0.4s; }
body[scrolled] header { background: hsla(0, 0%, 0%, 0.8); }
header [content] { position: relative; width: var(--confine); height: 5rem; margin: 0 auto; }
header [content] { display: grid; grid-template-columns: min-content auto min-content min-content; }
header [content] [logotype-emblem] { margin: 1.5rem 1rem 1rem 2rem; height: 2rem; }
header [content] [logotype-text] { margin: 2.2rem 2rem 2rem 1rem; width: auto; max-width: calc(100vw - 12.5rem); height: 0.7rem; display: block; object-fit: contain; }

header [content] [menu] { display: flex; margin: 0; padding: 0; }
header [content] [menu] [collapse] { display: none; }
header [content] [menu] a { display: block; color: hsla(0, 0%, 75%, 1); padding: 1.8rem 1.10rem 1.985rem 1.10rem; margin: 0; transition: all 0.15s; font-weight: 300; white-space: nowrap; }
header [content] [menu] a:link,
header [content] [menu] a:visited { color: hsla(0, 0%, 75%, 1); text-decoration: none; }
header [content] [menu] a:active { transform: translateY(3px); }
header [content] [menu] a:hover { color: hsla(0, 0%, 100%, 1); }
header [content] [menu] a p { margin: 0; padding: 0; }

@media (min-width: 40rem) {
	header [content] [logotype-text-container] [fade] { opacity: 0; }
}

@media (min-width: 80rem) {
	header [content] [menu] [collapse] { display: block; }
	header [content] [menu] [i18n-title="shared/header/menu/more/text"] { display: none; }
}

/* More */
[more] { background-color: hsla(0, 0%, 0%, 0.95); box-shadow: 0 0.2rem 0.9rem hsla(0, 0%, 0%, 0.6); overflow: auto; border-radius: 0.4rem; }
[more] { display: flex; visibility: hidden; flex-direction: column; gap: 0.4rem; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 1.4rem; min-width: min(28rem, calc(90vw - 3rem)); max-height: max(calc(90vh - 2rem)); }
[more][show] { visibility: visible; }
[more] a { background: hsla(0, 100%, 100%, 0); }
[more] a { display: grid; grid-template-columns: min-content auto; gap: 1.2rem; padding: 1.6rem; margin: 0; }
[more] a div:first-child { line-height: 0; }
[more] a div:last-child { line-height: 0; }
[more] a:link,
[more] a:visited { color: hsla(0, 100%, 100%, 1); text-decoration: none; cursor: pointer; }
[more] a:hover { border-left-color: hsla(31, 42%, 62%, 1); background: hsla(0, 100%, 100%, 0.1); }
[more] a p { margin: 0; padding: 0; }
[more] a[logo] { padding: 1.1rem; }
[more] a[logo] img { height: 1.1rem; margin-left: 0.4rem; }
[more] a[logo] div { line-height: 1rem; }
[more] a[close] { justify-content: center; }

[more-shadow] { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; backdrop-filter: blur(0.2rem); }
[more-shadow][show] { display: block; }

[more-content] { transform: translateY(-100%); }
[more][show] [more-content] { transition: transform 0.6s cubic-bezier(0, 0.80, 0.2, 1); transform: translateY(0%); }

/* language */
[language] { background-color: hsla(0, 0%, 0%, 0.95); box-shadow: 0 0.2rem 0.9rem hsla(0, 0%, 0%, 0.6); overflow: auto; border-radius: 0.4rem; }
[language] { display: flex; visibility: hidden; flex-direction: column; gap: 0.4rem; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 1.4rem; min-width: min(28rem, calc(90vw - 3rem)); max-height: max(calc(90vh - 2rem)); }
[language][show] { visibility: visible; }
[language] a { background: hsla(0, 100%, 100%, 0); }
[language] a { display: grid; grid-template-columns: min-content auto; gap: 1.2rem; padding: 1.6rem; margin: 0; }
[language] a div:first-child { line-height: 0; }
[language] a div:last-child { line-height: 0; }
[language] a:link,
[language] a:visited { color: hsla(0, 100%, 100%, 1); text-decoration: none; cursor: pointer; }
[language] a:hover { border-left-color: hsla(31, 42%, 62%, 1); background: hsla(0, 100%, 100%, 0.1); }
[language] a p { margin: 0; padding: 0; }
[language] a[logo] { padding: 1.1rem; }
[language] a[logo] img { height: 1.1rem; margin-left: 0.4rem; }
[language] a[logo] div { line-height: 1rem; }
[language] a[close] { justify-content: center; }

[language-shadow] { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; backdrop-filter: blur(0.2rem); }
[language-shadow][show] { display: block; }

[language-content] { transform: translateY(-100%); }
[language][show] [language-content] { transition: transform 0.6s cubic-bezier(0, 0.80, 0.2, 1); transform: translateY(0%); }

/* Article */
article { margin-top: 0; min-height: 100vh; }

/* Footer */
footer { background: hsla(0, 0%, 0%, 1.0); }
footer { height: 14rem; }
footer a { color: white; }

/* Blocks */
[block] { display: block; position: relative; width: 100%; box-sizing: border-box; }
[block][header] { height: 3rem; }
[block][space] { padding: var(--spacing); }
[block][confine] { width: var(--confine); }
[block][confine-sm] { width: var(--confine-sm); }
[block][center] { margin: 0 auto; }
[block][hero] { min-height: 100vh; background: fixed center center / cover no-repeat; }
[block][hero][tint] { background-color: rgba(0, 0, 0, .5); background-blend-mode: multiply; }
[block][hero][modest] { min-height: 60vh; }
[block][hero] [center-center] { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 80vw; width: 100%; }
[block][hero] [full] { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
[block][hero] [edge-to-edge] { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; }
[block][columns] { display: grid; grid-template-columns: auto; gap: var(--spacing); }
[block][columns] > div[vertical-align-center] { align-self: center; }
[block] > [hero] { grid-column: 1 / -1; }

@media (min-width: 40rem) {
	[block][columns][x2] { grid-template-columns: auto auto; }
	[block][columns][x2][equal] { grid-template-columns: 1fr 1fr; }
	[block][columns][x2] [divider] { border-right: solid 0.15rem hsla(0, 0%, 100%, 1); padding-right: var(--spacing); }
	[block][columns][x2][right-max] { grid-template-columns: min-content auto; }
	[block][columns][x3] { grid-template-columns: auto auto auto; }
	[block][columns][x4] { grid-template-columns: auto auto; }
}

@media (min-width: 80rem) {
	[block][columns][x4] { grid-template-columns: auto auto auto auto; }
}

/* Windows */

[window][fullscreen] { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; }
[window][fullscreen][show] { display: block; }

@media (min-width: 80rem) {
	[window][fullscreen] { inset: var(--spacing); }
}

/* Function */
[inline] { display: inline-block; }
[paper][uplift] { transform: translateY(-4rem); }
[paper][color] { background: hsla(60, 1%, 15%, 1.0); border: 0.1rem solid hsla(60, 1%, 18%, 1.0); box-shadow: hsla(0, 0%, 0%, 0.6) 0rem 0.75rem 1.5rem -1rem; }
[paper][space] { padding: var(--spacing); }
[paper][grid] { display: grid; grid-template-columns: auto; }
[paper][grid][gap] { gap: 0.5rem; }

/* Flexes */
[flex] { display: flex; }
[flex][centered] { justify-content: center; }
[flex][space] { gap: var(--spacing); }
[flex][around] {justify-content: space-around;}
[flex][beetwen] {justify-content: space-between;}

/* Cards */
[cards] { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); grid-gap: var(--spacing); }
[cards][compress] { grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); }

@media (min-width: 80rem) {
	[cards][expand] { grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr)); }
}

[card] { display: flex; flex-direction: column; min-height: 4rem; box-shadow: hsla(0, 0%, 0%, 0.3) 0rem 0.4rem 0.6rem 0rem; border-radius: 0.5rem; box-sizing: border-box; overflow: hidden; }
[card][color-0] { background-color: hsla(60, 1%, 10%, 1.0); border: solid 0.15rem hsla(0, 0%, 100%, 1); }
[card][color-1] { background-color: hsla(23.7, 42.4%, 31.5%, 1.0); }
[card][color-2] { background-color: hsla(23.7, 42.4%, 34.5%, 1.0); }
[card][color-3] { background-color: hsla(23.7, 42.4%, 37.5%, 1.0); }
[card][color-4] { background-color: hsla(23.7, 42.4%, 40.5%, 1.0); }
[card][color-5] { background-color: hsla(23.7, 42.4%, 43.5%, 0.7); }
[card][color-6] { background-color: hsla(200, 40%, 30%, 0.1); }
/* [card][border] { border-left: 0.3rem solid hsla(28, 44%, 66%, 1.0); } */

[card] [part] { text-align: left; }
[card] [part][align-center] { text-align: center; }
[card] [part] p { display: inline; }
[card] [part][hero] { position: relative; background-repeat: no-repeat; background-size: cover; background-position: center center; }
[card] [part][hero] > span { position: absolute; bottom: 0.5rem; white-space: nowrap; }
[card] [part][hero] > span[center] { left: 50%; height: 2.4rem; transform: translateX(-50%); }
[card] [part][icon] { font-size: 2rem; }
[card] [part][icon][xl] { font-size: 4rem; }
[card] [part][space] { height: 2.4rem; }

[timeline] { display: flex; flex-direction: column; gap: var(--spacing); position: relative; box-sizing: border-box; min-height: 1rem; cursor: pointer; user-select: none; }
[timeline]::before { position: absolute; top: 0; bottom: 0; left: 5.1rem; width: 0.2rem; background-color: hsla(0, 0%, 100%, 1); border-radius: 0.15rem; content: ' '; z-index: -1; }
[timeline] [event] { position: relative; display: flex; flex-direction: row; }
[timeline] [event]::before { position: absolute; top: calc(50% - 0.5rem); left: 4.7rem; width: 1rem; height: 1rem; border: 0.2rem solid hsla(0, 0%, 100%, 1); background-color: hsla(60, 1%, 10%, 1.0); border-radius: 50%; content: ' '; box-sizing: border-box; transition: box-shadow 0.3s, background 0.3s; }
[timeline] [event][selected]::before { background-color: hsla(0, 0%, 100%, 1.0); box-shadow: 0px 0px 18px 0px rgba(255,255,255,1); }
[timeline] [event]:hover::before { box-shadow: 0px 0px 64px 8px hsla(0, 0%, 100%, 1), 0px 0px 18px 0px hsla(0, 0%, 100%, 1); }
[timeline] [event] > i { width: 6rem; padding-top: 0.4rem; font-size: 1.8rem; }
[timeline] [event] > div > * { padding-left: 1.2rem; padding-top: 0.4rem; color: hsla(0, 0%, 100%, 1.0); white-space: nowrap; }

@media (min-width: 40rem) {
	[timeline] { flex-direction: row; justify-content: space-between; height: 14rem; }
	[timeline]::before { top: 5.1rem; right: 0; bottom: 0; left: 0; width: unset; height: 0.2rem; }
	[timeline] [event] { flex-direction: column; top: 0; right: 0; bottom: 0; left: 0; width: 3rem; text-align: center; }
	[timeline] [event]::before { top: 4.75rem; left: 50%; transform: translateX(-50%); width: 1rem; height: 1rem; border: 0.2rem solid hsla(0, 0%, 100%, 1); background-color: hsla(60, 1%, 10%, 1.0); border-radius: 50%; content: ' '; box-sizing: border-box; }
	[timeline] [event] > i { width: unset; height: 6rem; }
	[timeline] [event] > div > * { transform-origin: center center; transform: rotate(90deg); }
}

@media (min-width: 80rem) {
	[timeline] [event] { width: 6rem; }
	[timeline] [event] > div > * { transform-origin: center right; transform: translateY(4rem) rotate(45deg); }
}

/* Fading */

[fading] { opacity: 0; transform: translateY(60px); transition: all 0.5s; }
[fade-in] { opacity: 1; transform: translateY(0); }

[icon-drop-cap] { float: left; margin-right: 2rem; }
[icon-drop-cap-right] { float: right; margin-top: -1.2rem; margin-left: 1.9rem; margin-bottom: 1.4rem; border-radius: 50%; background-color: hsla(60, 1%, 18%, 1.0); width: 2.6rem; height: 2.6rem; padding: 1.8rem; shape-outside: circle(50%); }
[icon-colorized] { color: hsl(28, 42%, 60%); }
[icon-size-xxl] { font-size: 1.6rem; }