/*
index.css 
Last Edited: 6/9/2026
Author: John Wesley Thompson
*/

@font-face {
    font-family: "Inter";
    src: url("/assets/fonts/inter/inter.woff2");
    font-weight: 100 900;
}

@font-face {
    font-family: "Ubuntu";
    src: url("/assets/fonts/ubuntu/ubuntu.woff2");
    font-weight: 400;
}

@font-face {
    font-family: "Xfont";
    src: url("/assets/fonts/custom_x_font.woff2");
    font-weight: 400;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

:root {
    --anchor-font: Inter, sans-serif;
    --header-font: Inter, Xfont, sans-serif;
    --body-font: Ubuntu, sans-serif;

    --heading-font-size: clamp(1.6rem, 1.8vw + 1rem, 3.2rem);
    /* --heading-font-size: 3rem; */
    --base-font-size-lg: clamp(1rem, 0.25vw + 1rem, 1.6rem);
    /* --base-font-size-lg: 1.4rem; */
    --base-font-size-sm: clamp(0.8rem, 0.5vw + 0.5rem, 1.2rem);
    /* --base-font-size-sm: 1rem; */
    --base-line-height: 1.5em;
    /* --base-line-height: 1.5rem; */

    --space-xxs: 0.25rem;
    --space-xs: 0.5rem;
    --space-s: 1rem;
    --space-m: 2rem;
    --space-l: 4rem;

    --primary-text-color: 255, 255, 255, 0.87;
    --secondary-text-color: 255, 255, 255, 0.75;
    --tertiary-text-color: 255, 255, 255, 0.6;

    --blue-accent-rgb: 165 214 255;

    --content-padding: clamp(0rem, 7vw, 20vw);
}

@media screen and (max-width: 1450px) {
    :root {
        --space-xs: 0.25rem;
        --space-s: 0.5rem;
        --space-m: 1rem;
        --space-l: 2rem;
    }
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--body-font);
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    height: 100%;
    background: black;
    color: rgba(var(--primary-text-color));
    display: flex;
}

main {
    background-color: black;
    /* padding-inline: max(0rem, 7vw); */
    padding-inline: clamp(0rem, 7vw, 10vw);
}


#content-section {
    padding-top: 20px;
    overflow: hidden;
    background-color: black;

    font-size: var(--base-font-size-lg);
    z-index: 0;
}

.content-title {
    font-family: var(--header-font);
    font-size: var(--heading-font-size);
    margin: 10px;
    margin-left: 0;
    text-shadow: 
        -2px 2px 2px rgba(214, 125, 64, 0.5), 
        2px -2px 2px rgb(var(--blue-accent-rgb) / 0.5);
}

.content-description {
    padding: 3rem;

    /* font-family: var(--body-font); */
    color: rgba(var(--secondary-text-color));
    line-height: var(--base-line-height);
}

#about-me {
    position: relative;
    background-image: 
        linear-gradient(to bottom, black, rgba(0, 0, 0, 0.2) 20%),
        linear-gradient(to top, black, rgba(0, 0, 0, 0.2) 20%),
        url("/assets/images/grad_wave1_dark_grayscale.JPG");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 60vh;
    min-height: 60dvh;
    padding-inline: clamp(0rem, 3.5vw, 10vw);
    margin: 100px var(--space-l);
    scroll-margin-top: 20vh;

    opacity: 0;
    transition: opacity 3s;
}
#about-me.visible {
    opacity: 1;
}

#about-me h3 {
    transform: translateX(-1ch);
}

#about-me p {
    position: relative;
    z-index: 0;
    padding: 0;
}
#about-me p::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    filter: blur(12px);
    z-index: -1;
}

#skills {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-inline: var(--content-padding);
    margin-block: 5rem;
    scroll-margin-top: 10rem;
    text-shadow: 4px 4px black;
}
#skills p.content-description {
    padding: 0;
    margin-block: 1rem;
}
#skills p.language-info {
    margin: 0;
    margin-bottom: auto;
}
#cpp {
    filter: drop-shadow(0px 5px 10px rgba(0, 68, 130, 0.7));
}
#c {
    filter: drop-shadow(0px 5px 10px rgba(169, 186, 205, 0.7));
}
#python {
    filter: 
        drop-shadow(-5px 5px 5px rgba(53, 112, 160, 0.4))
        drop-shadow(5px 5px 5px rgba(255, 217, 73, 0.4));
}
#js {
    filter: drop-shadow(0px 5px 10px rgba(240, 319, 79, 0.7));
}
#html {
    filter: drop-shadow(0px 5px 10px rgba(228, 77, 38, 0.7));
}
#css {
    filter: drop-shadow(0px 5px 10px rgba(21, 114, 182, 0.7));
}
#webgl {
    filter: drop-shadow(0px 5px 10px rgba(153, 0, 0, 0.7));
    margin-top: var(--space-s);
}
#react {
    filter: drop-shadow(0px 5px 10px rgba(97, 218, 251, 0.7));
}


#skills img {
    /* height: clamp(40px, 4vw, 80px); */
    width: clamp(40px, 4vw, 80px);
    /* height: 70px; */
    margin-right: var(--space-s);
    margin-bottom: auto;
    /* margin-block: auto; */
}
.language-icon-wrapper {
    margin: 1rem;
}

#skill-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(clamp(360px, 30vw ,500px), 1fr));
    row-gap: var(--space-m);
    column-gap: var(--space-l);
    margin-top: 1rem;
    cursor: default;
    color: rgba(var(--tertiary-text-color));
    font-size: var(--base-font-size-sm);
}
.skill {
    display: flex;
    align-items: center;
    line-height: var(--base-line-height);
    transition: transform 0.3s;
}
.skill:hover {
    transform: scaleX(105%) scaleY(105%);

    p.language-info {
        color: rgba(var(--secondary-text-color));
        margin: 0;
        margin-bottom: auto;
    }
}

.highlight {
    color: rgb(var(--blue-accent-rgb) / 0.8);
    font-weight: 700;
}

#tools {
    display: flex;
    list-style-type: none;
    width: 100%;
    margin: 0;
    padding: 0;
}
#tools li {
    display: flex;
    flex-direction: column;
    margin-right: var(--space-m);
    /* flex-grow: 1; */
}

footer {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: 
        "contacts copyright";

    font-size: var(--base-font-size-sm);
    background-color: transparent;
    margin: var(--space-m);
}
footer p {
    grid-area: copyright;
    align-self: end;
    margin-block: 0;
    margin-left: auto;
    /* padding-block: var(--space-s); */
    padding: var(--space-xxs) var(--space-xs);
}
footer a {
    padding: 3px;
    width: fit-content;
    text-decoration: none;
    color: rgba(var(--secondary-text-color));
}
#footer-contact-methods {
    grid-area: contacts;
    display: flex;
    flex-direction: column;
    /* padding-block: var(--space-s); */
}

.back-to-top-btn {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    padding: var(--space-xxs) var(--space-m);
}
.back-to-top-btn:hover {
    text-decoration: underline;
}

@media screen and (max-width: 950px){
    footer {
        grid-template-columns: 1fr 1fr 1fr;
        grid-row: 1fr;
        grid-template-areas: 
            "contacts contacts back-to-top"
            "copyright copyright copyright";
    }

    .back-to-top-btn {
        grid-area: back-to-top;
        justify-self: end;
        align-self: end;
        position: relative;
        left: auto;
        bottom: auto;
        transform: none;
    }

    footer p {
        align-self: start;
        justify-self: start;
        margin-left: 0;
        padding: var(--space-m) var(--space-m);
    }
}

@media screen and (max-width: 540px){
    main {
        padding-inline: 0;
    }
    #about-me {
        margin-inline: 0;
        padding-inline: var(--content-padding);
    }
}