/*  
    CSS  by Jaime Creixems - https://webjac.com | https://webj.ac/bio 
    Licensed CC 4.0 - v8.0
    Last modified: April 2024
*/

/* Basics
-----------------------------------------------------------------------------*/

* { box-sizing: border-box; scroll-behavior: smooth; }


html { 
    font-size: 16px; 
    --text-color: #505355;
    --title-color: #191a1b;
    --link: #31BED1;
    --link-hover: #017488;
    --main-bg: #fdfdfd;
    --skill: #4d5052;
    --secondary-bg: #131517;
    --semigray: #555656;
    --lightgray: #a9a9aa;
    --superlightgray: #dddedf;
    --ultralightgray: #f3f5f6;
    --ultralightgray70: #f3f5f690;
    --accent: #017488;
    --black-200: #262A2D;
    --black-300: #2E373B;

    --main-font: "Figtree", sans-serif;
    --secondary-font: "Inter", sans-serif;

    --font-p: 1rem;
    --font-title-l: 2.4rem;
    --font-title-m: 2rem;
    --font-title-ms: 1.6rem;

    --font-title-s: 1.35rem;
    --font-p-xs: 0.9rem;

}
body { text-align: left; margin: 0px; background: var(--main-bg); padding: 0px; font-family: var(--main-font); outline: none; color: var(--text-color); }

p, li { line-height: 135%; font-size: var(--font-p); }
p { text-align: left; margin: 0 0 1.1rem;  }
em { font-style: italic; }
strong { font-weight: bold; }

ul { text-align: left; margin: 0 0 1rem 1rem; padding: 0 0 0 0; }
li { margin: 0; padding: 0 0 0.5rem; }
ul li ul { text-align: left; margin: 0 0 0 20px; list-style-position: inside; }
ul li ul li { margin: 0; padding-bottom: 0.5rem; list-style-type: disc; }
a { color: var(--link); text-decoration: none; outline: none; transition: all ease-in-out 0.2s; }
a:hover { color: var(--link-hover); text-decoration: none; transition: all ease-in-out 0.2s; }

.printspacer, .onlyprint { display: none; }

/* Layout
-----------------------------------------------------------------------------*/
.h-resume { display: flex; flex-wrap: wrap; }

.main-name { font-size: var(--font-title-l); letter-spacing: -1px; margin: 1rem 0 0;}
.main-title { font-size: var(--font-title-s); font-weight: 300; letter-spacing: -1px; color: var(--light); margin: 0.6rem 0;}
.main-location { font-size: var(--font-p-xs); opacity: 0.5; margin: 0 0 1rem; }

.contact ul { list-style: none; margin: 0 0 1.8rem; display: flex; gap: 2%;  flex-wrap: wrap; }
.contact li { font-size: var(--font-p); margin: 0; width: 49%  }
.contact li a { display: inline-flex; line-height: 1.4rem; align-items: center;  }
.contact li i { font-size: 1.3rem; padding: 0 0.5rem 0 0;  }

.button { cursor: pointer; display: inline-block; padding: 0.5rem 1rem; margin: 1rem 0 0 0; background: transparent; border:solid 1px var(--accent); color: var(--accent); font-size: var(--font-p-xs); border-radius: 6px; font-weight: 400;}
.button:hover { background: var(--accent); border-color: var(--accent);  color: var(--main-bg); }


/* Navigation
-----------------------------------------------------------------------------*/
.navigation { position: fixed; top: 1.5rem; left: 1.5rem;  color: var(--black-200); background-color: var(--ultralightgray70); border-radius: 12px; padding: 1.3rem; font-weight: 700; backdrop-filter: blur(30px);   }

.navigation p { text-transform: uppercase; }

.navigation .navitem { display: block; padding: 0.5rem 0; font-weight: 300; color: var(--semigray); text-transform: capitalize;}
.navigation .navitem:hover { color: var(--link);}

/* Pro Info
-----------------------------------------------------------------------------*/
.pro-info { padding: 4rem 2rem; max-width: 60rem; margin: auto; }
.pro-info .area-title { margin: 5rem 0 1rem; text-transform: uppercase; font-size: 2rem; }

/* .experience, .education, .bio { border-left: solid 1px var(--superlightgray); padding: 0 0 0 2rem; } */

/* Personal Info
-----------------------------------------------------------------------------*/
.me { 
    display: grid;
    grid-template-columns: 25% auto ; 
        grid-template-areas: 
            "photo name"
            "photo title"
            "photo location"
            "photo contact";
    border-bottom: solid 1px var(--superlightgray); }
.me .profilepic { grid-area: photo; display: block; object-fit: cover; width: 90%; margin: 1rem 0 2rem; border-radius: 50%; }

.main-name { grid-area: name; }
.main-title { grid-area: title;}
.main-location { grid-area: location;}
.contact { grid-area: contact;}
.me h2.area-title { margin: 1.6rem 0 0.8rem; text-transform: uppercase; font-size: var(--font-title-s); }
.me h2.area-title i { font-size: var(--font-title-m);}


/* Skills
-----------------------------------------------------------------------------*/
.skills { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 2rem 3%;}
.skill-type { width: 31%; }
.pro-info .skill-type .area-title {  margin: 1rem 0;font-size: var(--font-p-s); font-weight: 600; }
.skill-type ul {  margin: 0; }
.skill-type li { list-style: none; background: var(--ultralightgray); border-radius: 4px; padding: 0.3rem 0.6rem; margin: 0.3rem 0.1rem; display: inline-block; font-size: var(--font-p-xs); color: var(--skill); }

.interestshobbies .skill-type { width: 48%; }
.references ul { margin: 0; display: flex; flex-wrap: wrap; row-gap: 0.8rem; padding: 0.5rem 0;}
.references li.reference { width: 50%; list-style: none; background: transparent; padding: 0; } 


/* Jobs and Studies
-----------------------------------------------------------------------------*/
.work, .study { 
    display: grid; 
    grid-template-columns: 16% auto ; 
    grid-template-areas: 
        "duration org"
        "location position "
        "null description";
    margin: 2rem 0 3rem;
}

.work .organization, .study .organization { grid-area: org; text-transform: uppercase; font-size: var(--font-p); color: var(--semigray); margin: 0; font-weight: 300; }
.work .position, .study .position { grid-area: position;  font-size: var(--font-title-ms); font-weight: 600; margin: 0.5rem 0 1rem 0; letter-spacing: -1px; color: var(--title-color); }
.work .description, .study .description { grid-area: description; font-size: 1rem; }

.work .duration, .study .duration { grid-area: duration; margin:0 0 0.4rem; color: var(--lightgray); font-size: 1rem; letter-spacing: -0.5px; }
/*.work .duration:before, .study .duration:before { font-family: 'Line Awesome Free'; content: "\f133";  font-weight: 900; padding-right: 0.3rem; }*/

.work .p-location, .study .p-location { grid-area: location; margin:0 0 0.7rem; color: var(--lightgray); font-size: 1rem; letter-spacing: -0.5px; }
/*.work .p-location:before, .study .p-location:before { font-family: 'Line Awesome Free'; content: "\f041";  font-weight: 900; padding-right: 0.3rem; }*/


/* Projects
-----------------------------------------------------------------------------*/
.projects { display: flex; flex-wrap: wrap; justify-content: space-between;  }

.project { width: 49%; min-height: 120px; border-radius: 5px; padding: 0.8rem; margin: 0.7rem 0; border: solid 1px var(--superlightgray); display: flex; flex-wrap: wrap; align-content: flex-start; }

.project .p-category { display: block; color: var(--lightgray); font-size: 0.95rem; width: 50%; text-align: right; letter-spacing: -1px; }
.project .duration { display: block; color: var(--lightgray); font-size: 0.95rem; width: 50%; letter-spacing: -1px;  }
.project .p-name { font-size: 1.3rem; margin: 0.7rem 0 0.4rem; width: 100%; }
.project .p-summary { font-size: 1rem; width: 100%; }


/* Footer
------------------------------- */
.footer { width: 100%; text-align: center; margin: 4rem 0 2rem; font-size: var(--font-p-s); opacity: 0.8;  }


/*-----------------------------------------------------------------------------*/
.hide { display: none !important; }
.pagebreaker {display: none;}

/* Media Queries
-----------------------------------------------------------------------------*/

@media (prefers-color-scheme: dark) {
    html {
        --text-color: #d1d9dd;
        --title-color: #ecf1f5;
        --link: #31BED1;
        --link-hover: #017488;
        --main-bg: #131517;
        --skill: #808589;
        --secondary-bg: #131517;
        --semigray: #555656;
        --lightgray: #454647;
        --superlightgray: #434343;
        --ultralightgray: #1c1e1f;
        --ultralightgray70: #20212190;
        --accent: #017488;
        --black-200: #c1cfda;
        --black-300: #bbd3de;
    }
  }


@media screen and (max-width: 780px) {
    html { 
        font-size: 15px;
        --font-title-l: 2.2rem;

        --font-title-s: 1.2rem;
    }

    .navigation { display: none; }
    .pro-info { width: 98%; padding: 0.7rem; }
    .me { 
        margin: 1rem 0;
        grid-template-columns: 25% auto ; 
        grid-template-areas: 
            "photo name"
            "photo title"
            "photo location"
            "contact contact";    
    }

    .work, .study { 
        display: grid; 
        grid-template-columns: 80% auto ; 
        grid-template-areas: 
            "duration duration"
            "org location"
            "position position"
            "description description";
        margin: 2rem 0 3rem;
    }

    .footer { display: none; }
    .skill-type {width: 48%;}
    .project { width: 48%;}
}

@media screen and (min-width: 781px) and (max-width: 1200px) {
    .navigation { display:flex; gap: 1.3rem; align-items: center; padding: 0.8rem 1rem; position: static; margin: 2rem auto 0; }
    .navigation p { display:none; }
    .navigation .navitem { display: flex; padding: 0; }
    .navigation .button { margin: 0;}
}

@media print {
    @page { size: A4 portrait; margin: 0.25in 0; }
    
    html { font-size: 9px; }
    body { margin: 0; }
    li { margin: 0; padding: 0 0 0.2rem; }

    p, li { line-height: 120%; }
    a { color: var(--link-hover);}

    .pro-info {padding-top: 2rem; }
    .work {  grid-template-columns: 18% auto; margin: 1.3rem 0; }
    .pro-info .area-title { margin: 3rem 0 1rem; }

    .skills { gap: 1rem 3%;}

    .onlyprint { display: inline-block; }
    .noprint, script { display:none !important; }
	.nobg-print { background: transparent; }

    .pagebreaker { display: block; page-break-before: always; }
    .printspacer { height: 11rem; width: 100%; color: var(--main-bg); display: block; break-before: always; }
    .printspacer-sml { height: 4rem; width: 100%; color: var(--main-bg); display: block; break-before: always; }
    .printspacer-lg { height: 20rem; width: 100%; color: var(--main-bg); display: block; break-before: always; }
}