/* /////////////////////// General /////////////////////// */
:root {
    --my-text-color: rgba(240, 246, 252, 1);
    --my-text-color-muted: rgba(200, 208, 216, 1);
    --my-secondary-text-color: rgba(139, 148, 158, 1);
    --my-background: rgba(18, 18, 18, 1);
    --bg-step-1: rgba(18, 18, 18, 1);
    --bg-step-2: rgba(28, 28, 28, 1);
    --bg-step-3: rgba(38, 38, 38, 1);
    --bg-step-4: rgba(48, 48, 48, 1);
    --bg-step-5: rgba(58, 58, 58, 1);
    --bg-step-6: rgba(68, 68, 68, 1);
    --bg-step-7: rgba(88, 88, 88, 1);
    --my-background-glass: rgba(18, 18, 18, 0.2);
    --my-background-hover: rgba(22, 27, 34, 1);
    --my-background-glass-hover: rgba(22, 27, 34, 0.2);
    --my-shadow-color: rgba(0, 191, 255, 0.5);
    --sans-serif: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --serif: 'Merriweather', Georgia, serif;
    --step-1: rgba(255, 255, 255, 0.02);
    --step-2: rgba(255, 255, 255, 0.04);
    --step-3: rgba(255, 255, 255, 0.06);
    --step-4: rgba(255, 255, 255, 0.08);
    --step-5: rgba(255, 255, 255, 0.10);
    --electric-blue: #7bd1f3;
    --dark-electric-blue: #103f75;
    --electric-yellow: #fcd34d;
    --amber-gold: #f59e0b;
}
html {
    scroll-behavior: smooth;
}
body{
    font-family: var(--sans-serif);
    color: var(--my-text-color);
    display: flex;
    flex-direction: column;
}
/* /////////////////////// Typography Utilities /////////////////////// */
.serif{
    font-family: var(--serif);
}
.sans-serif{
    font-family: var(--sans-serif);
}
.text-white{
    color: var(--my-text-color);
}
.text-muted{
    color: var(--my-text-color-muted);
}
.text-secondary{
    color: var(--my-secondary-text-color);
}
.text-blue{
    color: var(--electric-blue);
}

.no-decoration{
    text-decoration: none;
}

/* Text Sizes */
.text-xs {
    font-size: 0.75rem;     /* 12px */
    line-height: 1rem;      /* 16px */
}
  
.text-sm {
    font-size: 0.875rem;    /* 14px */
    line-height: 1.25rem;   /* 20px */
}
  
.text-base {
    font-size: 1rem;        /* 16px */
    line-height: 1.5rem;    /* 24px */
}
  
.text-md {
    font-size: 1.125rem;    /* 18px */
    line-height: 1.75rem;   /* 28px */
}
  
.text-lg {
    font-size: 1.25rem;     /* 20px */
    line-height: 1.75rem;   /* 28px */
}
  
.text-xl {
    font-size: 1.5rem;      /* 24px */
    line-height: 2rem;      /* 32px */
}
  
.text-2xl {
    font-size: 1.875rem;    /* 30px */
    line-height: 2.25rem;   /* 36px */
}
  
.text-3xl {
    font-size: 2.25rem;     /* 36px */
    line-height: 2.5rem;    /* 40px */
}
  
.text-4xl {
    font-size: 3rem;        /* 48px */
    line-height: 1;         /* Tight */
}
  
.text-5xl {
    font-size: 3.75rem;     /* 60px */
    line-height: 1;
}
  
.text-6xl {
    font-size: 4.5rem;      /* 72px */
    line-height: 1;
}

.text-left     { text-align: left; }
.text-center   { text-align: center; }
.text-right    { text-align: right; }
.text-justify  { text-align: justify; }

.font-thin     { font-weight: 100; }
.font-light    { font-weight: 300; }
.font-regular  { font-weight: 400; } /* same as .regular */
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; } /* same as .bold */
.font-extrabold{ font-weight: 800; }

.uppercase     { text-transform: uppercase; }
.lowercase     { text-transform: lowercase; }
.capitalize    { text-transform: capitalize; }

.italic        { font-style: italic; }
.not-italic    { font-style: normal; }

.tracking-tight  { letter-spacing: -0.02em; }
.tracking-normal { letter-spacing: 0; }
.tracking-wide   { letter-spacing: 0.05em; }

.indent-sm   { margin-left: 1rem; }   /* 16px */
.indent-md   { margin-left: 2rem; }   /* 32px */
.indent-lg   { margin-left: 4rem; }   /* 64px */

.margin-top-05{
    margin-top: 0.5rem;
}
.margin-top-1{
    margin-top: 1rem;
}
.margin-top-2{
    margin-top: 2rem;
}
.margin-top-3{
    margin-top: 3rem;
}
.margin-top-4{
    margin-top: 4rem;
}
.margin-bottom-05{
    margin-bottom: 0.5rem;
}
.margin-bottom-1{
    margin-bottom: 1rem;
}
.margin-bottom-2{
    margin-bottom: 2rem;
}
.margin-bottom-3{
    margin-bottom: 3rem;
}
.margin-bottom-4{
    margin-bottom: 4rem;
}

.centre-on-screen{
    width: 100%;
    display: flex;
    justify-content: center;
}

.text-shadow-sm {
    text-shadow: 0 0 2px var(--my-text-color);
}
  
.text-shadow {
    text-shadow: 0 0 5px var(--my-text-color); /* Same as your current */
}
  
.text-shadow-lg {
    text-shadow: 0 0 10px var(--my-text-color);
}
  
.no-shadow {
    text-shadow: none;
}
.no-scroll {
    overflow: hidden;
    height: 100vh;
}

/* Animations */
@keyframes blink {
    50% { opacity: 0; }
}