html {
font-family:
ui-sans-serif,
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
"Helvetica Neue",
Arial,
"Noto Sans",
sans-serif,
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol",
"Noto Color Emoji";
}
body {
background: var(--qwik-dark-background);
color: var(--qwik-dark-text);
overflow-x: hidden;
}
h1,
h2,
h3 {
color: white;
margin: 0;
}
h1 {
font-size: 3.2rem;
text-align: center;
}
h1 .highlight,
h3 .highlight {
color: var(--qwik-light-blue);
}
h2 {
font-weight: 400;
font-size: 2.4rem;
}
h2 .highlight {
font-weight: 700;
}
h3 {
font-size: 2rem;
}
@media screen and (min-width: 768px) {
h1 {
font-size: 5rem;
}
h2 {
font-size: 3.4rem;
}
h3 {
font-size: 3rem;
}
}
a {
text-decoration: none;
color: var(--qwik-light-blue);
}
code {
background: rgba(230, 230, 230, 0.3);
border-radius: 4px;
padding: 2px 6px;
}
ul {
margin: 0;
padding-left: 20px;
}
.container {
margin: 0 auto;
padding: 30px 40px;
}
.container.container-purple {
background: var(--qwik-light-purple);
}
.container.container-dark {
background: var(--qwik-dark-background);
color: var(--qwik-dark-text);
}
.container.container-center {
text-align: center;
}
.container.container-flex {
}
.container.container-spacing-xl {
padding: 50px 40px;
}
@media screen and (min-width: 768px) {
.container {
padding: 60px 80px;
}
.container.container-spacing-xl {
padding: 100px 60px;
}
.container.container-flex {
display: flex;
justify-content: center;
gap: 60px;
}
}
a.button,
button {
background: var(--qwik-light-blue);
border: none;
border-radius: 8px;
color: white;
cursor: pointer;
font-size: 0.8rem;
padding: 15px 20px;
text-align: center;
}
a.button.button-dark,
button.button-dark {
background: var(--qwik-dirty-black);
}
a.button.button-small,
button.button-small {
padding: 15px 25px;
}
@media screen and (min-width: 768px) {
a.button,
button {
font-size: 1rem;
padding: 23px 35px;
}
}
.ellipsis {
position: absolute;
top: 100px;
left: -100px;
width: 400px;
height: 400px;
background: radial-gradient(
57.58% 57.58% at 48.79% 42.42%,
rgba(24, 180, 244, 0.5) 0%,
rgba(46, 55, 114, 0) 63.22%
);
transform: rotate(5deg);
opacity: 0.5;
z-index: -1;
}
.ellipsis.ellipsis-purple {
top: 1350px;
left: -100px;
background: radial-gradient(
50% 50% at 50% 50%,
rgba(172, 127, 244, 0.5) 0%,
rgba(21, 25, 52, 0) 100%
);
transform: rotate(-5deg);
}
@media screen and (min-width: 768px) {
.ellipsis {
top: -100px;
left: 350px;
width: 1400px;
height: 800px;
}
.ellipsis.ellipsis-purple {
top: 1300px;
left: -200px;
}
}
.icon:before {
width: 18px;
height: 18px;
content: "";
display: inline-block;
margin-right: 20px;
position: relative;
top: 2px;
}
.icon-cli:before {
background-image: url("data:image/svg+xml,%3Csvg fill='%23ffffff' width='20px' height='20px' viewBox='0 0 256 256' id='Flat' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M122.499 124.87646a4.00053 4.00053 0 0 1 0 6.24708l-40 32a4.0002 4.0002 0 0 1-4.998-6.24708L113.59668 128 77.501 99.12354a4.0002 4.0002 0 0 1 4.998-6.24708ZM175.99414 156h-40a4 4 0 0 0 0 8h40a4 4 0 1 0 0-8ZM228 56.48535v143.0293A12.49909 12.49909 0 0 1 215.51465 212H40.48535A12.49909 12.49909 0 0 1 28 199.51465V56.48535A12.49909 12.49909 0 0 1 40.48535 44h175.0293A12.49909 12.49909 0 0 1 228 56.48535Zm-8 0A4.49023 4.49023 0 0 0 215.51465 52H40.48535A4.49023 4.49023 0 0 0 36 56.48535v143.0293A4.49023 4.49023 0 0 0 40.48535 204h175.0293A4.49023 4.49023 0 0 0 220 199.51465Z'/%3E%3C/svg%3E");
}
.icon-apps:before {
background-image: url("data:image/svg+xml,%3Csvg fill='%23ffffff' width='20px' height='20px' viewBox='0 0 256 256' id='Flat' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M216 44.00586H40a12.01375 12.01375 0 0 0-12 12v144a12.01375 12.01375 0 0 0 12 12H216a12.01375 12.01375 0 0 0 12-12v-144A12.01375 12.01375 0 0 0 216 44.00586Zm4 156a4.00458 4.00458 0 0 1-4 4H40a4.00458 4.00458 0 0 1-4-4v-144a4.00458 4.00458 0 0 1 4-4H216a4.00458 4.00458 0 0 1 4 4Zm-144-116a8 8 0 1 1-8-8A7.99977 7.99977 0 0 1 76 84.00586Zm40 0a8 8 0 1 1-8-8A7.99977 7.99977 0 0 1 116 84.00586Z'/%3E%3C/svg%3E");
}
.icon-community:before {
background-image: url("data:image/svg+xml,%3Csvg fill='%23ffffff' width='20px' height='20px' viewBox='0 0 256 256' id='Flat' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M246.40381 143.19434a4.00061 4.00061 0 0 1-5.60108-.7959A55.57857 55.57857 0 0 0 196 120a4 4 0 0 1 0-8 28 28 0 1 0-27.50732-33.26074 4.00013 4.00013 0 0 1-7.85987-1.49219 36.00191 36.00191 0 1 1 54.06494 37.50513 63.58068 63.58068 0 0 1 32.50147 22.84155A3.99993 3.99993 0 0 1 246.40381 143.19434Zm-57.24268 71.05273a3.9998 3.9998 0 1 1-7.1914 3.50391 60.02582 60.02582 0 0 0-107.93946 0 3.9998 3.9998 0 1 1-7.1914-3.50391 67.56008 67.56008 0 0 1 40.90625-35.20581 44 44 0 1 1 40.50976 0A67.56139 67.56139 0 0 1 189.16113 214.24707ZM128 176a36 36 0 1 0-36-36A36.04061 36.04061 0 0 0 128 176ZM60 112A28 28 0 1 1 87.50732 78.73828a3.99989 3.99989 0 1 0 7.85938-1.49219A36.00177 36.00177 0 1 0 41.30225 114.7522 63.5829 63.5829 0 0 0 8.79883 137.5957a4 4 0 1 0 6.39648 4.80469A55.58072 55.58072 0 0 1 60 120a4 4 0 0 0 0-8Z'/%3E%3C/svg%3E");
}