:root {
    --red: #ea492c;
    --blue: #3694b7;
    --dark: #3d3d3d;
    --font1: "Geologica";
    --font2: Spectral;
    --grey: #6c6c6c;
    font-size: 14px;
}
body {
    font-family: var(--font1);
    font-weight: 200;
    color: #6c6c6c;
    line-height: 1.2;
}
.title {
    color: green;
}

a {
    color: var(--red);
    text-decoration: none;
    &:hover {
        text-decoration: underline;
    }
}

.container {
    max-width: 1170px;
    margin-left: auto;
    margin-right: auto;
}

.top_container {
    display: flex;
    justify-content: space-between;
    border-bottom: #eeeeee solid 1px;
    padding-bottom: 1.5rem;
    padding-top: 1.5rem;
    .col1 {
        display: flex;
        align-items: center;
        font-weight: 500;
        @media screen and (max-width: 1024px) {
        }
    }
    .col2 {
        display: flex;
        align-items: center;
    }
    .col2 {
        display: flex;
    }
    @media screen and (max-width: 1024px) {
        display: none;
    }
}

.smaller_button {
    height: 32px;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    color: #7f7f7f;
    font-weight: 500;
    align-content: center;
    text-align: center;
    border-radius: 3px;
    box-shadow: inset 0 1px 0.5px #ffffff;
    background-image: linear-gradient(0deg, #e3e6e7 0%, #f1f2f3 100%);
    border: 1px solid #c1c3c3;
    &:hover {
        box-shadow: inset 0 1px 1.5px rgba(0, 0, 0, 0.07);
        background-image: linear-gradient(0deg, #f1f2f3 0%, #dadbdc 100%);
        text-decoration: none;
    }
}

.regular_button {
    padding-left: 1rem;
    padding-right: 1rem;
    width: max-content;
    height: 3rem;
    text-align: center;
    align-content: center;
    font-weight: 500;
    display: block;
    outline: solid 5px rgba(0, 0, 0, 0.1);
    border-radius: 3px;

    &.red {
        box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.41);
        background-image: linear-gradient(0deg, #ed4721 0%, #f95631 100%);
        border: 1px solid #e4421e;
        color: white;
    }

    &:active {
        box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.41);

        filter: none;
    }

    &:hover {
        filter: none;
        box-shadow: inset 0 1px 1.5px rgba(0, 0, 0, 0.17);
        text-decoration: none;
    }
}

.header {
    max-width: 1170px;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    .regular_button {
        width: 100%;
        margin-left: 1rem;
    }
    nav {
        display: flex;
    }
    nav ul {
        list-style: none;
        display: flex;
        gap: 1rem;
        margin-left: 0;
        width: 100%;
        li {
            border-right: dotted 1px;
            padding-right: 1rem;
            a {
                color: inherit;
                &:hover {
                    color: var(--red);
                }
            }
        }
    }
    @media screen and (max-width: 1024px) {
        flex-direction: column;
        nav {
            flex-direction: inherit;
        }
    }
}

.large_button {
    height: 4rem;
    font-size: 1.25rem;
    width: max-content;
    padding-left: 4rem;
    padding-right: 4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    text-align: center;
    border-radius: 3px;
    font-weight: 500;
    outline: solid 5px rgba(0, 0, 0, 0.1);
    span {
        font-size: 0.7rem;
        font-weight: 300;
    }
    &.red {
        box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.41);
        background-image: linear-gradient(0deg, #ed4721 0%, #f95631 100%);
        border: 1px solid #25333d;
        color: white;
    }
    &.green {
        filter: drop-shadow(0 0 1px #231f20);
        box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.41);
        background-image: linear-gradient(0deg, #97c031 0%, #a9d837 100%);
        border: 1px solid #90b633;
        color: #4e670e;
    }
    &:active {
        box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.41);

        filter: none;
    }

    &:hover {
        filter: none;
        box-shadow: inset 0 1px 1.5px rgba(0, 0, 0, 0.17);
        text-decoration: none;
    }
}

.logo {
    color: #212121;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 1px;
}

.breadcrumb_area {
    padding-top: 3rem;
    padding-bottom: 2.5rem;
    text-align: center;
    background-color: #27323d;
    box-sizing: border-box;
    border-bottom: solid 5px rgba(0, 0, 0, 0.2);
}

.breadcrumb_area_heading {
    color: white;
    font-size: 2rem;
    font-weight: 500;
    margin-bottom: 1rem;
}

.breadcrumb_area_heading_second {
    color: var(--blue);
    font-size: 1.25rem;
}

.blog_index {
    margin-top: 4rem;
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 2rem;
    @media screen and (max-width: 1024px) {
        grid-template-columns: 1fr;
    }
}

.blog_row_first_part {
    .blog_title {
        font-size: 2rem;
        font-weight: 500;
        margin-top: 1rem;
        margin-bottom: 0.5rem;
        color: var(--dark);
    }
    .read_this_post {
        font-family: "Spectral";
        font-weight: 400;
        font-style: italic;
    }
    .blog_author {
        padding-bottom: 1rem;
        border-bottom: solid 1px #e4e4e4;
        width: 25rem;
    }
    .excerpt {
        margin-top: 1rem;
        margin-bottom: 1rem;
    }
}

.blog_row_standart {
    display: grid;
    grid-template-columns: 5fr 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
    @media screen and (max-width: 1024px) {
        grid-template-columns: 1fr;
    }
}

.blog_row_second_part {
    display: flex;
    flex-direction: column;
    justify-content: start;
    .day_and_month {
        border: 1px solid #e0e0e0;
        border-radius: 3px;
        height: 4rem;
        width: 40px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .day {
            font-weight: 500;
            font-size: 18px;
        }
        .month {
            font-size: 10px;
            text-transform: uppercase;
        }
    }
    .comments_qty {
        margin-top: 1rem;
        background: url(images/coments_base.svg) no-repeat;
        color: white;
        font-weight: bold;
        display: flex;
        justify-content: center;
        padding-top: 8px;
        width: 42px;
        height: 44px;
    }
    @media screen and (max-width: 1024px) {
        display: none;
    }
}

.blog_sidebar {
    filter: drop-shadow(0 1px 2.5px rgba(35, 31, 32, 0.2));
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    &:last-child {
        margin-bottom: none;
    }
    height: fit-content;
    position: sticky;
    top: 2rem;
    margin-bottom: 3rem;
}

.sidebar_block {
    padding: 1rem;
    border-bottom: solid 1px #dfdfdf;
    .sidebar_block_title {
        font-weight: 500;
        text-transform: uppercase;
        margin-bottom: 1rem;
        color: var(--dark);
    }
    &:last-child {
        border-bottom: none;
    }
    .sidebar_block_vk_message {
        border-radius: 5px;
        background-color: #f8fbfc;
        border: 1px solid #ddeaef;
        padding: 0.5rem;
    }
}

.sidebar_block_description {
    margin-top: 1rem;
    font-family: Spectral;
    font-style: italic;
    color: #6c6c6c;
}
.bubble {
    border-radius: 5px;
    background-color: #f8fbfc;
    border: 1px solid #ddeaef;
    font-size: 13px;
    font-weight: 500;
    height: fit-content;
    width: fit-content;
    padding: 1rem;
    color: var(--dark);
    span {
        font-family: var(--font2);
        color: var(--grey);
        font-style: italic;
        font-weight: 400;
    }
}

.bubble::after {
    background-color: #f8fbfc;
    border-left: 1px solid #ddeaef;
    border-top: 1px solid #ddeaef;

    content: "";
    display: block;
    height: 10px;
    left: 18px;
    position: relative;
    top: 21px;
    transform: rotate(-135deg);
    width: 10px;
}
.logo_vk_for_sidebar {
    padding-top: 10px;
    padding-left: 29px;
}

.section_cta {
    padding-top: 4rem;
    padding-bottom: 4rem;
    background-color: #1e2226;
    .container {
        display: flex;
        gap: 2rem;
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }
}

.CTA_title {
    color: white;
    font-size: 1.5rem;
    text-align: center;
}

.footer_grid {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 2rem;
    line-height: 21px;
    @media screen and (max-width: 1024px) {
        display: flex;
        flex-direction: column;
    }
}

.footer_ul {
    display: flex;
    padding-left: 0;
    li {
        margin-left: 27px;
    }
    li:first-child {
        margin-left: 0;
        list-style-type: none;
    }
}

img {
    max-width: 100%;
}