:root {
	--fontFamily: 'Stack Sans Headline', sans-serif;

    --color_white_text: #dfdfd6;
    --color_background: #1b1b1f;

    --color_h1: #287FD7;
    --color_h2: color-mix(in srgb, var(--color_white_text), #000 10%);

    --button_width: 6rem;
    --button_height: calc(var(--button_width)* 0.5);
    --button_margin: 0.4rem;

    --button_height_header: calc(var(--button_height)* 0.75);
    --button_padding_header: 0.4rem 1rem;

    --alerts_tip_color: #188131;
    --alerts_note_color: #0c67d8;
    --alerts_important_color: #8253de;

    --prism_color_keyword: #529cd6;
    --prism_color_return_type: #44b8a3;
    --prism_color_function: #dcdcaa;
    --prism_color_unity_type: #37b8b0;

    --prism_color_default_text: #9bdcfe;
    --prism_color_comment: #57a64a;
    --prism_color_string: #d69d85;

    --color_h1_dark: color-mix(in srgb, var(--color_h1), #000 30%);
    --color_API_dark: color-mix(in srgb, var(--prism_color_function), #000 30%);
    --color_Parts_dark: color-mix(in srgb, var(--prism_color_unity_type), #000 30%);
    --color_Github_dark: color-mix(in srgb, var(--color_white_text), #000 30%);
    --color_Guide_dark: color-mix(in srgb, var(--prism_color_string), #000 30%);
}

* {
	border:0;
	margin:0;
	outline:0;
	padding:0;
	text-decoration:none;
    scrollbar-gutter:stable;
}

@media(prefers-reduced-motion: no-preference) {
    /* @view-transition {
        navigation: auto;
    } */
}

@font-face {
	font-family: var(--fontFamily);
	src:url(../fonts/StackSansHeadline-VariableFont_wght.ttf) format("embedded-opentype"),url(../fonts/StackSansHeadline-VariableFont_wght.ttf) format("svg")
}

html, body {
	font-family: var(--fontFamily);
	font-display: swap;
	-ms-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--color_white_text);
}

#header_id {
    display: flex;
    min-width: 90vw;
    height: fit-content;
}

header > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    min-width: 90vw;
    margin: 3vh 2vw;
    height: 4rem;
}

header a.button {
    font-weight: bold;
    display: inline-block;
    width: fit-content;
    height: var(--button_height_header);
    line-height: var(--button_height_header);
    color: var(--color_white_text);
    background-color: var(--color_h1_dark);
    padding: var(--button_padding_header);
    border-radius: 4rem;
    text-align: center;
    margin: var(--button_margin);
}

.header_color_API {
    background-color: var(--color_API_dark) !important;
}

.header_color_Parts {
    background-color: var(--color_Parts_dark) !important;
}

.color_Github_dark {
    background-color: var(--color_Github_dark) !important;
}

.header_color_Guide {
    background-color: var(--color_Guide_dark) !important;
}

h1 {
    color: var(--color_h1);
}

h2 {
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    color: var(--color_h2);
}

#content {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    view-transition-name: inner_content;
    transition: opacity 0.75s ease;
    opacity: 0;
}

.is-loaded {
    opacity: 1 !important;
}

.gettingStarted {
    display: flex;
    flex-direction: column;
}

#replaceableContent {
    margin-top: 0;
    width: 60vw;
}

.button {
    display: inline-block;
    width: var(--button_width);
    height: var(--button_height);
    line-height: var(--button_height);
    color: var(--color_white_text);
    background-color: var(--color_h1_dark);
    border-radius: 4rem;
    text-align: center;
    margin: var(--button_margin);
}

button {
    background-color: transparent;
    color: var(--color_white_text);
    text-align: left;
    margin: var(--button_margin);
}

button:hover {
    cursor: pointer;
}

#home_content {
    display: flex;
    flex-direction: column;
    margin-top: 5rem;
    min-width: 60vw;
}

/* alerts */
/* Github formatting style */
.alert {
    width: auto;
    margin: 1.2rem;
    background-color: transparent;
    border-left: 0.25rem solid;
    padding: 0.5rem 1rem;
}

.alert:first-of-type {
    margin-top: 0;
}

.alert h1 {
    font-size: 1.4rem;
    user-select: none;
}

.alert h1::before {
    content: "";
    display: inline-block;
    background-color: currentColor;
    width: 1em;
    height: 1em;
    margin: 0 0.25rem 0 0.1rem;
    vertical-align: -0.15em;
    mask-size: contain;
    mask-repeat: no-repeat;
}

.alert h2 {
    margin: 0.2rem;
    font-size: 0.9rem;
    user-select: none;
}

/* tip coloring */
.tip {
    border-left-color: var(--alerts_tip_color) !important;
}

.tip h1,
.tip h2 {
    color: var(--alerts_tip_color) !important;
}

.tip a {
    color: var(--prism_color_comment) !important;
}

.tip h1::before {
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"><path d="M423.5-103.5Q400-127 400-160h160q0 33-23.5 56.5T480-80q-33 0-56.5-23.5ZM320-200v-80h320v80H320Zm10-120q-69-41-109.5-110T180-580q0-125 87.5-212.5T480-880q125 0 212.5 87.5T780-580q0 81-40.5 150T630-320H330Zm24-80h252q45-32 69.5-79T700-580q0-92-64-156t-156-64q-92 0-156 64t-64 156q0 54 24.5 101t69.5 79Zm126 0Z"/></svg>');
}

/* info coloring */
.note {
    border-left-color: var(--alerts_note_color) !important;
}

.note h1,
.note h2 {
    color: var(--alerts_note_color) !important;
}

.note h1::before {
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"><path d="M440-280h80v-240h-80v240Zm68.5-331.5Q520-623 520-640t-11.5-28.5Q497-680 480-680t-28.5 11.5Q440-657 440-640t11.5 28.5Q463-600 480-600t28.5-11.5ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>');
}

/* important coloring */
.important {
    border-left-color: var(--alerts_important_color) !important;
}

.important h1,
.important h2 {
    color: var(--alerts_important_color) !important;
}

.important h1::before {
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"><path d="M508.5-291.5Q520-303 520-320t-11.5-28.5Q497-360 480-360t-28.5 11.5Q440-337 440-320t11.5 28.5Q463-280 480-280t28.5-11.5ZM440-440h80v-240h-80v240ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h168q13-36 43.5-58t68.5-22q38 0 68.5 22t43.5 58h168q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm301.5-598.5Q510-807 510-820t-8.5-21.5Q493-850 480-850t-21.5 8.5Q450-833 450-820t8.5 21.5Q467-790 480-790t21.5-8.5ZM200-200v-560 560Z"/></svg>');
}

@media (max-width: 900px) {
    #content {
        flex-direction: column;
        align-items: center;
    }

    #replaceableContent,
    #home_content {
        width: 90vw;
        min-width: 0;
    }

    header > div {
        height: auto;
        min-height: 4rem;
    }

    header a.button {
        margin: 0.25rem;
    }
}

@media (max-width: 600px) {
    :root {
        --button_width: 5rem;
    }

    header > div {
        margin: 2vh 2vw;
    }

    header a.button {
        font-size: 0.85rem;
        padding: 0.3rem 0.6rem;
    }

    h1 {
        font-size: 1.4rem;
    }

    h2 {
        font-size: 1.1rem;
    }
}