/*! Наслідування стилів */
/* ? -- Стилізуємо body -- */
body {
    padding-top: 8px;
    /* color: #2a2a2a; */
    color: #500000;
    background-color: #fffddd;
}

body,
header,
main,
section,
footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin: 0px;
}


/*! Скидання (налаштування) стилів */
/* ? Зображення */
img {
    display: block;
    /* max-width: 100%; */
    height: auto;
}

/* ? Убираем стандартные отступы и маркеры для упорядоченных списков */
ul,
ol {
    /* margin: 0; */
    /* padding: 0; */
    /* list-style: none; */
    /* text-align: center; */
    color: #663399;
    font-size: 18px;
}

/*? Єлементи списків */
li {
    margin-bottom: 8px;
}

/* ? Убираем подчеркивание и стандартные стили для ссылок */
a {
    padding-left: 5px;
    padding-right: 5px;
    /* Убираем подчеркивание */
    text-decoration: none;
    /* Используем цвет текста родительского элемента (наследование цвета) */
    color: inherit;
    /* Делаем курсор указателем для обозначения, что это кликабельный элемент */
    cursor: pointer;
    
}

/* ? Добавляем стили для ссылки при наведении */
a:hover {
    text-decoration: underline;
    /* Добавляем подчеркивание при наведении */
    color: olive;
    /* Меняем цвет текста при наведении */
}

/* ? Додаем стили для таблиц */
table {
    border-collapse: collapse;
}

table th,
table td {
    padding: 10px;
    border: 1px solid #2a2a2a;
}

table td {

    color: green;
    font-size: larger;
}
table td:first-child {
    /* min-width: 240px; */
    text-align: center;
    color: red;
    font-size: larger;
}

/* ? определяем модель размеров для элемента */
/* *{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
} */
/*! ================================================================= */




/*! КНОПКИ-СТРЕЛКИ */
/* ?Кнопка-стрелка (общие стили) */
.arrow-button {
    position: fixed;
    right: 30px;
    /* bottom: 30px; */
    display: inline-block;
    width: 70px;
    height: 70px;
    margin: 0;
    padding: 0;
    border: none;
    background-color: transparent;
    background-image: url("https://img.icons8.com/officel/80/circled-up-2.png");
    background-size: contain;
    cursor: pointer;
}

/* ? Кнопка-стрелка "наверх" */
.up-button {
    /* position: fixed;
    right: 30px; */
    bottom: 30px;
    /* display: inline-block;
    width: 70px;
    height: 70px;
    margin: 0;
    padding: 0;
    border: none;
    background-color: transparent;
    background-image: url("https://img.icons8.com/officel/80/circled-up-2.png");
    background-size: contain;
    cursor: pointer; */
}

/* ? Кнопка-стрелка "вниз" */
.down-button {
    /* position: fixed;
    right: 30px; */
    top: 30px;
    /* display: inline-block;
    width: 70px;
    height: 70px;
    margin: 0;
    padding: 0;
    border: none;
    background-color: transparent;
    background-image: url("https://img.icons8.com/officel/80/circled-up-2.png");
    background-size: contain;
    cursor: pointer; */
}

/*? Поворот Кнопки-стрелка на 180 градусов */
.rotate180 {
    transform: rotate(180deg);
}


/*! header */
/* ? Стилізуємо nav */
nav {
    text-align: center;
    color: brown;
    font-size: 18px;
    /* outline: 1px solid red */
}

/* ? Стили для тексту */
.text-bold {
    font-weight: bold;
}
.text-italic {
    font-style: italic;
}
.text-underline {
    text-decoration: underline;
}

.text-lesson-number {
    text-align: center;
    color: blue;
    font-size: 24px;
}

.title-lesson {
    text-align: center;
    color: tomato;
}

.title-content {
    color: #0000ff;
}

.list-content {
    color: #7f00d4;
}

.text-larger {
    font-size: larger;
}




/*! main */
/*? Заголовки змісту */
div[id^="d"] {
    color: #4169e1;
    margin-top: 80px;
    font-style: italic;
    /*! new style */
    font-size: 24px; 
}

/*? Контейнер основного тексту */
.box-main {
    width: 800px;
}
/* ? Основний текст */
.text-main {
    font-size: 18px; 
    text-indent: 40px; 
    text-shadow: 2px 2px 6px #808080;
}

/*? Колір акценту основного тексту */
.color-accent {
    color: #dc143c;
}

/*? Заголовки h4 */
.subheading-text-main {
    color: darkred;
    font-size: 20px;
}

/* ? Поворот текстового элемента на 180 градусов */
.rotated-text {
    display: inline-block;
    transform: rotate(180deg);
    }

.helpful-source-information-bck {
    background-color:#ffff00;
}

.helpful-source-information-icon {
    color:#ff1493;
}

.border-outline {
    outline: 2px solid tomato;
}

/*? ----- colors ----- */
.color-red {
    color: #ff0000;
}
.color-green {
    color: #008000;
}
.color-blue {
    color: #0000ff;
}
.color-tomato {
    color: #ff6347;
}
.color-goldenrod {
    color: #daa520;
}
.color-lightseagreen {
    color: #20b2aa;
}
.color-violet {
    color: #b400b4;
}
/*? ----- background-colors ----- */
.bck-color-black {
    background-color: #000000;
}
/*? ---------------------------- */

/*? ----- Блок с кодом ----- */
.box-pre {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}

.box-code {
    font-size: 24px; 
    color: #a3a3a3; 
    text-shadow: 2px 2px 6px #646464;
}