/*!  Специфічність ("вага" селектора): */
table td:first-child {
    text-align: left;
}


/*! Псевдокласи стану​ */
.box-link {
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    background-color: bisque;
    text-shadow: 2px 2px 20px #ff0000, 5px 5px 5px #444444;
}
.text-main.inherit-font  {
    font-size: inherit; 
}
.subheading-text-main.text-align  {
    text-align: center; 
}

/** hover */
.link1 {
    color: teal;
}
.link1:hover {
    color: red;
    background-color: yellow;
    text-decoration: none;
}

/** focus */
.link2 {
    color: #ff00ff;
}
.link2:hover {
    color: #ff00ff;
    text-decoration: none;
}
.link2:focus {
    color: tomato;
    background-color: royalblue;
}

/** active */
.link3 {
    color: #00c700;
}
.link3:hover {
    color: #00c700;
    text-decoration: none;
}
.link3:active {
    color: white;
    background-color: black;
}

/** visited */
.link4 {
    color: blue;
}
.link4:hover {
    color: blue;
    text-decoration: none;
}
.link4:visited {
    color: blueviolet;
    /* background-color: darkgreen; */
}


/*! Структурні псевдокласи (для роботи з дочірніми елементами) */
/** Головний СПИСОК з прикладами коду */
.list-main {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
}
/** ЄЛЕМЕНТИ Головного списку */
/* .list-main>li>h4 { */
.subheading-text-main {
    margin-top: 0;
}
/* .list-main>li { */
li[class^="list-main-item"] {
    width: 340px;
    height: 135px;
    margin: 0;
    padding: 25px;
    border: 2px solid tomato;
    border-radius: 10px;
    box-shadow: 2px 2px 6px #808080;
}
/* .list-main>li:last-child { */
li[class="list-main-itemlast"] {
    width: 800px;
    height: 78px;
    padding: 0;
}

/** Вкладений СПИСОК з 10-ю єлементами у рядок */
/* list-structural-pseudo-classes */
.list-second {
    height: inherit;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-inline-start: 0;
    list-style: none;
    font-weight: 700;
}
/** ЄЛЕМЕНТИ вкладеного списоку з 10-ю єлементами */
/* item-structural-pseudo-classes */
.list-second-item {
    margin: 0;
    padding: 0;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 2.3;
    color: blue;
    border: 2px solid tomato;
    border-radius: 50%;
}

/** ----------- hover на елементах ----------- */
/** Перший елемент в колекції сусідів */
.list-main-item01:hover,
.list-main-item01:hover .item1, /* ! так не работает */
.list-main-item01:hover ~ li>ul>li.item1,
/** Останній елемент в колекції сусідів */
.list-main-item02:hover,
.list-main-item02:hover ~ li>ul>li.item10,
/** N-й елемент в колекції сусідів */
.list-main-item03:hover,
.list-main-item03:hover ~ li>ul>li.item3,
/** Кожен N-й елемент в колекції сусідів */
.list-main-item04:hover,
.list-main-item04:hover ~ li>ul>li.item1,
.list-main-item04:hover ~ li>ul>li.item4,
.list-main-item04:hover ~ li>ul>li.item7,
.list-main-item04:hover ~ li>ul>li.item10 {
    color: white;
    background-color: tomato;
    text-shadow: 2px 2px 6px #616161;
    box-shadow: 2px 2px 6px #808080;
    border: 2px solid whitesmoke;
}
/** Заголовок h4 кожної картки */
/* .list-main-item01:hover > h4,
.list-main-item02:hover > h4,
.list-main-item03:hover > h4,
.list-main-item04:hover > h4 {
    color: #a6ff00;
} */
li[class^="list-main-item0"]:hover > .subheading-text-main {
    color: #a6ff00;
}

/** Псевдоклас кожної картки */
/* .list-main-item01:hover .pseudo-accent,
.list-main-item02:hover .pseudo-accent,
.list-main-item03:hover .pseudo-accent,
.list-main-item04:hover .pseudo-accent {
    color: #096800; 
} */
li[class^="list-main-item0"]:hover .pseudo-accent {
    color: #096800; 
}

/** Заголовок h4 */
.text-align-center {
    text-align: center;  
}
/** Акцент ваги та кольору на псевдокласі */
.pseudo-accent {
    font-weight: 700;
    color: goldenrod; 
}