@import url("https://fonts.googleapis.com/css2?family=Open+Sans&family=Source+Sans+Pro:wght@400;700&display=swap"); h1, .headline-1, .heading-1 { font-size: 6rem; font-weight: 300; letter-spacing: -0.015625em; line-height: 6rem; } h2, .headline-2, .heading-2 { font-size: 3.75rem; font-weight: 300; letter-spacing: -0.0083333333em; line-height: 3.75rem; } h3, .headline-3, .heading-3 { font-size: 3rem; font-weight: 400; letter-spacing: normal; line-height: 3.125rem; } h4, .headline-4, .heading-4 { font-size: 2.125rem; font-weight: 400; letter-spacing: 0.0073529412em; line-height: 2.5rem; } h5, .headline-5, .heading-5 { font-size: 1.5rem; font-weight: 400; letter-spacing: normal; line-height: 2rem; } h6, .headline-6, .heading-6 { font-size: 1.25rem; font-weight: 500; letter-spacing: 0.125em; line-height: 2rem; } .subtitle-1 { font-size: 1rem; font-weight: 400; letter-spacing: 0.009375em; line-height: 1.75rem; } .subtitle-2 { font-size: 0.875rem; font-weight: 500; letter-spacing: 0.0071428571em; line-height: 1.375rem; } .body-1 { font-size: 1rem; font-weight: 400; letter-spacing: 0.03125em; line-height: 1.5rem; } .body-2 { font-size: 0.875rem; font-weight: 400; letter-spacing: 0.0178571429em; line-height: 1.25rem; } .button { font-size: 0.875rem; font-weight: 500; letter-spacing: 0.0892857143em; line-height: 2.25rem; } .caption { font-size: 0.75rem; font-weight: 400; letter-spacing: 0.0333333333em; line-height: 1.25rem; } .overline { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.1666666667em; line-height: 2rem; } aki-button, *[aki-button], *.aki-button { background-color: #ffc107; border: none; border-radius: 0.125rem; box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); color: #000; cursor: pointer; font-size: 1rem; padding: 0.5rem 1rem; text-decoration: none; user-select: none; } aki-button:hover:not(:active), *[aki-button]:hover:not(:active), *.aki-button:hover:not(:active) { filter: invert(0.15); } aki-button:active, *[aki-button]:active, *.aki-button:active { background: #121212; box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); color: #fff; } aki-card, *.aki-card, *[aki-card] { background: #121212; box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12); border-radius: 0.125rem; color: #fff; display: flex; flex-direction: column; font-size: 0.875rem; letter-spacing: 0.0178571429em; line-height: 1.25rem; font-family: "Open Sans", sans-serif; max-width: calc(25rem - 3rem); padding: 1.25rem 1.5rem; } aki-card aki-card-title *.aki-card-title, aki-card *[aki-card-title], *.aki-card aki-card-title *.aki-card-title, *.aki-card *[aki-card-title], *[aki-card] aki-card-title *.aki-card-title, *[aki-card] *[aki-card-title] { font-family: "Source Sans Pro", sans-serif; font-size: 1.25rem; font-weight: 700; letter-spacing: 0.009375em; line-height: 1.75rem; margin-bottom: 1rem; text-transform: uppercase; } aki-card.elevated-card, *.aki-card.elevated-card, *[aki-card].elevated-card { box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); } [aki-divider], .aki-divider { background: #fff; border: none; height: 0.0625rem; width: 100%; } aki-toolbar, *[aki-toolbar], *.aki-toolbar { align-items: center; background-color: #121212; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); color: #fff; display: flex; flex-wrap: wrap; height: 100%; justify-content: flex-start; max-height: 5.5rem; min-width: 20rem; text-transform: uppercase; width: 100%; z-index: 1; } aki-toolbar a, *[aki-toolbar] a, *.aki-toolbar a { color: #fff; text-decoration: none; } aki-toolbar nav, *[aki-toolbar] nav, *.aki-toolbar nav { align-items: center; display: flex; } aki-toolbar nav a, *[aki-toolbar] nav a, *.aki-toolbar nav a { border-bottom: 0.25rem solid #121212; cursor: pointer; padding: 1rem; letter-spacing: 0.0178571429em; line-height: 1.25rem; transition: 0.25s ease-in-out; } aki-toolbar nav a:hover, *[aki-toolbar] nav a:hover, *.aki-toolbar nav a:hover { filter: invert(0.2); } aki-toolbar nav a[active], *[aki-toolbar] nav a[active], *.aki-toolbar nav a[active] { border-bottom: 0.25rem solid #ffc107; } .text1 { font-family: "Open Sans", sans-serif; font-weight: 400; } .text2 { font-family: "Source Sans Pro", sans-serif; font-weight: 700; } html { font-family: "Source Sans Pro", sans-serif; font-size: 16px; } body { display: flex; flex-direction: column; height: 100vh; margin: 0; padding: 0; position: absolute; width: 100vw; } header .left, header .center, header .right { align-items: inherit; display: inherit; height: calc(100% - 2rem); padding: 1rem; } header .left .logo { display: block; filter: invert(1); height: 3rem; width: 3rem; } header .left .title { font-size: 1.75rem; letter-spacing: 0.03125em; margin-left: 1rem; } header .left .title span:last-child { margin-left: 0.5rem; } @media (max-width: 64em) { header .left .title span:first-child { display: none; } } @media (max-width: 48em) { header .left .title { margin-left: 0; } } header .right { flex: 1 1 auto; justify-content: flex-end; } header .right .dropdown-button { display: none; } @media (max-width: 64em) { header .right.dropdown { align-items: center; cursor: pointer; display: flex; justify-content: center; min-width: 4rem; float: left; overflow: hidden; } header .right.dropdown:hover .dropdown-content { background: #121212; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); display: flex; flex-direction: column; padding: 1rem; right: 0; top: 5.5rem; } header .right.dropdown .dropdown-button { display: initial; } header .right.dropdown .dropdown-content { display: none; position: absolute; z-index: 1; } } main { display: flex; flex-direction: row; height: 100%; position: relative; overflow: auto; width: 100%; } main aside { background-color: #121212; box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2), 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12); color: #fff; overflow-y: auto; width: 20rem; z-index: 1; } main aside .subheader, main aside ul { padding: 1rem; } main aside .subheader { font-family: "Source Sans Pro"; font-size: 1rem; font-weight: 700; } main aside ul { font-family: "Open Sans"; font-size: 0.875rem; font-weight: 400; list-style: none; margin: 0; } main aside ul li { cursor: pointer; padding: 0.25rem 0; } main aside ul li a { color: #fff; text-decoration: none; } main aside ul li a:hover { filter: invert(0.15); } main aside ul li a[active] { color: #ffc107; } main #router-outlet { background: #282828; color: #fff; height: calc(100% - 2rem); position: relative; overflow: auto; padding: 1rem 2rem; width: calc(100% - 4rem); } footer { bottom: 0; color: rgba(255, 255, 255, 0.25); font-size: 0.625rem; left: 0; padding: 0.5rem 1.5rem; position: absolute; width: calc(100% - 1.5rem * 2); } @media (max-width: 48em) { footer { display: none; } } a { color: #ffc107; text-decoration: none; } .doc-typography h1, .doc-typography h2, .doc-typography h3, .doc-typography h4, .doc-typography h5, .doc-typography h6 { margin: 0; } .doc-typography h1 { font-family: "Source Sans Pro"; font-size: 3rem; font-weight: 700; letter-spacing: -0.015625em; line-height: 6rem; } .doc-typography h2 { font-family: "Source Sans Pro"; font-size: 2.25rem; font-weight: 700; letter-spacing: -0.0083333333em; line-height: 3.75rem; } .doc-typography h3 { font-family: "Source Sans Pro"; font-size: 1.75rem; font-weight: 700; letter-spacing: normal; line-height: 3.125rem; } .doc-typography h4 { font-family: "Source Sans Pro"; font-size: 1.75rem; font-weight: 500; letter-spacing: 0.0073529412em; line-height: 2.5rem; } .doc-typography h5 { font-family: "Source Sans Pro"; font-size: 1.5rem; font-weight: 500; letter-spacing: normal; line-height: 2rem; } .doc-typography h6 { font-family: "Source Sans Pro"; font-size: 1.25rem; font-weight: 500; letter-spacing: normal; line-height: 2rem; } .doc-typography p, .doc-typography pre ul, .doc-typography li, .doc-typography blockquote, .doc-typography span, .doc-typography code { font-size: 0.875rem; font-weight: 400; letter-spacing: 0.03125em; line-height: 1.5rem; } .doc-typography p, .doc-typography ul, .doc-typography li, .doc-typography blockquote, .doc-typography span { font-family: "Open Sans"; } .doc-typography pre, .doc-typography code { background: #101010 !important; } .doc-typography blockquote, .doc-typography code, .doc-typography .doc-alert, .doc-typography .doc-info, .doc-typography .doc-warning, .doc-typography .doc-note { border-radius: 0.125rem; } .doc-typography blockquote, .doc-typography code, .doc-typography pre, .doc-typography .doc-alert, .doc-typography .doc-info, .doc-typography .doc-warning, .doc-typography .doc-note { padding: 0.25rem 0.75rem; } .doc-typography blockquote, .doc-typography code, .doc-typography pre, .doc-typography li, .doc-typography .doc-alert, .doc-typography .doc-info, .doc-typography .doc-warning, .doc-typography .doc-note { margin: 0 0 0.5rem; } .doc-typography blockquote { background: #181818; color: #ccc; } .doc-typography a { color: #ffc107; cursor: pointer; text-decoration: none; } .doc-typography a:hover { filter: invert(0.15); } .doc-typography img { width: 100%; } .doc-typography .doc-alert, .doc-typography .doc-info, .doc-typography .doc-warning, .doc-typography .doc-note { box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } .doc-typography .doc-alert { background: #AF1010; color: #fff; } .doc-typography .doc-alert::before { content: "Alert"; display: block; font-weight: 700; margin: 0 0 0.25rem 0; } .doc-typography .doc-info { background: #0D47A1; color: #fff; } .doc-typography .doc-info::before { content: "Info"; display: block; font-weight: 700; margin: 0 0 0.25rem 0; } .doc-typography .doc-warning { background: #ffc107; color: #000; } .doc-typography .doc-warning::before { content: "Warning"; display: block; font-weight: 700; margin: 0 0 0.25rem 0; } .doc-typography .doc-note { background: #999; color: #080808; } .doc-typography .doc-note::before { content: "Note"; display: block; font-weight: 700; margin: 0 0 0.25rem 0; } /*# sourceMappingURL=style.css.map */