/* ============================================== */
/*                     GLOBAL                     */
/* ============================================== */

@import "./reset.css";

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
}

a {
  text-decoration: none;
}

/* Minimum width for responsivity per WCAG 2.2 § 1.4.10 Reflow */
/* https://www.w3.org/TR/WCAG22/#reflow */
html {
  min-width: 320px;
}

:root {

  --card-colour           : rgba(7, 17, 26, 0.1);
  --card-hover-colour     : rgba(8, 19, 29, 0.2);
  --border-colour         : #01352c;

  --colour-black          : #050811;
  --colour-secondary      : #87e0fc;
  --colour-trueblack      : #000000;
  --colour-purple         : #6b4c9a;
  --colour-cyan           : #4ecdc4;
  --colour-lightblue      : #7dd3fc;
  --colour-green          : #00a745;
  --colour-red            : #a70c0c;
  --colour-gold           : #c49c00;
  --colour-white          : #f4f3f2;

  --byline-size           : 0.8rem;
  --byline-letter-spacing : 0.096rem;
  --byline-word-spacing   : 0.128rem;
  --byline-line-height    : 1.2rem;
  
  --text-size             : 1rem;
  --text-letter-spacing   : 0.12rem;
  --text-word-spacing     : 0.16rem;
  --text-line-height      : 1.5rem;

  --title-size            : 2rem;
  --title-letter-spacing  : 0.24rem;
  --title-word-spacing    : 0.32rem;
  --title-line-height     : 3.6rem;

  --heading-size          : 1.5rem;
  --heading-letter-spacing: 0.18rem;
  --heading-word-spacing  : 0.24rem;
  --heading-line-height   : 2.25rem;

  --rounding              : 8px;
}


/* ============================================== */
/*                   ANIMATIONS                   */
/* ============================================== */

@keyframes moving-background {
  0% {
    transform: translate(-300px, -200px);
  }

  100% {
    transform: translate(0px, 0px);
  }
}


/* ============================================== */
/*                   STRUCTURE                    */
/* ============================================== */

/* DIMENSIONS */

.w-full { width: 100% }

.w-fit { width: fit-content }

.w-300p { width: 300px }

.w-400p { width: 400px }

.w-700p { width: 700px }

.w-max-1200p { max-width: 1200px }

.w-min-400p { min-width: 400px }


.h-full { height: 100% }

.h-fit { height: fit-content }

.h-70p { height: 70px }

.h-200p { height: 200px }

.h-300p { height: 300px }

.h-500p { height: 500px }

.h-600p { height: 600px }

.h-min-400p { min-height: 400px }

.h-min-1000p { min-height: 1000px } 


/* ============================================== */
/* FLEXBOX */

.flex { display: flex }

.flex-col { flex-direction: column }

.flex-row { flex-direction: row }



/* ============================================== */
/* GRID */

.grid { display: grid }

.grid-2-col {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}


/* ============================================== */
/* POSITIONING */

.pos-rel { position: relative }

.pos-abs { position: absolute }


.z-0 { z-index: 0 }

.z-neg-1 { z-index: -1 }



.j-content-center { justify-content: center }


.a-items-center { align-items: center }

.a-self-center { align-self: center }


/* ============================================== */
/* SPACING */

.pad-1 { padding: 1rem }


.gap-1 { gap: 1rem }

.gap-2 { gap: 2rem }

.gap-4 { gap: 4rem }


.m-auto { margin: 0 auto }

.m-top-1 { margin-top: 1rem }

.m-top-200p { margin-top: 200px }


.t-align-center { text-align: center }

.t-align-left { text-align: left }


/* ============================================== */
/* OTHER */

.block { display: block }

/* ============================================== */
/*                      SKIN                      */
/* ============================================== */

/* COLOURS AND BACKGROUNDS */

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

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

.bg-repeat { background-repeat: repeat }

.bg-cover { background-size: cover }

.bg-blur { backdrop-filter: blur(2px) }


/* ============================================== */
/* VISIBILITY */

.hidden { display: none }


/* ============================================== */
/* BORDERS AND SHADOWS */

.bordered { border: 2px solid var(--border-colour) }

.rounded { border-radius: var(--rounding) }


/* ============================================== */
/* TYPOGRAPHY */

.text {
  font-size: var(--text-size);
  letter-spacing: var(--text-letter-spacing);
  word-spacing: var(--text-word-spacing);
  line-height: var(--text-line-height);
}

.heading {
  font-size: var(--heading-size);
  letter-spacing: var(--heading-letter-spacing);
  word-spacing: var(--heading-word-spacing);
  line-height: var(--heading-line-height);
}

.title {
  font-size: var(--title-size);
  letter-spacing: var(--title-letter-spacing);
  word-spacing: var(--title-word-spacing);
  line-height: var(--title-line-height);
}


/* ============================================== */
/*                  COMPONENTS                    */
/* ============================================== */


.twinkles {
  background-image: url(../img/twinkles.gif);
  height: calc(100% + 200px);
  width: calc(100% + 300px);
  animation: moving-background 40s linear infinite;
  position: fixed;
}