/* Фон для всех страниц(изначально для темной темы)*/
body {
    background: var(--bg-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* --------ШАПКА-------- */
header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    background-color: transparent; 
    z-index: 1000;
}

.container {
    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
    padding: 0 80px 0 80px;
}

.header__inner {
    display: flex;
    justify-content: space-between;
    gap: 85px;
    
    align-items: center;
    
    color: var(--intro_text);
    padding: 40px 0 0 0;
}

.header__nav {
    display: flex;
    justify-content: flex-start;
    gap: 60px;
}

.header__link {
    font-weight: 600;
    font-size: 20px;
    cursor: pointer;
    color: var(--intro_text);
    transition: all .25s ease;
}

.header__link.active {
    text-decoration: underline;
}

.header__link:hover {
    opacity: 0.25;
}
.switch_butt {
    cursor: pointer;
}

.theme_icon {
    margin-top: 25px;
}
/* --------------ГЛАВНАЯ СЕКЦИЯ---------------- */
/* По дефолту стоит фон для темной темы */
.intro {
    width: 100%;
    position: relative;
    min-height: 100vh;
    padding-top: 8%;
}

.intro__inner {
    max-width: 800px;
    z-index: 2;
    position: relative;
    color: var(--intro_text);
}

.main_title {
    font-size: 46px;
    font-weight: 600;
}

.about_text {
    width: 69%;
    font-size: 20px;
    font-weight: 400; /* pls  save it */
    
    margin-top: 30px;
}

/* Re-worked by Kopheek */

.tg_block_mainPage {
    background-color: var(--tg_vk_bg);      /* Цвет кнопок */
    border-radius: 20px;                    /* Скругление углов кнопок */
    height: 50px;                           /* Высота кнопки */
    width: 75%;                             /* Ширина кнопки */
    margin: 30px 0px 10px 0px;              /* Нижний внешний отступ для раздедения кнопок */
    transition: all .25s ease;      /* Плавная подсветка кнопки, на которую наведён курсор (анимация .links__item:hover) */
    display: flex;                  /* Блоковое отображение элементов */
}

.tg_block_mainPage > a {
    display: flex;                  /* Блоковое отображение элементов */
    justify-content: center;        /* Выравнивание ссылки по горизонтали */
    text-decoration: none;          /* Отключение подчёркивания и фиолетового цвета у ссылок */
    color: #f4f4f4;               /* Цвет текста ссылок */
    font-weight: 400;               /* "Жирность" установленного шрифта (100/400) */
    font-size: 20px;                /* Размер шрифта */
    flex: 1 1 auto;                 /* Свойство для заполнения ссылкой всего свободного пространства на кнопке */
    align-self: center;             /* Выравнивание ссылки по вертикали */
    margin: 0px 46px 0px 0px;       /* Правый отступ равный ширине иконки и её отступу для выравнивания ссылки */
}

.tg_block_mainPage > object {
    height: 30px;                   /* Высота (размер) иконки */
    padding: 0px 0px 0px 16px;      /* Внутренний отступ иконки от левой стороны кнопки */
    align-self: center;             /* Выравнивание ссылки по вертикали */
}

/* Анимации */

.tg_block_mainPage:hover {                /* При наведении на кнопку произойдёт: */
    letter-spacing: .05em;                  /* увеличение расстояния между буквами в тексте ссылки */
    background-color: var(--tg-vk-hover);    /* цвет кнопки изменится на #3b3c3c */
    color: #ededed;                        /* цвет текста в ссылке изменится на #ededed */
    opacity: var(--tg-vk-opacity);
}                                             /* *время выполнения анимации настраивается в свойстве у нужного элемента (61-ая строка) */

/* the end of re-working */

.tg_block {
    display: block;
    position: relative;
    padding: 15px 15px;
    gap: 10px;
    width: 40%;
    border-radius: 50px;
    background: var(--tg_vk_bg);
    cursor: pointer;
    
    font-size: 25px;
    font-weight: 600;
    margin-top: 50px;
    color: var(--tg_vk_text);
    
    transition: all .25s ease;
}

.tg_block:hover {
    letter-spacing: .05em;
    opacity: 0.75;
}

.tg_block img {
    position: absolute;
    top: 11px;
    left: 20px;
}

.tg_title {
    margin: 0 0 0 85px;
}
.vk_block {
    display: block;
    position: relative;
    padding: 15px 15px;
    gap: 10px;
    width: 40%;
    border-radius: 50px;
    background: var(--tg_vk_bg);
    cursor: pointer;
    
    font-size: 25px;
    font-weight: 600;
    margin-top: 30px;
    color: var(--tg_vk_text);
    
    transition: all .25s ease;
}

.vk_block:hover {
    letter-spacing: .05em;
    opacity: 0.75;
}

.vk_block img {
    position: absolute;
    top: 11px;
    left: 23px;
}

.vk_title {
    margin: 0 0 0 85px;
}

/* -----------------ПОДВАЛ----------------- */
.footer {
    width: 100%;
    min-height: 100px;
    background-color: var(--footer_bg);
}

.footer__inner {
    padding: 30px 30px 15px 40px;
    font-size: 17px;
    color: var(--footer_text);
    font-weight: 600;
}

.footer__nav {
    width: 55%;
    display: flex;
    justify-content: space-between;
    opacity: 0.5;
    margin-bottom: 20px;
}
.footer__link {
    cursor: pointer;
    color: inherit;
    transition: all .25s ease;
}

.footer__link:hover {
    opacity: 0.25;
}