@font-face {
    font-family: "Montserrat";
    font-weight: 400;
    src:
      url("../css/fonts/static/Montserrat-Regular.ttf") format("ttf"),
}
@font-face {
    font-family: "Montserrat";
    font-weight: 700;
    src:
      url("../css/fonts/static/Montserrat-Bold.ttf") format("ttf"),
}
@font-face {
    font-family: "Montserrat";
    font-weight: 600;
    src:
      url("../css/fonts/static/Montserrat-SemiBold.ttf") format("ttf"),
}
@font-face {
    font-family: "Montserrat";
    font-weight: 500;
    src:
      url("../css/fonts/static/Montserrat-Medium.ttf") format("ttf"),
}
:root {
    --black: #000000;
    --white: #ffffff;
}
body {
    margin: 0;
    padding-inline: 215px;
    font-size: 16px;
    line-height: normal;
    font-weight: 400;
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    height: max-content;
    background-image: url(../images/bg.png);
    @media (width <= 480px) {
        padding-inline: 8px;
        background-position: center center;
    }
}
h1,
h3,
p {
    margin-top: 0;
}
.mainBlock {
    width: 100%;
    max-width: 1320px;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    /* padding-inline: 215px; */
    padding-block: 110px;
    box-sizing: border-box;
    & .titleBlock {
        padding-inline: 125px;
        position: relative;
        & h1 {
            font-size: 128px;
            font-weight: 700;
            display: block;
            margin: 0;
            text-transform: uppercase;
            @media (width <= 480px) {
                font-size: 64px;
            }
            &.title {
                margin-left: 400px;
                @media (width <= 480px) {
                    margin-left: 120px;
                }
            }
        }
        & .squareBlock {
            position: absolute;
            width: 8px;
            height: 8px;
            background-color: var(--black);
            &#firstBlock {
                top: 0;
                left: 0;
            }
            &#secondBlock {
                top: 0;
                right: 0;
            }
            &#thirdBlock {
                bottom: 0;
                right: 0;
            }
            &#fourBlock {
                bottom: 0;
                left: 0;
            }
        }
        @media (width <= 480px) {
            padding-inline: 28px;
        }
    }
    & .messageBlock {
        margin-top: 82px;
        text-align: center;
        @media (width <= 480px) {
            width: 100%;
            margin-top: 107px;
        }
        & h3 {
            font-size: 32px;
            margin-bottom: 63px;
            font-weight: 600;
            @media (width <= 480px) {
                font-size: 24px;
                margin-bottom: 48px;
            }
        }
        & p {
            font-size: 24px;
            margin-bottom: 32px;
            &.textLast {
                margin-bottom: 64px;
                @media (width <= 480px) {
                    margin-bottom: 48px;
                }
            }
            @media (width <= 480px) {
                font-size: 20px;
                margin-bottom: 16px;
            }
        }
        & a {
            text-decoration: none;
            background-color: var(--black);
            color: var(--white);
            padding: 16px;
            border-radius: 16px;
            font-weight: 500;
            font-size: 20px;
            @media (width <= 480px) {
                width: 241px;
                display: block;
                margin-inline: auto;
            }
        }
    }
    @media (width <= 480px) {
        max-width: 480px;
        padding-block: 40px;
    }
}