:root {
  --gradient-color-one: #1e3c72;   /* آبی تیره آرام */
  --gradient-color-two: #2a5298;   /* آبی ملایم */
  --gradient-color-three: #4ca1af; /* آبی سبز ملایم */

  --text-color: #f5f5f5;           /* متن روشن */
  --text-selection-color: #ffffff;
  --text-selection-bg: #3a506b;

  --header-one-color: #ffd700;     /* طلایی ملایم برای H1 */
  --header-two-color: #a0c4ff;     /* آبی روشن برای H2 */

  --container-bg: rgba(255, 255, 255, 0.05);
  --border-color: #606680;
  --container-shadow: rgba(0,0,0,0.5);

  --link-color: #67c8f2;
  --link-border: rgba(103, 200, 242, 0.5);
  --link-shadow: rgba(0,0,0,0.3);
  --link-hover: #ffd700;
  --link-hover-bg: rgba(61, 65, 99, 0.5);
  --link-selection: #ffffff;
  --link-selection-bg: #3d4163;

  --footer-bg: rgba(117, 139, 141, 0.07);
  --footer-border: rgba(117, 139, 141, 0.25);
  --footer-shadow: rgba(0,0,0,0.15);
  --footer-link-color: #a0b0b8;
  --footer-link-hover: #ffd700;
  --footer-link-hover-bg: rgba(61, 65, 99, 0.44);
  --footer-link-selection: #ffffff;
  --footer-link-selection-bg: #3d4163;
}


*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
html {
	font-size: 62.5%;
	min-height: 100%;
	font-family: "Rubik farsi";
}
body {
	height: 100dvh;
	justify-content: center;
	align-items: center;
	display: flex;
	text-align: center;
	text-wrap: balance !important;
	background-image: linear-gradient(
		20deg,
		var(--gradient-color-one) 0%,
									  var(--gradient-color-two) 33%,
									  var(--gradient-color-three) 80%
	);
	background-attachment: fixed;
	color: var(--text-color);
	font-size: 1.2rem;
}
*::-moz-selection {
	color: var(--text-selection-color);
	background-color: var(--text-selection-bg);
}
*::selection {
	color: var(--text-selection-color);
	background-color: var(--text-selection-bg);
}
a:link,
a:visited {
	text-decoration: none;
	color: var(--link-hover);
	background-color: var(--link-hover-bg);
	padding: 0.6rem;
	border: solid var(--link-border) 0.1rem;
	border-radius: 0.4rem;
	padding: 0.5rem 1rem;
	transition: color 0.2s, background-color 0.2s;
}
a:hover,
a:focus {
	outline: none;
	background-color: var(--link-selection-bg);
	color: var(--link-selection);
}
a.inline:link,
a.inline:visited {
	text-decoration: none;
	color: var(--link-hover);
	border-radius: 0.4rem;
	padding: 0.5rem 1rem;
	background-color: transparent;
	border: none;
	padding: 0;
}
a.inline:hover,
a.inline:focus {
	outline: none;
	color: var(--link-selection);
}
main {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
p {
	line-height: 2;
	margin: 0.6rem;
}
ul {
	list-style: none;
	display: flex;
	gap: 0.6rem;
	line-height: 2;
	border: 1px solid var(--border-color);
	padding: 0.8rem;
	border-radius: 1rem;
	flex-wrap: wrap;
	justify-content: center;
}
.title {
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
	margin: 1rem 0;
	line-height: 1.4;
}
.img-profile {
	aspect-ratio: 1/1;
	border-radius: 30%;
	height: auto !important;
}
.img-profile:hover{
		transform: scale(1.07) rotate(2deg);
  		box-shadow: 0 0 20px #ffffff33;
}
.title-name {
	font-weight: 800;
}
.title-desc {
	font-weight: 600;
}

/* Added styles for FontAwesome icons */
.fab, .fas {
	margin-left: 0.5rem;
	font-size: 1.4rem;
}