.cssLink {
  margin: 3rem 0;
  background: var(--background-alt);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px var(--shadow);
  padding: 1.8rem 2.2rem;
}

.cssLink ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cssLink li + li {
  margin-top: 1.2rem;
}

.cssLink a {
  display: block;
  padding: 1.1rem 1.4rem;
  border-radius: 10px;
  text-decoration: none;
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--primary-dark);
  background: #fff;
  border: 1px solid var(--border);
  transition: var(--transition);
}

.cssLink a:hover {
  background: linear-gradient(
    135deg,
    rgba(139, 95, 191, 0.08),
    rgba(152, 216, 200, 0.12)
  );
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(139, 95, 191, 0.15);
}

.cssLink a:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(139, 95, 191, 0.12);
}


@media all and (orientation:portrait) {
  /* Styles for Portrait screen */
}
@media all and (orientation:landscape) {
  /* Styles for Landscape screen */
}