/* Общие стили */

* { /* Обнуление стандартных стилей браузера (лучше не трогать) */
    margin: 0;
	padding: 0;
	border: 0;
    /* Запрет на выделение текста с поддержкой нескольких браузеров (чисто эстетический момент, можно убрать) */
    -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
       -khtml-user-select: none; /* Konqueror HTML */
         -moz-user-select: none; /* Устаревшие версии Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
              user-select: none; /* Без префикса, поддерживается в Chrome, Edge, Opera и Firefox */
}

html, body { /* Центрирование основного блока со заголовком, подзаголовком и ссылками по горизонтали */
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
}

body { /* Градиент на фоне страницы (Можно добавлять больше цветов через запятую) */
    background: linear-gradient(325deg, #414141, #0e0e0e, #372850);
    background-size: 100% 200%;
}

main { /* Центрирование основного блока со заголовком, подзаголовком и ссылками по вертикали */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Основные стили */

.content {                          /* Установка шрифта */
    font-family: 'Geologica', sans-serif;
    color: #f4f4f4;               /* Цвет текста на всей странице */
    animation: open 0.5s;           /* Плавное появление элементов при загрузке страницы */
}

.content__title {
    text-align: center;             /* Центрирование заголовка по горизонтали */
    font-weight: 400;               /* "Жирность" шрифта (100/400) */
    font-size: 50px;                /* Размер шрифта */
    margin: 0px 0px 10px 0px;       /* Нижний внешний отступ для разделения заголовка и подзаголовка */
}

.content__title2 {
    text-align: center;             /* Центрирование заголовка по горизонтали */
    font-weight: 400;               /* "Жирность" шрифта (100/400) */
    font-size: 50px;                /* Размер шрифта */
    margin: 0px 0px 60px 0px;       /* Нижний внешний отступ для разделения заголовка и подзаголовка */
}

.content__subtitle {
    text-align: center;             /* Центрирование подзаголовка по горизонтали */
    font-weight: 100;               /* "Жирность" шрифта (100/400) */
    font-size: 25px;                /* Размер шрифта */
    margin: 0px 0px 30px 0px;       /* Нижний внешний отступ для разделения заголовка и кнопок */
}

.content__subtitle2 {
    text-align: center;             /* Центрирование подзаголовка по горизонтали */
    font-weight: 100;               /* "Жирность" шрифта (100/400) */
    font-size: 25px;                /* Размер шрифта */
    margin: 0px 0px 10px 0px;       /* Нижний внешний отступ для разделения заголовка и кнопок */
}

.content__subtitle3 {
    text-align: center;             /* Центрирование подзаголовка по горизонтали */
    font-weight: 400;               /* "Жирность" шрифта (100/400) */
    font-size: 25px;                /* Размер шрифта */
    margin-top: 0px 0px 100px 0px;       /* Нижний внешний отступ для разделения заголовка и кнопок */
}

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

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

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

.links__item:hover {                /* При наведении на кнопку произойдёт: */
    letter-spacing: .05em;          /* увеличение расстояния между буквами в тексте ссылки */
    background-color: #8a0aae;    /* цвет кнопки изменится на #3b3c3c */
    color: #ededed;               /* цвет текста в ссылке изменится на #ededed */
}                                   /* *время выполнения анимации настраивается в свойстве у нужного элемента (61-ая строка) */
.links__tg:hover {                /* При наведении на кнопку произойдёт: */
    letter-spacing: .05em;          /* увеличение расстояния между буквами в тексте ссылки */
    background-color: rgb(68, 152, 211);    /* цвет кнопки изменится на #3b3c3c */
    color: #ededed;               /* цвет текста в ссылке изменится на #ededed */
}
@keyframes open {                   /* Анимация, которая при её старте: */
    from { opacity: 0; }            /* установит прозрачность элементов на 0 */
    to { opacity: 1; }              /* затем поднимёт её до 1 */
}                                   /* *время выполнения анимации настраивается в свойстве у нужного элемента (39-ая строка) */

/* Адаптивность */

@media (max-width: 500px) {         /* При открытии сайта на устройстве шириной менее 500 пикселей */
    * {                             /* все элементы */
        zoom: 0.95;                 /* будут уменьшены до 0.95 от своего исходного размера. */
    }                               /* Адаптивность обычно делается "на глаз", не стоит тут чего-либо менять. */
}

.copyright {
    color: #555555;
}