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

@import "./reset.css";

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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-white          : #f4f3f2;
  --color-black          : #050811;

  /* 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: "Intergalactica";
  src: url("../fonts/silkscreen.woff2") format("woff2");
  src: url("../fonts/silkscreen.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Sophisticated";
  src: url("../fonts/almendrasc-regular-webfont.woff2") format("woff2");
  src: url("../fonts/almendrasc-regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Cherry";
  src: url("../fonts/GartonMedium.woff2") format("woff2");
  src: url("../fonts/GartonMedium.woff") format("woff");
  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
 */

:root[data-theme="space"] {
  --bg-overlay       : url(../img/twinkles.webp);
  --bg-repeat        : repeat;
  --bg-size          : auto;
  --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-secondary);
  --heading-color     : var(--color-primary);
  --title-color       : var(--color-primary);

  --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        : "Intergalactica", Arial, Helvetica, sans-serif;
  --heading-font     : "Intergalactica", Arial, Helvetica, sans-serif;
  --title-font       : "Intergalactica", Arial, Helvetica, sans-serif;

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

:root[data-theme="sakura"] {
  --bg-overlay        : none;
  --bg-repeat         : no-repeat;
  --bg-size           : cover;
  --true-bg           : #FFF5F7;

  --color-primary     : #FFB7C5;
  --color-secondary   : #8B4566;
  --color-tertiary    : #B4D4E1;
  --color-accent      : #b882b8;
  --color-grounded    : #5D4E37;
  

  --button-rounding   : 0px;
  --button-background : transparent;
  --button-color      : var(--color-accent);

  --text-color        : var(--color-secondary);
  --heading-color     : var(--color-secondary);
  --title-color       : var(--color-secondary);

  --link-color        : var(--color-accent);
  --link-hover-color  : #b47ab4;

  --text-color        : var(--color-secondary);
  --heading-color     : var(--color-primary);
  --title-color       : var(--color-primary);
  
  --byline-size       : var(--text-size-sm);
  --text-size         : var(--text-size-lg);
  --heading-size      : var(--text-size-lg);
  --title-size        : var(--text-size-xl);

  --cursor            : url(../img/sakura_cursor.cur), auto;

  --text-font        : "Cherry", Serif;
  --heading-font     : "Cherry", Serif;
  --title-font       : "Cherry", Serif;
}

:root[data-theme="academia"] {
  --bg-overlay         : url(../img/library.webp);
  --bg-repeat          : no-repeat;
  --bg-size            : cover;
  --true-bg            : #241e1b;

  --link-color         : #C19A6B;
  --link-hover-color   : #ce9c5f;

  --color-primary      : #D4C5B9;
  --color-secondary    : #C5AD8C;
  --color-tertiary     : #F4EDE4; 
  --color-light-accent : #d18f59;
  --color-accent       : #811f07;
  --color-grounded     : #4A3828;

  --button-rounding   : 8px;
  --button-background : var(--color-secondary);
  --button-color      : var(--color-accent);

  --text-color        : var(--color-secondary);
  --heading-color     : var(--color-secondary);
  --title-color       : var(--color-secondary);

  --link-color        : var(--color-light-accent);
  --link-hover-color  : var(--color-accent);
  
  --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         : "Sophisticated", Arial, Helvetica, sans-serif;
  --heading-font      : "Sophisticated", Arial, Helvetica, sans-serif;
  --cursor            : url(../img/academia_cursor.cur), auto;
}

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

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

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

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

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

  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-300p { width: 300px }

.w-400p { width: 400px }

.w-700p { width: 700px }

.w-800p { width: 800px }

.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 } 

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


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

.left-1 { left: 1rem }


.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 }


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

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


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

.p-1 { padding: 1rem }

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

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


.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-70p { margin-top: 70px }

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

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


.text-center { text-align: center }

.text-left { text-align: left }


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

.block { display: block }


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

/* COLORS AND BACKGROUNDS */

#bg-overlay {
  background-image: var(--bg-overlay);
  background-repeat: var(--bg-repeat);
  background-size: var(--bg-size);
  position: fixed;
  z-index: -9999;
}

.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) }


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

.hidden { display: none }


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

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

.borderless { border: none !important }

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


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


.bg-space {
  height: calc(100% + 200px);
  width: calc(100% + 300px);
  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;
  }
}