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

@import "./reset.css";

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: none;
  -moz-font-smoothing: none;
}

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 {
  /* COLORS */
  --color-trueblack      : #000000;
  --color-purple         : #6b4c9a;
  --color-cyan           : #4ecdc4;
  --color-lightblue      : #7dd3fc;
  --color-green          : #00a745;
  --color-red            : #a70c0c;
  --color-gold           : #c49c00;
  --color-silver         : #c7c7c7;
  --color-white          : #f4f3f2;
  --color-black          : #050811;
  --color-blue           : navy;
  --color-skyblue        : #1084d0;
  --color-grey           : silver;

  /* TYPOGRAPHY */
  --text-size-xs         : 0.5rem;
  --text-size-sm         : 0.8rem;
  --text-size-md         : 1rem;
  --text-size-lg         : 1.5rem;
  --text-size-xl         : 2rem;

  /* SIZING */
  --sidebar-width        : 300px;

  /* BREAKPOINTS */
  --breakpoint-sm        : 576px;
  --breakpoint-md        : 768px;
  --breakpoint-lg        : 992px;
  --breakpoint-xl        : 1200px;

  /* BORDERS */
  --rounding             : 8px;

  /* SPACING */
  --button-padding       : 0.5rem;

  /* COMPONENTS */
  --button-rounding      : 25px;
  --button-background    : transparent;
  --button-border        : 1px solid var(--color-secondary);
}

@font-face {
  font-family: "Sans98";
  src: url("../fonts/mssans.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}
/* 
 * STYLE GUIDE
 * 
 * BG - background (duh)
 * primary - headings, accents
 * secondary - text, borders
 * tertiary - secondary backgrounds
 * accent - links, buttons
 * grounded - footer, other "base of the pillar", elements
 */

/* don't forget... [data-foo="bar"] */
:root {
  --true-bg          : var(--color-black);

  --color-gold       : #c49c00;
  --link-color       : var(--color-gold);
  --link-hover-color : #66e9e0;

  --color-primary    : #6b4c9a;
  --color-secondary  : #87e0fc;
  --color-tertiary   : #01352c;
  --color-accent     : #4ecdc4;
  --color-grounded   : rgba(7, 17, 26, 0.1);

  --button-color     : var(--color-secondary);

  --text-color        : var(--color-black);
  --heading-color     : var(--color-white);
  --title-color       : var(--color-white);

  --cursor           : url(../img/space_cursor.cur), auto;
  
  --byline-size          : var(--text-size-sm);
  --text-size            : var(--text-size-md);
  --heading-size         : var(--text-size-lg);
  --title-size           : var(--text-size-xl);

  --text-font        : "Sans98", Arial, Helvetica, sans-serif;
  --heading-font     : "Sans98", Arial, Helvetica, sans-serif;
  --title-font       : "Sans98", Arial, Helvetica, sans-serif;

  --button-animation : button-invert-anim;
}

html {
  cursor: var(--cursor);
}

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

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

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

@keyframes falling-background {
  0% {
    transform: translateX(-64px)
  }

  100% {
    transform: translateX(0px)
  }
}

@keyframes pulsing-background {
  0% {
    background-color: transparent;
    color: var(--color-accent);
  }
  50% {
    background-color: var(--color-accent);
    color: var(--color-black);
  }
  100% {
    background-color: transparent;
    color: var(--color-accent);
  }
}

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

/* DIMENSIONS */

.w-full { width: 100% }

.w-fit { width: fit-content }

.w-100p { width: 100px }

.w-200p { width: 200px }

.w-400p { width: 400px }

.w-600p { width: 600px }

.w-1800p { width: 1800px }

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

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


.h-min-100vh { min-height: 100vh }

.h-full { height: 100% }

.h-fit { height: fit-content }

.h-80p { height: 80px }

.h-100p { height: 100px }

.h-200p { height: 200px }

.h-300p { height: 300px }

.h-400p { height: 400px }

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

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

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

.h-min-100vh { min-height: 100vh }

.h-90pct { height: 90% }


.aspect-1-1 { aspect-ratio: 1/1 }

/* ============================================== */
/* 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 }

.pos-fixed { position: fixed }


.top-0 { top: 0 }

.top-200p { top: 200px }

.left-0 { left: 0 }

.left-1 { left: 1rem }

.left-300p { left: 300px }

.bottom-0 { bottom: 0 }

.right-0 { right: 0 }


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

.z-0 { z-index: 0 }

.z-1 { z-index: 1 }


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

.justify-content-evenly { justify-content: space-evenly }

.justify-content-between { justify-content: space-between }


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

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


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

.p-0 { padding: 0 }

.p-02 { padding: 0.2rem }

.p-05 { padding: 0.5rem }

.p-1 { padding: 1rem }

.pt-2 { padding-top: 2rem }

.pl-1 { padding-left: 1rem }


.gap-01 { gap: 0.1rem }

.gap-05 { gap: 0.5rem }

.gap-1 { gap: 1rem }

.gap-2 { gap: 2rem }

.gap-4 { gap: 4rem }


.m-auto { margin: 0 auto }

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

.mt-2 { margin-top: 2rem }

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

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.my-auto {
  margin-top: auto;
  margin-bottom: auto;
}


.text-center { text-align: center }

.text-left { text-align: left }


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

.block { display: block }


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

/* COLORS AND BACKGROUNDS */

#bg-overlay {
  position: fixed;
  z-index: -9999;
}

.bg-winblue-gradient { background: linear-gradient(to right, var(--color-blue), var(--color-skyblue)) }

.bg-grey { background-color: var(--color-grey) }

.bg-red { background-color: var(--color-red) }

.bg-blue { background-color: var(--color-blue) }

.bg-body { background-color: var(--true-bg) }

.bg-none { background: none }

.bg-repeat { background-repeat: repeat }

.bg-cover { background-size: cover }

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

.text-white { color: var(--color-white) !important }

.text-accent { color: var(--color-accent) !important }


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

.hidden { display: none }

.no-overflow { overflow: hidden }


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

.bordered { border: 2px solid }

.borderless { border: none !important }

.rounded {
  border-radius: var(--rounding);
  background-clip: content-box;
}

.bordered.border-gold { border-color: var(--color-gold)}

.bordered.border-silver { border-color: var(--color-silver)}

.text-glow-gold { text-shadow: 1px 0px 3px var(--color-gold), -1px 0px 3px var(--color-gold) }

.text-glow-silver { text-shadow: 1px 0px 3px var(--color-silver), -1px 0px 3px var(--color-silver) }

.hover-cursor-pointer:hover { cursor: pointer }

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

/* Definitions */

.text {
  font-family: var(--text-font);
  color: var(--text-color);
  font-size: var(--text-size);
}

.heading {
  font-family: var(--heading-font);
  color: var(--heading-color);
  font-size: var(--heading-size);
}

.title {
  font-family: var(--title-font);
  color: var(--title-color); 
  font-size: var(--title-size);
}

.text-restriced { width: 75ch }


/* Text decoration */

.text-underline { text-decoration: underline }

.text.text-underline { text-decoration-color: var(--color-secondary) }

.heading.text-underline { text-decoration-color: var(--color-primary) }

.title.text-underline { text-decoration-color: var(--color-primary) }


/* Font sizing */

.fs-xs { font-size: var(--text-size-xs) !important }

.fs-sm { font-size: var(--text-size-sm) !important }

.fs-md { font-size: var(--text-size-md) !important }

.fs-l { font-size: var(--text-size-lg) !important }

.fs-xl { font-size: var(--text-size-xl) !important }


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

.window-nav-button {
  height: 14px;
  width: 16px;
  font-size: 0;
}

.minimize {
  background-image: url("../img/minimize.svg");
  background-position: bottom 2px left 50%;
  background-repeat: no-repeat;
}

.bg-snow {
  background-image : url(../img/preview_medium.gif);
  background-size: auto;
  background-repeat: repeat;
  height: calc(100% + 64px);
  width: calc(100% + 64px);
  animation: falling-background 20s linear infinite;
} 

.bg-space {
  background-image         : url(../img/twinkles.webp);
  background-repeat  : repeat;
  background-size          : auto;
  height: calc(100% + 400px);
  width: calc(100% + 600px);
  animation: moving-background 40s linear infinite;
}

.link {
  color: var(--link-color);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.link:hover {
  color: var(--link-hover-color);
  text-decoration: underline;
}

.link-active {
  color: var(--link-hover-color);
  text-decoration: underline;
}

.container {
  width: 100%;
  max-width: var(--breakpoint-xl);
  padding: 0 1rem;
  position: relative;
}

.btn {
  border: var(--button-border);
  border-radius: var(--button-rounding);
  color: var(--button-color);
  background: var(--button-background);
  padding: var(--button-padding);
  cursor: var(--cursor);
  transition: all .3s ease-in-out;
}

:root[data-theme="space"] .btn:hover {
  animation: pulsing-background 1.5s infinite;
}


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

.main { margin: 0 auto }

.cursor-pointer { cursor: pointer }


/* ============================================== */
/*                     MEDIA                      */
/* ============================================== */

@media (prefers-reduced-motion: reduce) {
  .twinkles {
    animation: none;
  }
}

/* md breakpoint */
@media (max-width: 768px) {
  .stack-md {
    flex-direction: column;
  }

  #site-nav {
    width: 100%;
  }

  .nav-button {
    display: block;
  }

  .nav-list {
    display: none;
  }

  .nav-list.active {
    display: flex;
    flex-direction: column;
  }

  .nav-padder {
    display: none;
  }
}