:root{
        --primary-color: #cc005f;
}
.container{
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: auto;
        grid-template-areas: 
                "nav    nav     nav     nav     nav     nav     nav     nav     nav     nav     nav     nav"
                "intro  intro   intro   intro   intro   intro   intro   intro   intro   intro   intro   intro"
                "about  about   about   about   about   about   about   about   about   about   about   about"
                "resume resume  resume  resume  resume  resume  resume  resume  resume  resume  resume  resume"
                "project project  project  project  project  project  project  project  project  project  project  project"                
                "footer footer  footer  footer  footer  footer  footer  footer  footer  footer  footer  footer"
}

.nav {
        grid-area: nav;
        width: 100%;
        color: white;
}
.nav > * {
        padding: 10px;
        padding-top: 15px;
        margin: 5px;
}
.to_top{
        bottom: 0;
        right: 0;
        text-decoration: none;
        color: white; 
        width: 4rem;
        height: 4.4rem;
        background: var(--primary-color);
        position: fixed;
}
.nav > a {
        text-decoration: none;
        color: white; 
}
.intro {
        grid-area: intro;
        height: 100vh;
        background : #151515 url(../images/intro-bg.jpg) no-repeat center bottom;
        color: white;
}
.intro_content{
        align-items: center;
}
.intro_content > * {
        text-align: center;
}
.intro_title{
        font-family   : poppins-bold, sans-serif;
        color         : var(--primary-color);
        font-size     : 1.4rem;
        letter-spacing: 0.2rem;
        text-transform: uppercase;
}
.intro_name {
        font-size: 5rem;
}
.intro_description {
        font-size : 1.3rem;
        opacity   : 0.7;
}
.button{
        color          : white;
        text-decoration: none;
        padding        : 1rem;
        letter-spacing : 0.25rem;
        border         : 3px solid #0f0f0f;
        margin-top     : 3rem;
}
.button:hover{
        border         : 3px solid #cc005f;
}

.intro > .social{
        padding: 5rem;
        font-size: 2.5rem;
}

.about, .resume, .project {
        padding: 0.6rem;
}
.about{
        grid-area: about;
        /* height   : 35vh; */
}
.about h5{
        font-size: 2rem;
        color: var(--primary-color);
}
a.button::after{
        content    : "\f107";
        font-family: fontAwesome;
        position   : relative;
        left       : 0.3rem;
}
.about_sub_grid{
        height               : 100%;
        align-content        : center;
        grid-column-gap      : 50px;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows   : auto;
        grid-template-areas  :
                "p_image p_image p_image p_image p_body p_body p_body p_body p_body p_body p_body p_body"
}

.profile_image{
        grid-area   : p_image;
        justify-self: flex-end;
}
.profile_body{
        grid-area: p_body;
        align-self: center;
}
.profile_body p {
        color:#838383;
        font-size : 1.3rem;
}

.resume{
        background-color: #ebebeb;
        grid-area: resume;
}
.resume > h5{
        font-size : 2rem;
        padding : 1.5rem;
        color: var(--primary-color);
}
.content_container > *{
        padding: 1rem;
}
.resume_subgrid{
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: auto;
        grid-template-areas:
        "r_title r_title r_title r_title r_icon r_content r_content r_content r_content r_content r_content r_content"
}
.resume_title{
        grid-area: r_title;
        justify-self: flex-end;
}
.resume_title > p {
        color : #888888;
}
.resume_icon{
        grid-area    : r_icon;
        justify-self : center;
        background   : #313131;
        align-self   : flex-start;
        padding      : 0.7rem;
        border-radius: 50%;
}
.resume_icon > * {
        color:white;
}
.resume_content{
        grid-area: r_content;
        /* font-size: 1.3rem; */
        /* padding: 1rem; */
}
.resume_company{
        position      : relative;
        padding-bottom: 1rem;
}
.resume_company::after{
        content   :'';
        display   : block;
        height    : 3px;
        width     : 50px;
        background: rgba(0, 0, 0, 0.2);
        position  : absolute;
        left      : 0;
        bottom    : 0;
}
.resume_content > .content{
        font-family: poppins-regular, sans-serif;
        font-weight: 200;
        margin-top: 2rem;
        color: #6e6e6e;
}
.content > * {
        padding-bottom: 1rem;
}


.project{
        grid-area: project;
        background-color: #ebebeb;
}
.project > h5 {
        font-size: 2rem;
        padding  : 1.5rem;
        color    : var(--primary-color);
}

.project_subgrid{
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: auto;
        grid-template-areas:
        "p_title p_title p_title p_title p_icon p_content p_content p_content p_content p_content p_content p_content"
}
.project_title{
        grid-area: p_title;
        justify-self: flex-end;
}
.project_title > p {
        color : #888888;
}
.project_icon{
        grid-area    : p_icon;
        justify-self : center;
        background   : #313131;
        align-self   : flex-start;
        padding      : 0.7rem;
        border-radius: 50%;
}
.project_icon > * {
        color:white;
}
.project_content{
        grid-area: p_content;
}
.project_content > .content{
        font-family: poppins-regular, sans-serif;
        font-weight: 200;
        margin-top: 2rem;
        color: #6e6e6e;
}
.project_company{
        position      : relative;
        padding-bottom: 1rem;
}
.project_company::after{
        content   :'';
        display   : block;
        height    : 3px;
        width     : 50px;
        background: rgba(0, 0, 0, 0.2);
        position  : absolute;
        left      : 0;
        bottom    : 0;
}
.project_content > .content{
        font-family: poppins-regular, sans-serif;
        font-weight: 200;
        margin-top: 2rem;
        color: #6e6e6e;
}



.footer .social{
        padding: 1rem;
        font-size: 1.7rem;
}
.footer .social > * {
        margin: 0 1rem;
}
.social{
        /* display: block; */
        justify-content: center;
}
.social > * {
        cursor   : pointer;
        display  : block;
        margin   : 0 3rem;
        color    : white;

}
.social > *:hover{
        color:var(--primary-color);
}
.social a {
        color:inherit;
}

.footer{
        justify-items: center;
        color: white;
        background: #151515;
        grid-area            : footer;
        /* height: 30vh; */
        align-content: space-around;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows   : auto;
        grid-template-areas  :
                "location location location name name name name name name social social social" 
}

.footer > * {
        padding: 1.5rem;
}

.footer > .location {
        grid-area: location;
}
.footer > .name {
        grid-area  : name;
        /* margin     : auto; */
        /* transform  : translate(0px, -30px); */
        font-size  : 4rem;
        text-align: center;
        font-family: Sacramento,cursive;
}
.footer > .contact {
        grid-area: social;
}
.footer_mail {
        opacity    : 0.3;
        font-family: auto;
        font-size  : 1rem;
}
.footer h5 {
        color: var(--primary-color);
}
.map_marker{
        font-size: 1.7rem;
}

.resume_download{
        text-decoration: none;
        padding        : 1rem;
        letter-spacing : 0.2rem;
        margin: 1rem;
        border         : 3px solid #0f0f0f;
        color: var(--primary-color);
}

.resume_download:hover{
        border         : 3px solid #cc005f;
}


@media (max-width: 767px){
        .footer {
                grid-template-columns: repeat(4, 1fr);
                grid-template-rows   : auto;
                grid-template-areas  :
                        "location location location location"
                        "name name name name" 
                        "social social social social"
        }
        .footer > * {
                padding: 0;
        }
        .about_sub_grid{
                grid-template-columns: repeat(4, 1fr);
                grid-template-rows   : auto;
                grid-template-areas  :
                        "p_image p_image p_image p_image"
                        "p_body p_body p_body p_body"
        }
        .profile_image{
                justify-self: center;
        }

        .resume_subgrid{
                grid-gap: 5px;
                grid-template-columns: repeat(1, 1fr);
                grid-template-rows   : auto;
                grid-template-areas  :
                        "r_title r_title r_title r_title" 
                        "r_icon r_icon r_icon r_icon"
                        "r_content r_content r_content r_content"
        }

        .resume_title{
                justify-self: center;
                font-size: 1.7rem;
        }
        .resume_company{
                display: inline-block;
                margin : 0 auto;
        }
        .resume_content{
                font-size: 1.5rem;
        }

        .project_subgrid{
                grid-gap: 5px;
                grid-template-columns: repeat(1, 1fr);
                grid-template-rows   : auto;
                grid-template-areas  :
                        "p_title p_title p_title p_title" 
                        "p_icon p_icon p_icon p_icon"
                        "p_content p_content p_content p_content"
        }

        .project_title{
                justify-self: center;
                font-size: 1.5rem;
        }
        .project_company{
                display: inline-block;
                margin : 0 auto;
        }

        .about h5, .resume h5, .project h5{
                font-size: 3rem;
        }

        .resume_content, .project_content{
                font-size: 1.5rem;
        }

        .profile_body p {

        }

}