* {
    margin: 0;
    padding: 0;
    scroll-behavior: auto;
}

*::-moz-focus-inner {
    border: 0;
}

*,*::before,*::after {
    box-sizing: border-box;
}

input:focus,
input:active,
select:focus,
select:active,
a:focus,
a:active,
button:focus,
button:active,
textarea:focus,
textarea:active {
    outline: none;
    box-shadow: none;
}

input,
select,
textarea,
button {
    margin: 0;
    padding: 0;
    border-radius: 0;
}

select::-ms-expand {
    display: none;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

input, button, textarea, select {
    font: inherit;
}

img, picture, video, canvas {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-size: cover;
}

svg,
i {
    pointer-events: none;
}



/* inter-regular - latin-ext */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/inter/inter-v18-latin-ext-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-500 - latin-ext */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/inter/inter-v18-latin-ext-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-600 - latin-ext */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/inter/inter-v18-latin-ext-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-700 - latin-ext */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/inter/inter-v18-latin-ext-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* Milligram-Condensed 300 */
@font-face {
    font-display: swap;
    font-family: 'Milligram-Condensed';
    font-weight: 300;
    src: url('../fonts/milligram-condensed/Woff2/Milligram-Condensed-Light.woff2') format('woff2'),
    url('../fonts/milligram-condensed/Woff/Milligram-Condensed-Light.woff') format('woff');
}

/* Milligram-Condensed 700 */
@font-face {
    font-display: swap;
    font-family: 'Milligram-Condensed';
    font-weight: 700;
    src: url('../fonts/milligram-condensed/Woff2/Milligram-Condensed-Bold.woff2') format('woff2'),
    url('../fonts/milligram-condensed/Woff/Milligram-Condensed-Bold.woff') format('woff');
}



body {
    font-family: 'Inter', sans-serif;
    color: #000;
    height: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}


header {
    display: flex;
    justify-content: center;
    padding-top: 64px;
}


main {
    > .container {
        max-width: 1200px;
        margin: 0 auto;
    }

    .text-box {
        max-width: 760px;
        margin: 0 auto;
        padding: 64px 0;
        display: flex;
        flex-direction: column;
        gap: 24px;
        text-align: center;
        font-size: 44px;
        font-style: normal;
        font-weight: 600;
        line-height: 106%;
        letter-spacing: -0.44px;

        h2 {
            font-family: 'Milligram-Condensed', sans-serif;
            font-size: 70px;
            line-height: 110%;
            letter-spacing: -1.75px;
            text-transform: uppercase;
        }

        p:not(.small) {
            font-family: 'Milligram-Condensed', sans-serif;
            font-size: 45px;
            font-weight: 700;
            line-height: 110%;
            letter-spacing: -0.9px;
            text-transform: uppercase;
        }

        .small {
            font-size: 23px;
            font-weight: 500;
            line-height: 144%;
            letter-spacing: -0.33px;
        }

        a {
            margin: 0 auto;
            display: flex;
            height: 64px;
            padding: 10px 32px;
            align-items: center;
            border-radius: 100px;
            background-color: #1A76FF;
            color: #FFFFFF;
            font-size: 15px;
            font-style: normal;
            font-weight: 500;
            line-height: normal;
            letter-spacing: -0.15px;
            text-decoration: none;
        }
    }

    .login-box {
        margin: 0 auto;
        padding: 64px 0;
        border-top: 1px solid #D9D9D9;

        > p {
            padding-bottom: 40px;
            text-align: center;
            font-family: 'Milligram-Condensed', sans-serif;
            text-transform: uppercase;
            font-size: 70px;
            font-style: normal;
            font-weight: 600;
            line-height: 116%;
            letter-spacing: -0.32px;
        }

        > ul {
            list-style: none;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;

            > li a {
                border-radius: 24px;
                border: 1px solid #DFDFDF;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 40px;
                width: 100%;
                height: 100%;
                padding: 48px;
                text-decoration: none;

                p {
                    color: #1A76FF;
                    font-size: 14px;
                    font-style: normal;
                    font-weight: 500;
                    line-height: 144%;
                    letter-spacing: -0.09px;
                    display: inline-flex;
                    align-items: center;
                    gap: 10px;
                }
            }
        }
    }
}


footer {
    > .container {
        max-width: 1408px;
        margin: 0 auto;
        padding: 100px 0;
    }

    .footer-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 24px;
        padding: 0 16px;
        color: #737382;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 126%;
        letter-spacing: -0.07px;
    }
}

@media (max-width: 991px) {
    header {
        padding-top: 32px;

        img {
            max-width: 210px;
            max-height: 64px;
        }
    }


    main {
        > .container {
            padding: 0 16px;
        }

        .text-box {
            padding: 56px 0 32px 0;
            gap: 16px;
            font-size: 24px;
            line-height: 106%;
            letter-spacing: -0.48px;

            h2 {
                font-size: 36px;
                line-height: 95%;
                letter-spacing: -0.72px;
            }

            p:not(.small) {
                font-size: 24px;
                line-height: 100%;
                letter-spacing: -0.24px;
            }

            .small {
                font-size: 16px;
                line-height: 116%;
                letter-spacing: -0.24px;
            }

            a {
                height: 42px;
                font-size: 12px;
                line-height: 144%;
                letter-spacing: -0.01px;
            }
        }

        .login-box {
            padding: 32px 0;

            > p {
                padding-bottom: 24px;
                font-size: 36px;
                font-weight: 700;
                line-height: 95%;
                letter-spacing: -0.72px;
            }

            > ul {
                grid-template-columns: 1fr;
                gap: 8px;

                > li a {
                    padding: 24px;
                    flex-direction: row;
                    justify-content: space-between;
                    position: relative;

                    p {
                        font-size: 12px;
                        letter-spacing: -0.01px;
                    }

                    > img {
                        max-width: 86px;
                        max-height: 48px;
                    }
                }
            }
        }
    }


    footer {
        > .container {
            padding: 64px 0;
        }

        .footer-box {
            flex-direction: column;
            font-size: 12px;
            line-height: 144%;
            letter-spacing: -0.06px;
            text-align: center;

            img {
                height: 44px;
            }
        }
    }
}

@media (min-width: 992px) {
    main {
        flex: 1 1 auto;
    }
}