/*
  CSS playground
  Страница специально почти без оформления.
  Пишите решения ниже и сразу смотрите на результат в браузере.
*/

body {
  margin: 20px;
  font-family: Arial, sans-serif;
  line-height: 1.5;
}

h1, h2 {
  margin-bottom: 8px;
}

section, article, header {
  margin-bottom: 24px;
}

.card {
  margin: 12px 0;
  padding: 12px;
  border: 1px solid black;
}

.tag {
  font-size: 14px;
}

code {
  font-family: monospace;
}

/* ===================== ВАШИ РЕШЕНИЯ ===================== */

/* Задание 1 */
/* .tag { color: ...; } */
.tag {
  font-size: 14px;
  color: purple;
}
/* Задание 2 */
/* #css-docs { color: ...; } */
#css-docs {
  color: green;
}
/* Задание 3 */
/* .topics > ul > li { background: ...; } */
.topics > ul > li:not(:has(ul)) {
  background-color: yellow;
}
/* Задание 4 */
/* .topics > ul > li:nth-child(2) { font-weight: ...; } */
.topics > ul > li:nth-child(2) {
  font-weight: 900;
}
/* Задание 5 */
/* .card[data-level="easy"] { border-color: ...; } */
.card[data-level="easy"] { 
  border-color: blue;}
/* Задание 6 */
/* .card:hover { transform: ...; } */
.card:hover {
  transform: translateY(-10px);
}
/* Задание 7 */
/* .note p:first-of-type { color: ...; } */
.note p:first-of-type {
  color: chocolate;
}
/* Задание 8 */
/* .special h2::before { content: "..."; } */
.special h2::before {
  content: "★";
}