@import "tailwindcss";

@theme {
}
:root {
  /* --vp-home-hero-image-background-image: linear-gradient(
    to top right,
    rgb(249, 168, 212),
    rgb(216, 180, 254),
    rgb(129, 140, 248)
  );
  --vp-home-hero-image-filter: brightness(0.8) saturate(1.2); */
  --vp-home-hero-name-color: rgb(249, 168, 212);
  --vp-c-brand-1: rgb(249, 168, 212);
  --lysand-gradient: linear-gradient(
    to right,
    rgb(249, 168, 212),
    rgb(216, 180, 254),
    rgb(129, 140, 248)
  );
  --vp-color-primary: rgb(249, 168, 212);
  --vp-color-secondary: rgb(216, 180, 254);
  --vp-button-brand-bg: transparent;
  --vp-c-bg-soft: rgb(250, 250, 250);
}

.dark {
  --vp-c-bg: rgb(24, 24, 24);
  --vp-c-bg-soft: rgb(32, 32, 32);
}

.VPFeature {
  border-radius: 0.3rem !important;
  transition: all 0.2s ease-in-out !important;
}

.VPFeature:hover {
  transform: scale(1.02);
  border-color: var(--vp-color-primary);
}

.VPButton.medium {
  border-radius: 0.3rem !important;
  transition: all 0.2s ease-in-out !important;
}

.VPButton.medium:hover {
  transform: scale(1.02);
}

.VPButton.brand {
  background: var(--lysand-gradient);
  border: none !important;
}

@media (min-width: 960px) {
  .image-container {
    width: 50% !important;
    margin-right: 0.5rem !important;
  }
}