@property --myColor1 {
	syntax: '<color>';
	initial-value: #000;
	inherits: false;
 }
 
 @property --myColor2 {
	syntax: '<color>';
	initial-value: #1e1e1e;
	inherits: false;
 }
 

body {
	margin: 0;
	height: 100vh;
	font-family: Arial, sans-serif;
	background: linear-gradient(135deg, var(--myColor1), var(--myColor2)); /* Базовий фон */
	transition: --myColor1 1s, --myColor2 1s;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20px;
	overflow: hidden;
	z-index: 0;
}

/* Решта стилів */
.wrapper {
	margin: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Стиль для заголовку */
h1 {
	margin-bottom: 20px;
	color: #fff;
 }
 
 /* Контейнер для посилань */
 .links-container {
	display: flex;
	flex-direction: column;
	gap: 20px;
 }
 
 /* Загальний стиль для посилань */
 .link {
	display: block;
	width: 350px;
	padding: 20px;
	text-decoration: none;
	border: 2px solid #fff;
	border-radius: 15px;
	transition: transform 0.3s ease;
 }
 
 /* Стиль заголовку посилання */
 .link-title {
	display: block;
	font-size: 1.5em;
	color: #fff;
	margin-bottom: 5px;
 }
 
 /* Стиль підпису посилання */
 .link-subtitle {
	display: block;
	font-size: 0.9em;
	color: #fff;
	font-weight: 300;
 }
 
 /* Фонові градієнти для кожного посилання */
 .link-rect {
	background: linear-gradient(135deg, #040d0d, #0a1f1f);
 }
 
 .link-bez {
	background: linear-gradient(135deg, #0a121f, #04050d);
 }

 .link-frac {
	background: linear-gradient(135deg, #1f0a0a, #0d0404);
 }

 .link-col {
	background: linear-gradient(135deg, #1e1f0a, #0c0d04);
 }

 .link-anim {
	background: linear-gradient(135deg, #190a1f, #0b040d);
 }
 
 /* Ефект збільшення при наведенні на посилання */
 .link:hover {
	transform: scale(1.05);
 }
 
 /* Зміна фону body при наведенні на посилання за допомогою псевдокласу :has */
 body:has(.link-rect:hover) {
	--myColor1: #040d0d;
	--myColor2: #0a1f1f;
	background: linear-gradient(135deg, var(--myColor1), var(--myColor2)); /* Базовий фон */
 }
 
 body:has(.link-bez:hover) {
	--myColor2: #0a121f;
	--myColor1: #04050d;
	background: linear-gradient(135deg, var(--myColor1), var(--myColor2)); /* Базовий фон */
 }

 body:has(.link-frac:hover) {
	--myColor2: #1f0a0a;
	--myColor1: #0d0404;
	background: linear-gradient(135deg, var(--myColor1), var(--myColor2)); /* Базовий фон */
 }

 body:has(.link-col:hover) {
	--myColor2: #1e1f0a;
	--myColor1: #0c0d04;
	background: linear-gradient(135deg, var(--myColor1), var(--myColor2)); /* Базовий фон */
 }

 body:has(.link-anim:hover) {
	--myColor2: #190a1f;
	--myColor1: #0b040d;
	background: linear-gradient(135deg, var(--myColor1), var(--myColor2)); /* Базовий фон */
 }