/* HEADER GRID */

header  {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-areas: "h3 h3 h3 h3 h3 h3 h3 h3 . . . logo";
    gap: 1em;
}

nav {
    grid-area: h3;
    align-self: center;
}

.logo   {
    grid-area: logo;
    justify-self: end;
}



/* PAGE TITLE GRID */

.page-title  {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 100%;
    grid-template-areas: " sideways h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1";
    gap: 1em;
}

.sideways {
    grid-area: sideways;
    align-self: center;
    justify-self: start;
}

h1   {
    grid-area: h1;
    justify-self: end;
}



/* INTRO GRID */

.intro  {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-areas: "intro intro intro intro intro intro intro intro intro intro . .";
    gap: 1em;
}

.para-lg {
    grid-area: intro;
}



/* SAY HELLO GRID */

.contact  {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-areas:    ". hello hello hello hello hello email email email email email .";
    gap: 1em;
}

.say-hello {
    grid-area: hello;
    align-self: end;
}

#email   {
    grid-area: email;
    align-self: end;
    justify-self: end;
}



/* FOOTER GRID */

footer  {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-areas:    "copyright copyright copyright credit credit credit credit credit credit privacy privacy privacy";
    gap: 1em;
}

#copyright {
    grid-area: copyright;
}

#credit   {
    grid-area: credit;
    justify-self: center;
}

#privacy   {
    grid-area: privacy;
    justify-self: end;
}



/* BIO GRID */

.bio  {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-areas:    "copy copy copy copy copy copy copy copy fig fig fig fig";
    gap: 1em;
}

p {
    grid-area: copy;
}

figure   {
    grid-area: fig;
    justify-self: end;
}

.portrait   {
    justify-self: end;
}



/* ABOUT LISTS GRID */

.list  {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-areas:    ". list-title list-title list-title list-title list-title list list list list list .";
    gap: 1em;
}

.list-title {
    grid-area: list-title;
}

.about-list   {
    grid-area: list;
}



/* JOB DETAILS - Employer & Duration */

.job-info-1  {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1em;
}

.employer  {
    align-items: start;
}

.duration {
    justify-self: end;
}



/* JOB DETAILS - Location & Type */

.job-info-2  {
    display: inline-grid;
    grid-template-columns: auto auto;
    gap: 2em;
}

.job-loc  {
    align-items: start;
}

.job-type {
    align-items: start;
}



/* SKILLS */

.skills  {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1em;
}

.tech-skills  {
    align-items: start;
}

.soft-skills {
    align-items: start;
}



/* FLEX */

.tech-flex,
.soft-flex  {
    display: flex;
    gap: .5vw;
    flex-wrap: wrap;    
}



/* VOLUNTEER */

.volunteer-1  {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1em;
}

.vol-left  {
    align-items: start;
}

.vol-right {
    align-self: end;
    justify-self: end;
}

.volunteer-2  {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1em;
}

.vol2-left  {
    align-items: start;
}

.vol2-right {
    align-self: end;
    justify-self: end;
}



/* EDUCATION */

.edu-1  {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1em;
}

.edu-left  {
    align-items: start;
}

.edu-right {
    align-self: end;
    justify-self: end;
}

.edu-2  {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1em;
}

.edu2-left  {
    align-items: start;
}

.edu2-right {
    align-self: end;
    justify-self: end;
}



@media only screen and (max-width: 759px)   {

    /* FOOTER GRID */

    footer  {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-areas:    "copyright copyright copyright copyright copyright copyright privacy privacy privacy privacy privacy privacy";
        gap: 1em;
    }

    #copyright {
        grid-area: copyright;
    }

    #privacy   {
        grid-area: privacy;
        justify-self: end;
    }

}

@media only screen and (max-width: 558px)   {
   
   /* SKILLS */

    .skills  {
        display: inline;
    }

    .tech-skills  {
        align-items: start;
    }
    
    .soft-skills {
        align-items: start;
    }

}

@media only screen and (max-width: 522px)   {
   
    /* BIO GRID */

    .bio  {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-areas:    "copy copy copy copy copy copy copy copy copy copy copy copy";
        gap: 1em;
    }

    p {
        grid-area: copy;
    }
 
 }

@media only screen and (max-width: 460px)   {
   
    /* PAGE TITLE GRID */

    .page-title  {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: 100%;
        grid-template-areas: " h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1";
        gap: 1em;
    }

    h1   {
        grid-area: h1;
        justify-self: end;
    }
}