/* ========================================
       VARIABLES
    ======================================== */

:root {
    --background-color: #ffffff;
    --heading-color: #1e1e1e;
    --accent-color: #AA4D04;
    --text_2: #5B665B;
    --modal-bg: #ffffffb6;

    --content-width: 500px;
    --page-padding: 20px;
}


@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        --background-color: #ffffff;
        --heading-color: #1e1e1e;
        --accent-color: #AA4D04;
        --text_2: #5B665B;
        --modal-bg: #ffffffb6;

    }
}




@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --background-color: #161616;
        --heading-color: #E0E0E0;
        --accent-color: #AA4D04;
        --text_2: #5B665B;
        --modal-bg: #111111b6;

    }
}





/* =========================================================
   EXPLICIT LIGHT
   ========================================================= */

:root[data-theme="light"] {
    --background-color: #ffffff;
    --heading-color: #1e1e1e;
    --accent-color: #AA4D04;
    --text_2: #424242;
    --modal-bg: #ffffffb6;


}


/* =========================================================
   EXPLICIT DARK
   ========================================================= */

:root[data-theme="dark"] {
    --background-color: #161616;
    --heading-color: #E0E0E0;
    --accent-color: #AA4D04;
    --text_2: #5B665B;
    --modal-bg: #111111b6;


}














@font-face {
    font-family: "Arciform";
    src: url("Arciform.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


::selection {
    background: var(--accent-color);
    color: #FFFFFF;
}


/* ========================================
       SEARCH BOX
    ======================================== */

.search-box {
    width: 250px;
    box-sizing: border-box;

    min-height: 54px;
    padding: 15px 20px;

    background: #1E1E1E;
    color: var(--heading-color);

    border: 1px solid #2A2A2A;
    border-radius: 14px;

    outline: none;
    resize: none;

    font-family: "Arciform", sans-serif;
    font-size: 16px;
    letter-spacing: 0.1em;

    line-height: 1.4;

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
    padding-bottom: 10px;
}

.search-box::placeholder {
    color: #5B665B;
}

.search-box:hover {
    border-color: #3A3A3A;
}

.search-box:focus {
    background: #202020;

    border-color: var(--accent-color);

    box-shadow:
        0 0 0 3px rgba(170, 77, 4, 0.12),
        0 6px 24px rgba(0, 0, 0, 0.3);
}


/* ========================================
       BASE
    ======================================== */

body {
    margin: 0;
    padding: var(--page-padding);

    background-color: var(--background-color);

    font-family: Arial, sans-serif;
    color: var(--heading-color);
}

body {
    font-family: "Arciform", sans-serif;
    letter-spacing: 0.1em;
}


/* Dark scrollbars across the site. */
* {
    scrollbar-color: #3a3a3a var(--background-color);
    scrollbar-width: thin;
}


*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}


*::-webkit-scrollbar-track {
    background: var(--background-color);
}


*::-webkit-scrollbar-thumb {
    background: #3a3a3a;
    border-radius: 10px;
    border: 2px solid var(--background-color);
}


*::-webkit-scrollbar-thumb:hover {
    background: #555555;
}


/* ========================================
       MAIN CONTENT
    ======================================== */

.content {
    width: 100%;
    max-width: var(--content-width);

    margin: 0 auto;

    text-align: center;
}


/* ========================================
       HEADINGS
    ======================================== */

h1,
h2,
h3,
.project-name {
    color: var(--heading-color);
}

h1 {
    margin-top: 0;
}

h2 {
    margin-bottom: 10px;
}

h4 {
    margin-top: 2px;

    color: var(--text_2);
    font-weight: 100;
}


/* ========================================
       LINKS
    ======================================== */

a {
    color: var(--accent-color);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}


/* ========================================
       HEADER
    ======================================== */

.site-title {
    margin-bottom: 2px;
}

a {
    filter: drop-shadow(0 0 10px var(--background-color));
}


/* ========================================
       NAVIGATION
    ======================================== */

.navigation {
    font-size: 16px;
    line-height: 1.8;
}


/* ========================================
       PORTFOLIO
    ======================================== */

.portfolio {
    margin-top: 30px;
    text-align: center;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}

.portfolio-title {
    margin-bottom: 10px;
}

.content1 {
    width: 500px;
    margin: 0 auto;
}







/* Subtle blurred panel behind the hero */
[blur-panel] {
    position: relative;
    z-index: 1;

    padding: 35px 50px;
    padding: 7% 7%;

    background: rgba(var(--background-color), 0.5);

    border: 1.5px solid rgba(255, 255, 255, 0);
    border-radius: 20px;

    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);

    transition: border-color, backdrop-filter 0.4s ease;
}

[blur-panel]:hover {
    border-color: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}








[static-blur-panel] {
    position: relative;
    z-index: 1;

    padding: 35px 50px;
    padding: 7% 7%;

    background: rgba(var(--background-color), 0.5);

    border: 1.5px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    transition: border-color, backdrop-filter 0.4s ease;
}





.contact-form textarea,
.contact-form input {
    border: 1px solid #3a3a3a;
}

.contact-form button .ph {
    margin-top: 0% !important;

}

button [type="submit"] {
    color: white;
}

@media (prefers-color-scheme: light) {
    [aria-label="Email Me"] div {
        background: white !important;
    }
}


.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: #888;
}