:root {
  --primary-text-colour: rgb(255, 255, 255);
  --secondary-text-colour: linear-gradient(45deg, #f0e4ff, #7eb7ff, #edb982);
  --third-text-colour: linear-gradient(90deg, #5ea6ff, #cc00ff);
  --forth-text-colour: #4898FF;
  --transparent-black: rgba(0, 0, 0, 0.8);
  --section-background: rgb(9, 18, 37);


}


/* backgrounds */

html {
  background-color: #0a0f1e;
  background-image: radial-gradient(
    ellipse at top center,
    #21304e 0%,
    #04060c 60%
  );
  min-height: 100vh;
}

.bg--transparent {
  background-color: var(--transparent-black);
}

.bg--dark-blue {
  background: var(--section-background);
}

/* text colours */

.text--gradient {
  background: var(--secondary-text-colour);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text--gradient-2 {
  background: var(--third-text-colour);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text--white {
  color: var(--primary-text-colour);
}

.text--black {
  color: black;
}

.text--blue {
  color: var(--forth-text-colour);
}

/* AI theme colours */

.gradient-chatgpt {
  background: linear-gradient(135deg, #000000, #444654, #74AA9C);
}

.gradient-gemini {
  background: linear-gradient(135deg, #6F7CDF, #9B72CB, #D96570);
}

.gradient-claude {
  background: linear-gradient(135deg, #F5EFE6, #E6D2B5, #D97757);
}

.gradient-copilot {
  background: linear-gradient(135deg, #69D2E7, #47A1FF, #3B52D4);
}

.gradient-grok {
  background: linear-gradient(135deg, #BEBEBE, #797979, #000000);
}

.gradient-perplexity {
  background: linear-gradient(135deg, #20B2AA, #1D6864, #0D4844, #001916);
}


/* shadows */

.shadow--glow {
  box-shadow:
    0 0 100px 10px rgba(58, 124, 255, 0.788),
    0 0 400px 40px rgba(50, 118, 255, 0.329),
    0 0 800px 80px rgba(50, 118, 255, 0.247);
}

.shadow--glow-sm {
  box-shadow:
    0 0 50px 1px rgba(58, 124, 255, 0.788),
    0 0 80px 2px rgba(50, 118, 255, 0.329),
    0 0 100px 10px rgba(50, 118, 255, 0.247);
}

/* border */

.border--blue {
  border: 1px solid #4898FF;
}