:root {

    /* MAIN PORTFOLIO CONTAINER */
    --portfolio-container-width:980px;
    --portfolio-container-height:585px;

    /* IMAGE BUTTON */
    --profile-image-button-size:430px;

    /* INTRODUCTION CONTAINER */
    --introduction-width:548px;
    --introduction-height:430px;

    /* INTRODUCTION TITLE */
    --intro-title-size:54px;

    /* PARAGRAPH */
    --intro-paragraph-size:18px;

    /* PORTFOLIO PAGE TITLE */
    --portfolio-title-size:72px;
    --portfolio-title-top-spacing:30px;
    --portfolio-title-bottom-spacing:20px;
    
    /* FILTER BUTTONS */
    --portfolio-filter-font-size:28px;
    --portfolio-filter-gap:44px;
    --portfolio-filter-offset:var(--portfolio-icon-bottom-spacing);
    --portfolio-filter-hover-scale:1.15;

    /* ICON SETTINGS */
    --portfolio-icon-size:48px;
    --portfolio-icon-scale:1.1;
    --portfolio-icon-gap:30px;
    --portfolio-icon-top-spacing:10px;
    --portfolio-icon-bottom-spacing:20px;

    /* NAVIGATION */
    --portfolio-navigation-bottom-spacing:20px;

    /* COLORS */
    --portfolio-font-color:#DFE6E9;
    --portfolio-filter-hover-color:#4bcffa;
    
    /* DYNAMIC CONTAINER */
    --dynamic-container-width:980px;
    --dynamic-container-top-spacing:40px;

    /* PROJECT */
    --project-width:980px;
    --project-height:350px;

    /* PROJECT SPACING */
    --project-spacing:100px;

    /* VISUAL */
    --project-visual-width:580px;
    --project-visual-height:350px;

    /* CONTENT */
    --project-content-gap:30px;
    --project-title-size:36px;
    --project-info-size:22px;

    /* RESPONSIBILITY BUTTON */
    --responsibility-button-opacity:0.65;
    --responsibility-button-fill:rgba(0,0,0,var(--responsibility-button-opacity));
    --responsibility-button-font-size:14px;
    --responsibility-button-offset:5px;

    /* BUTTONS */
    --project-button-width:150px;
    --project-button-height:50px;
    --project-button-font-size:16px;
    --project-button-hover-scale:1.05;
    --project-button-fill:#4A90E2;
    --itch-io-button-fill:#FF4D4D;
    --steam-page-button-fill:#000000;
    --github-project-button-fill:#FAFBFC;

}


/* PAGE CONTENT */
.page-content {

    width:var(--portfolio-container-width);
    margin:0 auto;
    padding-top:calc(155px + 20px);
    display:flex;
    flex-direction:column;
    align-items:center;

}


/* PORTFOLIO INTRODUCTION CONTAINER */
.portfolio-introduction-container {

    width:100%;
    height:var(--portfolio-container-height);
    display:flex;
    justify-content:space-between;
    align-items:center;

}


/* PORTFOLIO TITLE */
.portfolio-title {

    width:100%;
    margin-top:var(--portfolio-title-top-spacing);
    margin-bottom:var(--portfolio-title-bottom-spacing);
    font-family:"Open Sans",sans-serif;
    font-size:var(--portfolio-title-size);
    font-weight:700;
    color:var(--portfolio-font-color);
    text-align:center;

}

/* FILTER BAR */
.portfolio-filter-bar{

    display:flex;
    justify-content:center;
    align-items:center;
    gap:var(--portfolio-filter-gap);
    margin-top:var(--portfolio-filter-offset);

}

.dynamic-container{

    width:var(--dynamic-container-width);
    margin-top:var(--dynamic-container-top-spacing);
    display:flex;
    flex-direction:column;
    align-items:center;

}

/* FILTER BUTTON */
.portfolio-filter-button{

    background:none;
    border:none;
    padding:0;
    cursor:pointer;

    font-family:"Open Sans",sans-serif;
    font-size:var(--portfolio-filter-font-size);
    font-weight:700;
    color:var(--portfolio-font-color);

    transform-origin:center;
    transition:transform .2s ease;

}

.portfolio-project{

    width:var(--project-width);
    height:var(--project-height);
    display:flex;
    justify-content:space-between;
    margin-bottom:var(--project-spacing);

}

.project-visual{

    width:var(--project-visual-width);
    height:var(--project-visual-height);
    position:relative;

}

.project-visual img{

    width:100%;
    height:100%;
    object-fit:cover;

}

/* RESPONSIBILITY BUTTON */
.responsibility-button {

    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    border:none;
    background:transparent;
    cursor:pointer;
    transition:.2s;

}


/* DARK OVERLAY ONLY ON HOVER */
.responsibility-button:hover {

    background:var(--responsibility-button-fill);

}


/* RESPONSIBILITY TEXT DEFAULT STATE */
.responsibility-content {

    position:absolute;
    left:var(--responsibility-button-offset);
    bottom:var(--responsibility-button-offset);
    color:var(--portfolio-font-color);
    font-family:"Open Sans",sans-serif;
    font-size:var(--responsibility-button-font-size);
    text-align:left;
    opacity:0;
    transition:.2s;

}


/* SHOW TEXT ONLY WHEN BUTTON IS HOVERED */
.responsibility-button:hover .responsibility-content {

    opacity:1;

}


.responsibility-title {

    font-weight:700;

}


.responsibility-content ul {

    margin:5px 0 0 18px;
    padding:0;

}

.project-information{

    width:calc(
        100%
        - var(--project-visual-width)
        - var(--project-content-gap)
    );

    margin-left:var(--project-content-gap);
    display:flex;
    flex-direction:column;

}

.project-button-container {

    margin-top:auto;
    display:flex;
    justify-content:space-between;
    align-items:flex-end;

}

.portfolio-filter-button:not(.active):hover{

    color:var(--portfolio-filter-hover-color);
    transform:scale(var(--portfolio-filter-hover-scale));

}

.project-name{

    margin:0;
    font-family:"Open Sans",sans-serif;
    font-size:var(--project-title-size);
    font-weight:700;
    color:var(--portfolio-font-color);
    white-space:nowrap;

}

.project-details{

    margin-top:20px;

}

.project-details p{

    margin:6px 0;
    font-family:"Open Sans",sans-serif;
    font-size:var(--project-info-size);
    color:var(--portfolio-font-color);

}

.learn-more-button{

    width:var(--project-button-width);
    height:var(--project-button-height);
    margin-top:20px;
    background:none;
    border:2px solid var(--portfolio-font-color);
    color:var(--portfolio-font-color);
    font-family:"Open Sans",sans-serif;
    font-size:var(--project-button-font-size);
    cursor:pointer;
    transition:.2s;

}

.learn-more-button:hover{

    transform:scale(var(--project-button-hover-scale));

}

.external-project-button{

    width:var(--project-button-width);
    height:var(--project-button-height);
    background:var(--project-button-fill);
    border:none;
    color:var(--portfolio-font-color);
    font-family:"Open Sans",sans-serif;
    font-size:var(--project-button-font-size);
    font-weight:700;
    cursor:pointer;
    transition:.2s;

}


/* PROJECT SPECIFIC EXTERNAL BUTTON COLORS */
.steam-button{

    background:var(--steam-page-button-fill);

}


.itch-button{

    background:var(--itch-io-button-fill);

}


.github-button{

    background:var(--github-project-button-fill);

}


.external-project-button:hover{

    transform:scale(var(--project-button-hover-scale));

}

/* ====================================================== */
/* IMAGE HOVER SCALE */
/* ====================================================== */

.portfolio-image-button,
.project-visual {

    transition:transform .2s ease;

}


/* SCALE UP 5% ON HOVER */

.portfolio-image-button:hover,
.project-visual:hover {

    transform:scale(var(--project-button-hover-scale));

}

.portfolio-filter-button.active{

    color:var(--header-hover-color);

}

/* IMAGE BUTTON */
.portfolio-image-button {

    width:var(--profile-image-button-size);
    height:var(--profile-image-button-size);
    border:none;
    padding:0;
    cursor:pointer;
    background:none;

}


.portfolio-image-button img {

    width:100%;
    height:100%;
    object-fit:cover;

}


/* INTRODUCTION */
.introduction-container {

    width:var(--introduction-width);
    height:var(--introduction-height);
    display:flex;
    flex-direction:column;
    align-items:center;
    position:relative;

}


/* INTRODUCTION TITLE */
.introduction-title {

    margin:0;
    font-family:"Open Sans",sans-serif;
    font-size:var(--intro-title-size);
    font-weight:700;
    color:var(--portfolio-font-color);
    text-align:center;

}


/* ICON BAR */
.portfolio-icon-bar {

    display:flex;
    justify-content:center;
    gap:var(--portfolio-icon-gap);
    margin-top:var(--portfolio-icon-top-spacing);
    margin-bottom:var(--portfolio-icon-bottom-spacing);

}


/* ICON BUTTON */
.portfolio-icon-button {

    width:var(--portfolio-icon-size);
    height:var(--portfolio-icon-size);
    transform:scale(var(--portfolio-icon-scale));
    border:none;
    background:none;
    padding:0;
    cursor:pointer;
    position:relative;

}


/* ICON IMAGES */
.portfolio-icon-button img {

    position:absolute;
    width:100%;
    height:100%;
    object-fit:contain;
    left:0;
    top:0;
    transition:opacity .2s ease;

}


/* HIGHLIGHTED ICON DEFAULT STATE */
.portfolio-icon-highlighted {

    opacity:0;

}


/* HOVER SWITCH */
.portfolio-icon-button:hover .portfolio-icon-normal {

    opacity:0;

}


.portfolio-icon-button:hover .portfolio-icon-highlighted {

    opacity:1;

}


/* PARAGRAPH */
.introduction-text {

    width:90%;
    align-self:center;
    font-family:"Open Sans",sans-serif;
    font-size:var(--intro-paragraph-size);
    color:var(--portfolio-font-color);
    text-align:left;

}


/* NAVIGATION */
.portfolio-navigation {

    position:absolute;
    bottom:var(--portfolio-navigation-bottom-spacing);
    display:flex;
    gap:20px;

}


.github-text{

    color:#000000;

}

.portfolio-navigation button {

    background:none;
    border:none;
    color:var(--portfolio-font-color);
    font-family:"Open Sans",sans-serif;
    font-size:16px;
    font-weight:700;
    cursor:pointer;

}


.portfolio-navigation button:hover {

    color:#FFC20A;

}

/* ====================================================== */
/* DYNAMIC PROJECT VISIBILITY (Used for specific company applications)*/
/* ====================================================== */
.portfolio-project.hidden-project {

    display:none;

}