:root {
  	--theme-color: rgba(70, 70, 70, 0.8);
		--mobile-width: 768px;
  }

  .profile-container {
  	text-align: center;
  	margin-bottom: 1.5rem;
  }

  .profile-picture {
  	width: 80px;
  	height: 80px;
  	border-radius: 50%;
  	object-fit: cover;
  	border: 3px solid var(--theme-color);
  }

  .profile-name {
  	font-size: 1.8rem;
  	font-weight: 600;
  	letter-spacing: 0.06rem;
  	margin-top: 0.5rem;
  }

  .link-list {
  	display: flex;
  	flex-direction: column;
  	flex-wrap: wrap;
  	justify-content: center;
  	gap: 0.75rem;
  }

  .link-button {
  	width: 18rem;
  	text-align: center;
  	padding: 0.75rem 0rem;
  	background-color: var(--theme-color);
  	color: #ffffff;
  	text-decoration: none;
  	border-radius: 0.75rem;
  	font-size: 1rem;
  	transition: transform 0.2s ease;
  	box-shadow: 0.2s ease;
  }

  @media (min-width: 768px) {
  	.link-list {
  		display: flex;
  		flex-direction: row;
  		flex-wrap: nowrap;
  		justify-content: center;
  		gap: 0.3rem;
  	}

  	.link-button {
  		width: 5.8rem;
  	}
  }

  @media (hover: hover) and (pointer: fine) and (min-width: 768px) {
  	.link-button:hover {
  		transform: translateY(-1px);
  		box-shadow: 0px 1px 12px rgba(255, 255, 255, 0.85);
  	}
  }

  @media (hover: hover) and (pointer: fine) and (max-width: 767.98px) {
  	.link-button:hover {
  		transform: translateY(0px);
  		box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.85);
  	}
  }

  @media (hover: none) and (pointer: coarse) {
  	.link-button:active {
  		transform: translateY(0px);
  		box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.85);
  	}
  }