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

* { /* Обнуление стандартных стилей браузера (лучше не трогать) */
    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);
    background-size: 200% 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__subtitle {
    text-align: center;             /* Центрирование подзаголовка по горизонтали */
    font-weight: 100;               /* "Жирность" установленного шрифта (100/400) */
    font-size: 25px;                /* Размер шрифта */
    margin: 0px 0px 30px 0px;       /* Нижний внешний отступ для разделения заголовка и кнопок */
}

.links__item {
    background-color: #252627;    /* Цвет кнопок */
    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__item > object {
    height: 30px;                   /* Высота (размер) иконки */
    padding: 0px 0px 0px 16px;      /* Внутренний отступ иконки от левой стороны кнопки */
    align-self: center;             /* Выравнивание ссылки по вертикали */
}

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

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

/* Мои доделки */

.comtitle { /* подпись мелким незаметным текстом*/
    margin: 0;
    font: 0.75em sans-serif;
    color: #454545;
}

.hr-line { /* прямая линия разделитель */
	margin: 20px 0;
	padding: 0;
	height: 0;
	border: none;
	border-top: 1px solid #333;
}

.hr-sloping-lines { /* косые линии в разделителе */
	margin: 20px 0;
	padding: 0;
	height: 10px;
	border: none;
	box-sizing: border-box;
	background-position: 50%;
	color: orange;
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="3px" height="3px" viewBox="0 0 3 3" fill="orange"><polygon points="0,0.5 0,1.5 1.5,3 2.5,3"></polygon><polygon points="2.5,0 1.5,0 3,1.5 3,0.5"></polygon></svg>');
	background-size: 6px 6px;
}

/* Конец моих доделок*/

@keyframes open {                   /* Анимация, которая при её старте: */
    from { opacity: 0; }            /* установит прозрачность элементов на 0 */
    to { opacity: 1; }              /* затем поднимёт её до 1 */
}                                   /* *время выполнения анимации настраивается в свойстве у нужного элемента (39-ая строка) */

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

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