/* -- PROJECT CONTAINER -- */
/* demo-button.css and github-button.css and directly used wit this element
*/

:root {
    --proj-header-font-size: clamp(16px, 4.3vw, 1.15rem); 
}




/* ------- STRUCTURE ------- */
.project {
    display: grid;
    grid-template-areas:
        "proj-name proj-name proj-name"
        "proj-desc proj-desc proj-desc"
        "proj-stack-title proj-stack-title proj-stack-title"
        "proj-stack proj-stack proj-stack"
        "proj-buttons proj-buttons proj-buttons";
    
    grid-template-columns: 2fr 0.5fr 1fr;
    grid-template-rows: auto 1fr auto;
    gap: 1rem;

    margin-bottom:7rem;

    border-radius: var(--corners);
    padding: var(--inner-padding);
    padding-bottom: calc(var(--inner-padding) * 2);
    background-color: white;
    box-shadow: 0 0 7px rgba(17, 17, 17, 0.15);
}



/* ------- TITLE ------- */
.project-name {
    grid-area: proj-name;

    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: left;
    gap: 10px;


}

.project-name h3{
    font-size: var(--proj-header-font-size);
}

/* ------ TYPE ------- */
.project-type {
    font-size: calc(var(--proj-header-font-size) - 8px);
    font-weight: 700;


    border-radius: 10px;
    padding: 2px;
    padding-left: 7px;
    padding-right: 7px;
    margin-top: 0.5px;
}
#project-iOS {
    --iOS-color: #007AFF; /* iOS blue */
    color: var(--iOS-color);
    border: 2.5px solid var(--iOS-color);
}
#proj-android {
    --android-color: #30a866; /* Android green */
    color: var(--android-color); 
    border: 2.5px solid var(--android-color);
}
#proj-web {
    --web-color: #FF5733; /* Web orange */
    color: var(--web-color);
    border: 2.5px solid var(--web-color);
}
#proj-game {
    --game-color: #9B59B6; /* Game purple */
    color: var(--game-color);
    border: 2.5px solid var(--game-color);
}



/* ------- LOGO ------- */
.project-logo {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-top: 1rem;
    height: 8em;
    width: 8em;
    
    float: right;
}

/* ----- DESC ------ */
.project-desc {
    margin-top: 0;
    overflow: auto;
    grid-area: proj-desc;
    padding-left: 0rem;
    padding-right: 0rem;
}
.project-desc p { 
    margin-top: 1rem;
    text-align: start;
    max-width: 600px;
}



/* ----- TECH STACK ----- */
.project-stack-title {
    grid-area: proj-stack-title;
    margin-bottom: -0.5rem;
    font-size: clamp(15px, 3vw, 1rem);
}

.project-stack {
    grid-area: proj-stack;

    display: flex;
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: left;
    gap: 1rem;

    padding: 1rem;
    padding-top: 0;
    padding-bottom: 0.25rem;

    /* border: 2px solid blue; */
}

.project-stack-item {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.project-stack-item i {
    font-size: 2rem;
    color: #444;
    transition: color 0.3s ease;
}

.project-stack-item img {
    height: 2rem;
    width: 2rem;
    color: #444;
    transition: color 0.3s ease;
}

#mysql-img {
    margin-left: -0.25rem;
}

.project-stack-item span {
    display: block;
    position: relative;
    font-size: 1rem;
    color: #333;
    line-height: 1.5;
    transition: 0.4s;
}

.project-stack-item span::after {
    position: absolute;
    opacity: 0;

    right: -20px;
    top: -10px;
    transition: 0.7s;
}

/*javascript*/
.project-stack-item:hover span {
    padding-right: 4.5em;
}

#project-stack-short:hover span {
    padding-right: 3.3em;
}
#project-stack-smaller:hover span {
    padding-right: 2.2em;
}
#project-stack-smallest:hover span {
    padding-right: 1.9em;
}
#project-stack-react:hover span {
    padding-right: 3.2em;
}

#project-stack-html:hover span {
    padding-right: 2.4em;
}
#project-stack-css:hover span {
    padding-right: 1.4em;
}
#project-stack-mysql:hover span {
    padding-right: 3em;
}
#project-stack-firebase:hover span {
    padding-right: 3.5em;
}
#project-stack-swift:hover span {
    padding-right: 2.2em;
}

.project-stack-item:hover span:after {
    opacity: 1;
    right: 0.5vw;
}


/* STACK DIRECTORY */
#stack-javascript::after {
    content: "JavaScript";
}
#stack-express::after {
    content: "Express.js";
}
#stack-node::after {
    content: "Node.js";
}
#stack-html::after {
    content: "HTML";
}
#stack-css::after {
    content: "CSS";
}
#stack-mySQL::after {
    content: "MySQL";
}
#stack-php::after {
    content: "PHP";
}
#stack-mysql::after {
    content: "MySQL";
}
#stack-react::after {
    content: "React.js";
}

#stack-swift::after {
    content: "Swift";
}
#stack-kotlin::after {
    content: "Kotlin";
}
#stack-firebase::after {
    content: "Firebase";
}