/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
   AoG Theme â€” CoX Dark Sanctum palette
   Variables, fonts, background texture, animations, scrollbars.
   Include on every page.
   â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;900&family=Crimson+Pro:ital,wght@0,300;0,400;1,300&display=swap');

/* â”€â”€ Colour variables â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
:root {
  --gold:             #d4a843;
  --gold-light:       #f0c860;
  --gold-dim:         #8a6820;
  --gold-glow:        rgba(212,168,67,.18);

  --slate-dark:       #0e1117;
  --slate-mid:        #161d27;
  --slate-light:      #1e2838;
  --slate-lift:       #253040;

  --crimson:          #8b1a2a;
  --crimson-bright:   #c0293e;
  --crimson-glow:     rgba(192,41,62,.15);

  --teal:             #1a6e64;
  --teal-bright:      #26a99a;
  --teal-glow:        rgba(38,169,154,.12);

  --olm:              #2a4a3e;
  --green:            #1e6b3a;
  --green-bright:     #2ecc71;

  --discord:          #5865F2;
  --discord-dark:     #404EED;

  --text-main:        #e8dcc8;
  --text-bright:      #f5efe0;
  --text-dim:         #7a8a7e;
  --text-muted:       #4a5a50;

  --border:           #2a3a48;
  --border-gold:      rgba(212,168,67,.25);
  --border-bright:    rgba(212,168,67,.5);

  --complete:         rgba(30,107,58,.4);
  --complete-border:  #2ecc71;

  --stone-1:          #0e1117;
  --stone-2:          #121820;
}

/* â”€â”€ Reset â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* â”€â”€ Scrollbars â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
::-webkit-scrollbar              { width: 6px; height: 6px; }
::-webkit-scrollbar-track        { background: var(--slate-dark); }
::-webkit-scrollbar-thumb        { background: var(--slate-lift); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover  { background: var(--gold-dim); }
*                                { scrollbar-width: thin; scrollbar-color: var(--slate-lift) var(--slate-dark); }

/* â”€â”€ Body â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
body {
  background-color: var(--slate-dark);
  color: var(--text-main);
  font-family: 'Crimson Pro', Georgia, serif;
  min-height: 100vh;
  background-image:
    radial-gradient(ellipse at 15% 10%,  rgba(38,169,154,.05) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 85%,  rgba(212,168,67,.04) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%,  rgba(26,110,100,.03) 0%, transparent 70%),
    url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23263040' stroke-width='0.5' stroke-opacity='0.5'%3E%3Crect x='0' y='0' width='40' height='40'/%3E%3Crect x='40' y='40' width='40' height='40'/%3E%3C/g%3E%3Cg fill='%231a6e64' fill-opacity='0.018'%3E%3Ccircle cx='40' cy='0' r='2'/%3E%3Ccircle cx='0' cy='40' r='2'/%3E%3Ccircle cx='80' cy='40' r='2'/%3E%3Ccircle cx='40' cy='80' r='2'/%3E%3C/g%3E%3C/svg%3E");
}

/* â”€â”€ Animations â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
@keyframes shimmer {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes skelShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes sbpulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .4; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* â”€â”€ Utility: gold shimmer text â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.text-shimmer {
  background: linear-gradient(135deg, var(--gold-dim) 0%, var(--gold-light) 45%, var(--gold) 55%, var(--gold-dim) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 6s ease-in-out infinite;
}
