/*
SYNTAX
box-shadow: [horizontal-offset] [vertical-offset] [blur-radius] [spread-radius] [color];
*/

:root {
    /* All Colors */
    --violet: #8A2BE2;
    --indigo: #4B0082;
    --blue: #0000FF;
    --green: #00FF00;
    --yellow: #FFFF00;
    --orange: #FFA500;
    --red: #FF0000;
    --white: #FFFFFF;
    --black: #000000;
    --pink: pink;
    --grey: grey;


    /* Thematic Colors */
    --omnitrix-green: #32B531; /* Used for glowing accents, highlights, or primary action text. */
    --spydey-red: #DF1F2D; /* Used for primary headers or maximum-attention elements. */
    --super-blue: #0099F7; /* Used for stable background blocks, heavy shapes, or secondary text. */
    --deep-space-black: #050505; /* Ties everything together cleanly as the background or thick border. */
    --galactic-purple: #8A2BE2; /* For interactive elements like buttons or links. */
    --sun: #F7B733; /* For backgrounds, gradients, or to add warmth to the design. */


    /* Additional Colors */
    --neon-green: #39FF14; /* Electric aura */
    --laser-crimson: #FF003F; /* High-speed energy */
    --electric-cyan: #00E5FF; /* Futuristic sky hero */
    --dark-charcoal: #121212; /* Matte background to make the neon colors pop */
    --bright-yellow: #FFFF00; /* For warnings, highlights, or to draw attention to specific content. */


    /* Semantic Colors */
    --primary-color: var(--super-blue);
    --primary-contrast-color: var(--white);
    --secondary-color: var(--omnitrix-green);
    --secondary-contrast-color: var(--white);
    --tertiary-color: var(--spydey-red);
    --tertiary-contrast-color: var(--white);

    --surface: var(--white);

    --text: var(--black);
    --sub-text: var(--grey);

    /* Length Units */
    --space-xxs: 0.125;   /* 2px */
    --space-xs: 0.25rem;  /* 4px */
    --space-sm: 0.5rem;   /* 8px */
    --space-md: 1rem;     /* 16px */
    --space-lg: 1.5rem;   /* 24px */
    --space-xl: 3rem;     /* 48px */
    --space-xxl: 6rem;    /* 96px */
}

/* =========================
   LIGHT THEME
========================= */

[data-theme="light"] {
  color-scheme: light;

  --primary: #3498db;
  --secondary: #2ecc71;
  --tertiary: #e74c3c;

  --primary-contrast: #ffffff;

  --body-background: #f4f7fa;

  --background: #ecf0f1;
  --surface: #ffffff;

  --text: #2c3e50;
  --muted-text: #6b7280;

  --border-color: #dcdde1;

  --shadow:
    0 2px 10px rgba(0, 0, 0, 0.08);

  --text-selection-color: #ffffff;

  --text-selection-background: #ff40bc;

  --theme-color: #f4f7fa;
}

/* =========================
   DARK THEME
========================= */

[data-theme="dark"] {
  color-scheme: dark;

  --primary: #4aa3ff;
  --secondary: #2ecc71;
  --tertiary: #ff7675;

  --primary-contrast: #ffffff;

  --body-background: #111827;

  --background: #18212f;
  --surface: #1f2937;

  --text: #f3f4f6;
  --muted-text: #9ca3af;

  --border-color: #374151;

  --shadow:
    0 2px 12px rgba(0, 0, 0, 0.3);

  --text-selection-color: #ffffff;

  --text-selection-background: #ff40bc;

  --theme-color: #111827;
}

/* =========================
   OCEAN THEME
========================= */

[data-theme="ocean"] {
  color-scheme: dark;

  --primary: #00b4d8;
  --secondary: #48cae4;
  --tertiary: #90e0ef;

  --primary-contrast: #001219;

  --body-background: #001219;

  --background: #012a36;
  --surface: #0a1f2e;

  --text: #e0fbfc;
  --muted-text: #94d2bd;

  --border-color: #0a9396;

  --shadow:
    0 2px 12px rgba(0, 0, 0, 0.4);

  --text-selection-color: #001219;

  --text-selection-background: #90e0ef;

  --theme-color: #001219;
}

/* =========================
   FOREST THEME
========================= */

[data-theme="forest"] {
  color-scheme: dark;

  --primary: #2d6a4f;
  --secondary: #40916c;
  --tertiary: #95d5b2;

  --primary-contrast: #ffffff;

  --body-background: #081c15;

  --background: #0b2e23;
  --surface: #1b4332;

  --text: #d8f3dc;
  --muted-text: #95d5b2;

  --border-color: #2d6a4f;

  --shadow:
    0 2px 12px rgba(0, 0, 0, 0.35);

  --text-selection-color: #081c15;

  --text-selection-background: #95d5b2;

  --theme-color: #081c15;
}

@font-face {
    font-family: MyCustomFont;
    src: url('./fonts/MyCustomFont.woff2') format('woff2'),
            url('./fonts/MyCustomFont.woff') format('woff'),
            url('./fonts/MyCustomFont.ttf') format('truetype');
}

/* Debugging Styles 
* {
    border: 1px solid red;
}*/

/* Global Styles Reset */
* {
    margin: 0;
    padding: 0;
}

html {
    /* ==========================================================================
       1. STANDARD CSS METHOD (Firefox)
       ========================================================================== */
    /* Syntax: scrollbar-color: [Thumb Color] [Track Color]; 
    scrollbar-color: #59d835 #ff1f1f;
    scrollbar-width: auto;*/
    /* Removes the track and thumb 
    scrollbar-width: none;*/
}

body {
    background-color: var(--galactic-purple);
}

::selection {
    background-color: var(--galactic-purple); /* Highlighting background color */
    color: #ffffff;            /* Text color when highlighted */
    text-shadow: 2px 2px 4px var(--deep-space-black);
}

a {
    &:visited {
        color: color-mix(in srgb, var(--blue), var(--deep-space-black) 50%);
    }
    &:hover {
        text-shadow: 2px 2px 8px var(--deep-space-black);
    }
    &:active {
        color: color-mix(in srgb, var(--blue), var(--white), var(--deep-space-black) 50%);
        text-shadow: 2px 2px 4px var(--deep-space-black);
    }
}

/*
::-webkit-scrollbar {
    width: min-content;
}
::-webkit-scrollbar-thumb {
    background: var(--secondary-color);
    border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color);
    border: 2px solid black;
}
::-webkit-scrollbar-thumb:active {
    background: var(--tertiary-color);
}
::-webkit-scrollbar-track {
    background: transparent;
}
*/
.primary-button {
    background-color: var(--primary-color);
    border-radius: var(--space-md);
    padding: var(--space-xs);
    color: var(--primary-contrast-color);
    cursor: pointer;
    
    &:hover {
        background-color: var(--secondary-color);
        color: var(--secondary-contrast-color);
        box-shadow: 0 0 15px 0 var(--secondary-color);
    }
    &:active {
        background-color: var(--tertiary-color);
        color: var(--tertiary-contrast-color);
        box-shadow: 0 0 15px 0 var(--tertiary-color);
    }
}

.secondary-button {
    background-color: var(--secondary-color);
    border-radius: var(--space-md);
    padding: var(--space-xs);
    color: var(--secondary-contrast-color);
    cursor: pointer;

    &:hover {
        background-color: var(--primary-color);
        color: var(--primary-contrast-color);
        box-shadow: 0 0 15px 0 var(--primary-color);
    }
    &:active {
        background-color: var(--tertiary-color);
        color: var(--tertiary-contrast-color);
        box-shadow: 0 0 15px 0 var(--tertiary-color);
    }
}

.tertiary-button {
    background-color: var(--tertiary-color);
    border-radius: var(--space-md);
    padding: var(--space-xs);
    color: var(--tertiary-contrast-color);
    cursor: pointer;

    &:hover {
        background-color: var(--secondary-color);
        color: var(--secondary-contrast-color);
        box-shadow: 0 0 15px 0 var(--secondary-color);
    }
    &:active {
        background-color: var(--primary-color);
        color: var(--primary-contrast-color);
        box-shadow: 0 0 15px 0 var(--primary-color);
    }
}

.outline-button {
    background-color: transparent;
    border-radius: var(--space-md);
    padding: var(--space-xs);
    border: 2px solid var(--secondary-color);
    color: var(--secondary-contrast-color);
    cursor: pointer;

    &:hover {
        background-color: var(--tertiary-color);
        color: var(--tertiary-contrast-color);
        box-shadow: 0 0 15px 0 var(--tertiary-color);
        border: none;
    }
    &:active {
        background-color: var(--primary-color);
        color: var(--primary-contrast-color);
        box-shadow: 0 0 15px 0 var(--primary-color);
        border: 2px solid var(--secondary-color);
    }
}

input, textarea {
    background-color: var(--surface);
    color: var(--text);
    border: 2px solid var(--primary-color);
    border-radius: 5px;
    padding: var(--space-xs);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;

    &:focus {
        border-color: var(--secondary-color);
        box-shadow: 0 0 15px var(--secondary-color);
        outline: none;
    }
}

select {
    background-color: var(--secondary-color);
    padding: var(--space-xs);
    cursor: pointer;
}

.website-header {
    padding: var(--space-md);
    background-image: linear-gradient(to bottom, var(--galactic-purple), var(--primary-color) 70%);
}

.website-nav {
    background-color: transparent;
    background-image: radial-gradient(at top, var(--primary-color), transparent 70%);
    color: var(--white);
    backdrop-filter: blur(var(--space-md));
    border-bottom: 2px solid color-mix(in srgb, var(--white), transparent 70%);
    border-end-end-radius: var(--space-md);
    border-end-start-radius: var(--space-md);

    padding: var(--space-md);
    margin-bottom: calc(-1 * var(--space-md));
    position: sticky;
    top: 0;
    z-index: 10;
    
    a {
        text-decoration: none;
        color: var(--white);
    }
}
/*
.website-main {
    filter: blur(20px);

    &:hover {
        filter: blur(0px);
        transition: filter 0.1s ease-in-out;
    }
}
*/
.dialog {
    background-color: transparent;
    position: fixed;
    z-index: 11;
    top: 50%;
    left: 30%;

    backdrop-filter: blur(12px);
}

.back-to-top {
    position: fixed;
    right: 20px;
    background-color: var(--primary-color);
    border-radius: var(--space-md);
    padding: var(--space-xs);
    color: var(--primary-contrast-color);
    box-shadow: 10px 10px 30px 5px var(--black);
    cursor: pointer;

    &:active {
        box-shadow: 0 0 0 0 var(--black);
    }
}

.website-footer {
    background-image: linear-gradient(to bottom, var(--primary-color), var(--galactic-purple));

    padding: var(--space-md) 0 var(--space-md) var(--space-md);
    text-align: center;
}

/* Security */
#print-message {
    display: none;
}
@media print {

    body * {
        display: none;
    }
    #print-message {
        display: block;
        background-image: radial-gradient(var(--primary-color), transparent 70%);
        margin-top: 50%;
        margin-bottom: 50%;
        font-size: 2rem;
        text-align: center;
    }
}

/*====================
 Responsive Design
=================== */
/* Extra small devices (phones, 600px and down) like 385x854 */
@media only screen and (max-width: 600px) {
    h1 {
        font-size: large;
    }
    h2 {
        font-size: larger;
    }
    h3 {
        font-size: medium;
    }
    p {
        font-size: small;
    }
    q {
        font-size: small;
    }
    a {
        font-size: small;
    }
    summary {
        font-size: small;
    }
    address {
        font-size: small;
    }

    .website-nav {
        display: flex;
        justify-content: space-evenly;
    }

    .back-to-top {
        bottom: 100px;
    }
}

/* Small devices (portrait tablets and large phones, 600px to 768px) */
@media only screen and (min-width: 600px) {
    .website-header {
        display: flex;
        justify-content: space-between;

        .website-header-right {
            text-align: right;
        }
    }

    .website-nav {
        text-align: center;
    }

    .back-to-top {
        bottom: 150px;
    }

    .website-footer {
        display: grid;
        grid-template-columns: max-content max-content 1fr;

        .website-footer-logo {
            font-size: x-large;
            align-self: center;
        }

        .website-footer-right {
            border-left: 2px solid var(--black);
            margin-left: var(--space-sm);
            padding-left: var(--space-sm);
        }

        .website-footer-star-tail {
            background: linear-gradient(to right, var(--primary-color), var(--galactic-purple));
            border-radius: 5px 0 0 5px;
        }
    }
}

/* Medium devices (landscape tablets, 768px to 992px) like 854x385 */
/*@media only screen and (min-width: 768px) {}*/

/* Large devices (laptops/desktops, 992px to 1200px) */
/*@media only screen and (min-width: 992px) {}*/

/* Extra large devices (large desktops, 1200px and up) */
/*@media only screen and (min-width: 1200px) {}*/