:root {
    --header-height: 75px;
}

body {
    margin: 0;
    font-family: 'Inter';
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.header-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 25px 0;
    box-sizing: border-box;
    background-color: #FFF;
    z-index: 2;
}

    .header-container img {
        height: 62px;
    }

    .header-container .button-go-home {
        display: none;
    }

    .header-container.show-navigation {
        justify-content: space-between;
        border-bottom: 1px solid #EAECF0;
        position: fixed;
        padding: 0 25px;
        height: var(--header-height);
        align-items: center;
    }

        .header-container.show-navigation ~ .body-section {
            margin-top: var(--header-height);
        }

        .header-container.show-navigation img {
            height: 36px;
        }

        .header-container.show-navigation .button-go-home {
            display: block;
        }

.body-section {
    flex: 1;
}

    .body-section .main-container {
        max-width: 1280px;
        margin: auto;
        padding: 0 15px;
        margin-top: 30px;
    }

        .body-section .main-container h1,
        .body-section .main-container h2,
        .body-section .main-container h3,
        .body-section .main-container h4 {
            color: #131416;
        }

        .body-section .main-container p {
            color: #3B4047;
            font-size: 18px;
            line-height: 28px;
        }

        .body-section .main-container .page-title-container {
            display: flex;
            flex-direction: column;
        }

            .body-section .main-container .page-title-container h1 {
                color: #131416;
                font-size: 48px;
                font-weight: 600;
                margin: 0;
            }

            .body-section .main-container .page-title-container span {
                margin-top: 10px;
                font-size: 16px;
            }

        .body-section .main-container .extra-info-container {
            width: 100%;
            margin-top: 30px;
            border: 1px solid #D0D5DD;
            border-radius: 12px;
            display: flex;
            flex-direction: column;
            color: #25282B;
            font-size: 16px;
            font-weight: 600;
            padding: 16px 0;
        }


            .body-section .main-container .extra-info-container ul li {
                font-size: 14px;
                line-height: 20px;
                font-weight: 600;
                color: #25282B;
            }

            .body-section .main-container .extra-info-container red {
                color: #D92D20;
            }

            .body-section .main-container .extra-info-container a {
                color: inherit;
            }

        .body-section .main-container .code-snippet-container {
            width: 100%;
            margin: 10px 0;
            border: solid 1px #EAECF0;
            border-radius: 15px;
            display: flex;
            font-family: "Roboto mono";
        }

            .body-section .main-container .code-snippet-container .line-number {
                background-color: #FCFCFD;
                display: flex;
                flex-direction: column;
                padding: 24px;
                border-radius: 14px 0 0 14px;
                border-right: solid 1px #EAECF0;
                font-weight: 700;
                color: #9AA3B3;
            }

            .body-section .main-container .code-snippet-container .code {
                padding: 24px 24px 32px 24px;
                display: flex;
                flex-direction: column;
                color: #175CD3;
                font-size: 16px;
                font-weight: 500;
            }

                .body-section .main-container .code-snippet-container .code pink {
                    color: #C11574;
                    word-break: break-word;
                }

        .body-section .main-container .breadcrumb {
            width: 100%;
            margin: 30px 0 20px 0;
            font-size: 14px;
            line-height: 20px;
            font-weight: 600;
            display: flex;
            align-items: center;
            color: #25282B;
        }

            .body-section .main-container .breadcrumb a {
                color: inherit;
                text-decoration: none;
            }

            .body-section .main-container .breadcrumb span:first-of-type {
                color: #3B4047;
                font-weight: 500;
            }

            .body-section .main-container .breadcrumb svg {
                margin: auto 15px;
            }

footer {
    padding: 25px;
    min-height: 50px;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
}

    footer div {
        display: flex;
        justify-content: center;
        align-items: center;
    }

        footer div .footer-info {
            display: flex;
            align-items: center;
            text-decoration: none;
            font-size: 14px;
            font-weight: 600;
            color: #768094;
            line-height: 20px;
        }

        footer div .dot-separator {
            border-radius: 100%;
            height: 5px;
            width: 5px;
            background-color: #768094;
        }

            footer div .dot-separator[data-when-display='always'],
            footer div .dot-separator[data-when-display='desktop'] {
                margin: auto 20px;
                display: block;
            }

        footer div .footer-info svg {
            margin-right: 5px;
        }


@media(max-width: 768px) {
    footer {
        flex-direction: column-reverse;
        align-content: center;
        padding: 25px 10px;
    }

        footer div {
            justify-content: space-between;
            width: 100%;
        }

            footer div .footer-info {
                margin: 10px auto;
                line-height: 14px;
            }

            footer div .dot-separator[data-when-display='always'] {
                margin: auto;
            }

            footer div .dot-separator[data-when-display='desktop'] {
                display: none;
                margin: auto;
            }
}