.links {
    font-size: 1.2rem;
    color: #fff;
    padding: 10px;
    margin: 10px 0;
    border-radius: 5px;
    box-shadow: 6px 6px 4px rgba(0, 0, 0, 0.15);
    background-size: 200% 200%;
    transition: background-position 0.5s ease;
}

/* Плавно наклоняющиеся градиенты с одинаковыми углами */
.links:nth-of-type(1) {
    background: linear-gradient(0deg, #4facfe, #00f2fe); /* 0 градусов */
}
.links:nth-of-type(2) {
    background: linear-gradient(9deg, #4facfe, #00f2fe); /* 9 градусов */
}
.links:nth-of-type(3) {
    background: linear-gradient(18deg, #4facfe, #00f2fe); /* 18 градусов */
}
.links:nth-of-type(4) {
    background: linear-gradient(27deg, #4facfe, #00f2fe); /* 27 градусов */
}
.links:nth-of-type(5) {
    background: linear-gradient(36deg, #4facfe, #00f2fe); /* 36 градусов */
}
.links:nth-of-type(6) {
    background: linear-gradient(45deg, #4facfe, #00f2fe); /* 45 градусов */
}
.links:nth-of-type(7) {
    background: linear-gradient(54deg, #4facfe, #00f2fe); /* 54 градуса */
}
.links:nth-of-type(8) {
    background: linear-gradient(63deg, #4facfe, #00f2fe); /* 63 градуса */
}
.links:nth-of-type(9) {
    background: linear-gradient(72deg, #4facfe, #00f2fe); /* 72 градуса */
}
.links:nth-of-type(10) {
    background: linear-gradient(81deg, #4facfe, #00f2fe); /* 81 градус */
}
.links:nth-of-type(11) {
    background: linear-gradient(90deg, #4facfe, #00f2fe); /* 90 градусов */
}
.links:nth-of-type(12) {
    background: linear-gradient(99deg, #4facfe, #00f2fe); /* 99 градусов */
}
.links:nth-of-type(13) {
    background: linear-gradient(108deg, #4facfe, #00f2fe); /* 108 градусов */
}
.links:nth-of-type(14) {
    background: linear-gradient(117deg, #4facfe, #00f2fe); /* 117 градусов */
}
.links:nth-of-type(15) {
    background: linear-gradient(126deg, #4facfe, #00f2fe); /* 126 градусов */
}
.links:nth-of-type(16) {
    background: linear-gradient(135deg, #4facfe, #00f2fe); /* 135 градусов */
}
.links:nth-of-type(17) {
    background: linear-gradient(144deg, #4facfe, #00f2fe); /* 144 градуса */
}
.links:nth-of-type(18) {
    background: linear-gradient(153deg, #4facfe, #00f2fe); /* 153 градуса */
}
.links:nth-of-type(19) {
    background: linear-gradient(162deg, #4facfe, #00f2fe); /* 162 градуса */
}
.links:nth-of-type(20) {
    background: linear-gradient(171deg, #4facfe, #00f2fe); /* 171 градус */
}





/* Обгортка всього блоку */
.det {
    margin: 30px auto;
    max-width: 100%;
    border-radius: 10px;
    transition: box-shadow 0.3s, background-color 0.3s;
}

/* Активна рамка при розкритті */
.det[open] {
    background-color: rgba(150, 150, 150, 0.1);
    border: 1px solid rgba(150, 150, 150, 0.3);
    box-shadow: 6px 6px 4px rgba(0, 0, 0, 0.1);
    padding: 20px; /* відступи всередині рамки */
    /*padding-top: 0; /* верхній відступ прибираємо, бо summary окремо */
}

.det > summary {
    font-size: 1.5rem;
    font-weight: bold;
    color: #fff;
    padding: 12px 24px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-block;
    margin: 0 0 15px 0;
    border: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    background-size: 200% 200%;
    transition: background-position 0.5s ease;
}

.det > summary:hover {
    background-position: 100% 0;
}

/* Унікальні градієнти для 10 блоків */
.det:nth-of-type(1) > summary {
    background: linear-gradient(45deg, #4facfe, #00f2fe);
}
.det:nth-of-type(2) > summary {
    background: linear-gradient(135deg, #00f2fe, #4facfe);
}
.det:nth-of-type(3) > summary {
    background: linear-gradient(90deg, #4facfe, #00f2fe);
}
.det:nth-of-type(4) > summary {
    background: linear-gradient(225deg, #00f2fe, #4facfe);
}
.det:nth-of-type(5) > summary {
    background: linear-gradient(to top right, #00f2fe, #4facfe);
}
.det:nth-of-type(6) > summary {
    background: linear-gradient(to bottom left, #4facfe, #00f2fe);
}
.det:nth-of-type(7) > summary {
    background: linear-gradient(60deg, #00f2fe, #4facfe);
}
.det:nth-of-type(8) > summary {
    background: linear-gradient(120deg, #4facfe, #00f2fe);
}
.det:nth-of-type(9) > summary {
    background: linear-gradient(200deg, #00f2fe, #4facfe);
}
.det:nth-of-type(10) > summary {
    background: linear-gradient(300deg, #4facfe, #00f2fe);
}
.det:nth-of-type(11) > summary {
    background: linear-gradient(75deg, #00f2fe, #4facfe);
}
.det:nth-of-type(12) > summary {
    background: linear-gradient(150deg, #4facfe, #00f2fe);
}
.det:nth-of-type(13) > summary {
    background: linear-gradient(30deg, #00f2fe, #4facfe);
}
.det:nth-of-type(14) > summary {
    background: linear-gradient(330deg, #4facfe, #00f2fe);
}
.det:nth-of-type(15) > summary {
    background: linear-gradient(to right, #00f2fe, #4facfe);
}
.det:nth-of-type(16) > summary {
    background: linear-gradient(to left, #4facfe, #00f2fe);
}
.det:nth-of-type(17) > summary {
    background: linear-gradient(195deg, #00f2fe, #4facfe);
}
.det:nth-of-type(18) > summary {
    background: linear-gradient(285deg, #4facfe, #00f2fe);
}
.det:nth-of-type(19) > summary {
    background: linear-gradient(15deg, #00f2fe, #4facfe);
}
.det:nth-of-type(20) > summary {
    background: linear-gradient(165deg, #4facfe, #00f2fe);
}

/* Внутрішній контент: відступи з боків */
.det > div {
    padding-left: 20px;
    padding-right: 20px;
}

/* Категорії (заголовки всередині details) */
.det h3 {
    font-size: 1.2rem;
    background-color: #3498db;
    color: #fff;
    padding: 10px;
    margin: 15px 0 10px 0;
    border-radius: 5px;
}

/* Списки */
.det ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.det li {
    margin-bottom: 6px;
}

/* Посилання */
.det a {
    text-decoration: none;
    color: #2980b9;
}

.det a:hover {
    text-decoration: underline;
}