/* 

    * This file contains the core components used by everything else, it
    * is not meant to be structural - simply the bedrock of the website.
    * It it you'll find the colors, text modifiers fonts, etc.

*/

/* ##### ##### ##### ##### ##### */
/* Core Structural */
/* ##### ##### #####*/
:root {
  --bgDark: #212226;
  --bgLight: #ffffff;
  --adminColor: #13151a;
  --silkBlack: rgba(0, 0, 0, 0.349);

  --primary: silver;
  --secondary: ;
  --tertiary: ;
  --accent: #2e4cf2; /* cobalt blast: #2E4CF2 */
  --accent2: #83eaff;
  --shadow: #2e4870;
  --bg: #13151a;
  --bg-creme: #f4f1ea;

  --link: var(--accent);
  --linkHov: var(--accent2);
  --linkText: white;

  /* Font Colors */
  --fc-text: #10192e;
  --fc-special: #3f6bb0;
  --fc-accent: #a02030;

  /* Nav */
  --nav-active: #2e4cf2;

  /* Video Player Colors */
  --vid-box-shadow: none;
  --vid-background-color: var(--primary);
  --vid-control-bg: var(--primary);
  --vid-slider-bg: var(--fc-accent);
  --vid-hover-color: green;
  --vid-text-color: white;

  --color-bg: #f8fafc;
  --color-surface: #ffffff;
  --color-text: #0f172a;
  --color-muted: #475569;
  --color-subtle: #64748b;
  --color-border: #e2e8f0;
  --color-accent: #4f46e5;
  --color-accent-dark: #4338ca;
  --color-accent-soft: #eef2ff;

  --font-main: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 5rem;

  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;

  --shadow-card: 0 0.25rem 1rem rgba(15, 23, 42, 0.05);

  scroll-behavior: smooth;
}
* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  color: var(--fc-text);

  background-color: var(--bg);

  font-size: 14px;
  line-height: 1.6;
  min-height: 100vh;
  background-image:
    radial-gradient(
      ellipse at 30% 20%,
      rgba(0, 89, 255, 0.1) 0%,
      transparent 55%
    ),
    radial-gradient(
      ellipse at 70% 80%,
      rgba(0, 81, 255, 0.06) 0%,
      transparent 55%
    );
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  /* background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0, 0, 0, 0.013) 3px,
    rgba(0, 0, 0, 0.013) 4px
  ); */
  pointer-events: none;
  z-index: 9999;
}
#mini-matrix {
  position: absolute;
  inset: 0;
  opacity: 0.2;
}
/* ##### ##### ##### ##### ##### */
/* ##### ##### ##### ##### ##### */
/*  Text & Fonts */
/* ##### ##### ##### */
a {
  color: var(--link);
  text-decoration: none;
  transition: 0.3s;
  /* font-style: italic; */
}
a:hover {
  color: var(--linkHov);
  transition: 0.3s;
}
@font-face {
  font-family: "Header";
  src: url("/ASSETS/FONTS/PlayfairDisplay-Black.ttf") format("truetype");
  font-style: normal;
}
@font-face {
  font-family: "Logo";
  src: url("/ASSETS/FONTS/PlayfairDisplay-Regular.ttf") format("truetype");
  font-style: normal;
}
@font-face {
  font-family: "Subheader";
  src: url("/ASSETS/FONTS/ShareTechMono-Regular.ttf") format("truetype");
  font-style: normal;
}
@font-face {
  font-family: "Nav";
  src: url("/ASSETS/FONTS/ShareTechMono-Regular.ttf") format("truetype");
  font-style: normal;
}
@font-face {
  font-family: "Paragraph";
  src: url("/ASSETS/FONTS/Inter/Inter-VariableFont_opsz\,wght.ttf")
    format("truetype");
}
@font-face {
  font-family: "Hero";
  src: url("/ASSETS/FONTS/Inter/Inter-VariableFont_opsz\,wght.ttf")
    format("truetype");
}
@font-face {
  font-family: "Inter";
  src: url("/ASSETS/FONTS/Inter/Inter-VariableFont_opsz\,wght.ttf")
    format("truetype");
}
h1 {
  font-family: "Inter", serif;
  font-weight: 900;
  font-size: clamp(2.5rem, 5vw, 2.5rem); /* 40px–48px */
  line-height: 1.2;
  letter-spacing: 0.6px;
  text-transform: capitalize;
}
h2 {
  /* font-family: "Inter", serif;
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.25;
  letter-spacing: 0.5px; */

  margin: 0 0 0.75rem;
  color: #0f172a;
  font-family: "Paragraph", Georgia, "Times New Roman", Times, serif;
  font-size: clamp(2rem, 2rem + 0.5vw, 3rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0.2px;
  color: #e5e9f0;
}
h3 {
  /* font-family: "Inter", serif;
  font-weight: 400;
  font-size: clamp(1.125rem, 3.5vw, 1.25rem); 
  line-height: 1.3;
  letter-spacing: 0.5px;

  color: #e5e9f0; */
  /* margin: 0 0 0.75rem; */
  margin: 0.75rem 0 0.45rem 0;
  color: #0f172a;
  font-family: "Paragraph", Georgia, "Times New Roman", Times, serif;
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.2px;
  color: #e5e9f0;
}
h4 {
  font-family: "Inter", serif;
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 1.5rem); /* 24px */
  line-height: 1.3;
  letter-spacing: 0.4px;
}
p {
  font-family: "Inter", cursive;
  font-size: clamp(1rem, 2vw, 1rem);
  color: #9aa6b8;
}
.p-logo {
  font-family: "Logo", serif;
  font-weight: 600;
  font-size: clamp(2rem, 5vw, 2.2rem);
  line-height: 1.6;
  letter-spacing: 0.6px;
}
.p-logo a {
  color: black;
}
.p-logo a:hover {
  color: var(--fc-accent);
}
.p-logo-subtitle {
  font-weight: 400;
  font-size: clamp(0.7rem, 5vw, 1.5rem);
  line-height: 1.6;
  letter-spacing: 0.6px;
}
.p-paragraph {
  /* font-family: "Playfair Display Regular", serif; */
  /* font-family: "Paragraph", Georgia, "Times New Roman", Times, serif;
  font-size: clamp(0.7rem, 5vw, 1.5rem);

  font-weight: 400;
  line-height: 1.2;

  letter-spacing: 0.6px; */

  margin: 0 0 1.5rem;
  color: #e5e9f0;
  font-family: "Paragraph", Georgia, "Times New Roman", Times, serif;
  font-size: clamp(1rem, 0.95rem + 5vw, 1.175rem);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.1px;

  /* border-left: 4px solid var(--accent); */
  /* padding-left: 7px; */
}
.t-center {
  text-align: center;
}
.break-top {
  margin-top: 14px;
}
/* ##### ##### ##### ##### ##### */
/* ##### ##### ##### ##### ##### */
/* 
    Toolbox Components
*/
/* ##### ##### ##### */
.grid-block {
  width: 100%;
  min-height: 500px;

  display: grid;
}
.flex {
  display: flex;
}
.flex-row {
  display: flex;
  flex-direction: row;
}
.flex-column {
  display: flex;
  flex-direction: column;
}
.flex-row-reverse {
  display: flex;
  flex-direction: row-reverse;
}
.boxshadow {
  -webkit-box-shadow: 5px 5px 15px 5px rgba(0, 0, 0, 0.37);
  box-shadow: 5px 5px 15px 5px rgba(0, 0, 0, 0.37);
}
.margin-center {
  margin: 0px auto;
}
.self-center {
  align-self: center;
}
.justify-center {
  justify-self: center;
}
.align-center {
  align-content: center;
}
.absolute {
  position: absolute;
}
.row {
  display: flex;
  flex-direction: row;
}
.column {
  display: flex;
  flex-direction: column;
}
.box {
  display: flex;

  min-width: 80px;
  min-height: 80px;
  width: 100%;

  margin: 0px auto;
}
.constraint-w-180 {
  max-width: 180px;
}
.constraint-w-350 {
  max-width: 350px;
}
.constraint-w-500 {
  max-width: 500px;
}
.constraint-w-700 {
  max-width: 700px;
}
.constraint-h-500 {
  max-height: 500px;
}
.min-w-180 {
  min-width: 180px;
}
.min-w-300 {
  min-width: 300px;
}
.w-100p {
  width: 100%;
}
.padding-7 {
  padding: 7px;
}
.padding-14 {
  padding: 14px;
}
.padding-bottom-14 {
  padding-bottom: 14px;
}
.padding-left-7 {
  padding-left: 7px;
}
.padding-left-14 {
  padding-left: 14px;
}
.margin-top-7 {
  margin-top: 7px;
}
.margin-top-14 {
  margin-top: 14px;
}
.margin-top-21 {
  margin-top: 21px;
}
.margin-top-28 {
  margin-top: 28px;
}
.margin-bottom-7 {
  margin-bottom: 7px;
}
.margin-bottom-14 {
  margin-bottom: 14px;
}
.bar-thick {
  width: 90%;
  max-width: 900px;
  /* margin: 0px auto; */
  height: 3px;
  background-color: var(--accent);
  margin-top: 14px;
  margin-bottom: 14px;
}
.bar-thin {
  width: 100%;
  height: 1px;
  background-color: var(--accent);
  margin-top: 7px;
  margin-bottom: 7px;
}
.fontclamp-h3 {
  font-size: clamp(0.63rem, 5vw, 1.8rem);
}
.fontclamp-h2 {
  font-size: clamp(0.63rem, 5vw, 2rem);
}
.row-to-column-768 {
  flex-direction: row;
}
.row-to-column-768-reverse {
  flex-direction: row;
}
@media (max-width: 768px) {
  .row-to-column-768 {
    flex-direction: column;
  }
  .row-to-column-768-reverse {
    flex-direction: column-reverse;
  }
}
/* ##### ##### ##### ##### ##### */

/* ##### ##### ##### ##### ##### */
/* Special components for template */
/* [programbox] */
/* 
<div class="programbox">
    <span class="programbox-windowtop">
        <p class="programbox-p-white">Clark Armstrong</p>
        <p class="programbox-p-accent">// About</p>
    </span>
    <div class="programbox-main">

    </div>
</div>
*/
/* ##### ##### ##### */
.programbox {
  display: flex;
  flex-direction: column;

  width: 100%;
  height: auto;
  min-height: 50px;

  border: 1px solid var(--primary);
  -webkit-box-shadow: 3px 3px 0px 0px var(--shadow);
  box-shadow: 3px 3px 0px 0px var(--shadow);
}
.programbox-windowtop {
  display: flex;
  flex-direction: row;

  width: 100%;
  height: 30px;

  background-color: var(--primary);

  border-bottom: 2px solid var(--accent);
  padding-left: 15px;
  padding-top: 3px;
}
.p-article-windowtop-gold {
  font-family: "Subheader", serif;
  font-size: clamp(0.63rem, 5vw, 0.9rem);

  font-weight: 400;
  line-height: 1.6;

  letter-spacing: 0.6px;
  text-transform: uppercase;
  /* color: rgb(200, 134, 10); */
  color: var(--tertiary);
}
.programbox-p-accent {
  font-family: "Subheader", serif;
  font-size: clamp(0.63rem, 5vw, 0.9rem);

  font-weight: 400;
  line-height: 1.6;

  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--fc-accent);
  font-weight: bold;
  padding-left: 12px;
}
.programbox-p-white {
  font-family: "subheader", serif;
  font-size: clamp(0.63rem, 5vw, 0.9rem);

  font-weight: 400;
  line-height: 1.6;

  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: white;

  margin-left: 7px;
}
.programbox-main {
  width: 100%;
  height: auto;
  padding: 15px;
}
@media (max-width: 700px) {
  .programbox-p-accent,
  .programbox-p-white {
    font-size: clamp(0.63rem, 2vw, 0.9rem);
    padding-top: 3px;
  }
}
@media (max-width: 425px) {
  .programbox {
    width: 100%;
  }
}
/* ##### ##### ##### ##### ##### */

/* ##### ##### ##### ##### ##### */
/* Small project portfolio for portfolio page (small thumbnail */
/* ##### ##### ##### */
/* 

<div class="portf-divider-dashed"></div>

<div class="flex-row row-to-column-768 margin-top-14">
  <div class="flex-column portf-thumbnail-small constraint-w-180 padding-bottom-14">
    <img src="./ASSETS/PORTFOLIO/" />
  </div>
  <div class="flex-column w-100p padding-left-14">
    <a href=""><h3 class="fontclamp-h3">Project Title</h3></a>
      <p class="p-article-paragraph">Article blurb here</p>
  </div>
</div>

*/

/* ##### ##### ##### ##### ##### */

/* 
[MISC][Media tags]
@media(max-width: 1024px) {

}
@media(max-width: 768px) {

}
@media(max-width: 425px) {

}
@media(max-width: 375px) {

}
@media(max-width: 320px) {

}
*/