* {
    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 {
    .width-640 {
        max-width: 640px;
        margin-inline: auto;
    }

    .width-580 {
        max-width: 580px;
        margin-inline: auto;
    }

    .margin-top {
        margin-top: 32px;
    }

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

    .text-box {
        max-width: 760px;
        margin-inline: 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;

        &.padding {
            padding-top: 80px;
            padding-bottom: 100px;
        }

        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;
        }


        a:not(.button) {
            color: #1A76FF;
        }

        .small {
            font-size: 24px;
            font-weight: 500;
            line-height: 144%;
            letter-spacing: -0.396px;

            a {
                color: #111;
                text-decoration: underline;
            }
        }

        a.button {
            margin-inline: 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-inline: 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: 56px;
            font-style: normal;
            font-weight: 700;
            line-height: 85%;
            letter-spacing: -0.84px;
        }

        >ul {
            list-style: none;
            display: grid;
            grid-template-columns: repeat(4, 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-inline: 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;
        }

        svg {

            width: 56.09px;
            height: 64px;

        }
    }


    main {
        .margin-top {
            margin-top: 24px;
        }

        >.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;
            }

            &.padding {

                padding-top: 48px;
                padding-bottom: 32px;
            }

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

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

            .small {
                font-size: 17px;
                line-height: 144%;
                letter-spacing: -0.109px;

                a {
                    font-size: 17px;
                    line-height: 144%;
                    letter-spacing: -0.109px;
                }
            }
        }

        .login-box {
            padding: 32px 0;

            >p {
                padding-bottom: 24px;
                font-size: 29px;
                font-weight: 700;
                line-height: 100%;
                letter-spacing: -0.29px;
            }

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

                >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 {
        margin-top: auto;

        >.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;
    }
}