:root{ 
    --border-radius:5em; 
    --primary-color:#C5C5C5;
    --padding:30px; 
    --medium-font-weight:500;
    --bold-font-weight:700;
    --medium-font-size:2.2em; 
    --small-font-size:1.5em;
    --small-para-font:1em;
    --big-font-size:8em;
    --body-gradient:linear-gradient(155deg, #846767, #846767, #392A2A);;
}

*{
    padding:0; 
    margin:0; 
    box-sizing: border-box;
}

html{
    scroll-behavior: smooth;
}

::-webkit-scrollbar {
    width: 0.5em;
    border-radius: 0.5em;
    
}

::-webkit-scrollbar-thumb{ 
     background-color: var(--primary-color);
     border-radius:.2em;
     color:white;
}


body{ 
    background:var(--body-gradient);
    font-family:'inter', sans-serif; 
}

img{
    width:100%; 
    height:auto;
}

#wrapper{ 
    width:80%; 
    margin:0 auto;
}
h1.num{ 
    font-family: 'montserrat', sans-serif;
    color:hsla(0, 1%, 38%, 0.3);
    font-size:var(--big-font-size);
    font-weight:var(--bold-font-weight);
}
header{ 
    display:flex; 
    flex-direction: row;
    flex-flow:wrap;
    justify-content: space-between;
    padding-top:2.7em;
    padding-bottom:3em;
}

header .header_image{ 
    width: 13em; 
    height:15.3em;
    padding:.4em;

    border-right:2px solid #fff;

}

header .header_nav{ 
    align-self: center;
    display: flex;
    height: 16.3em;
}
ul{ 
    list-style-type: none;
    
}
.header_nav ul.nav{ 
    align-self: center;
}

.header_nav ul.nav li{
    padding-bottom:.5em;
}

.header_nav ul.nav li a{ 
    font-size:var(--small-font-size);
    font-weight:var(--medium-font-weight);
    text-transform: uppercase;
    text-decoration:none;
    color:#fff;
    font-family: 'montserrat', sans-serif;
}

.header_nav ul.nav li a.active{ 
    color:#A1A1A1;
    text-shadow: 1px 2px 5px #473c3c;
}

.header_nav ul.nav li a:hover{ 
    color:#A1A1A1;
    text-shadow: 1px 2px 5px #473c3c;
}

#container{ 
    width:87%; 
    margin:0 0 auto;
}
main#about{ 
    display:flex; 
    flex-direction: column;
    flex-wrap: wrap;
    margin-bottom:6.5em;
}

main#about .about_name{ 
    font-family:'montserrat', sans-serif; 
    font-size:var(--big-font-size);
    font-weight:200;
    line-height: 1.1em; 
    text-transform: uppercase;
    color:hsla(84, 3%, 64%, 0.75);
    margin-bottom:.3em;
}

main#about .about_name span.num{ 
    font-family: 'montserrat', sans-serif;
    float: right;
    margin-top: .1em;
    line-height: 1;
    color:hsla(0, 1%, 38%, 0.3);
    font-weight:var(--bold-font-weight);
}

main#about .about_banner{ 
    align-self:flex-end;
    width:47%;
}

main#about .about_banner .about_title h4{ 
    text-align:center; 
    color:#fff;
    font-size:var(--medium-font-size); 
    text-transform:uppercase;
    margin-bottom:.4em;
    font-family:'mada', sans-serif;
    font-weight: var(--bold-font-weight);
}

main#about .about_banner .about_para{
    color:#C5C5C5;
    font-size:var(--small-para-font);
}

section#edu{ 
    display:grid;
    grid-template-columns: 184px 1fr;
    gap:1.4em;
}

section#edu .education_num{ 
    align-self: flex-end;
}

section#edu .education_banner{ 
    display:flex; 
    flex-direction: column;
    flex-wrap:wrap;
}

h3{ 
    color:#fff;
    font-family:'mada', sans-serif; 
    font-size:var(--medium-font-size);
    text-transform: uppercase;
    width:50%;
    font-weight:var(--bold-font-weight);
    line-height:60px;
    margin-bottom:.9em;
}

section#edu .education_banner .education_list{ 
    margin-bottom:1.8em;
}
section#edu .education_banner .education_list_one{ 
    display:flex; 
    flex-direction:row; 
    justify-content:space-between;
    margin-bottom:2em;
    color:var(--primary-color);
}

.school_name{ 
    line-height:1.4em;
}

.year{ 
    align-self: center;
}
.course{ 
    font-weight: 700;
}

section#edu .education_banner .education_list_two{ 
    display:flex; 
    flex-direction:row; 
    justify-content:space-between;
    color:var(--primary-color);
}

section#skills {
        display:grid;
        grid-template-columns: 184px 1fr;
        gap:1.4em;
        padding-top:4em;    
}

section#skills .skills_num{ 
    align-self:flex-end;
}
section#skills .skills_list .skills_listing{
    margin-bottom:1.4em;
}
section#skills .skills_list{ 
    display:flex;
    justify-content: space-between; 
    flex-wrap:wrap;
    color:var(--primary-color);
}

.skills_banner .skills_list .skills_para{ 
    width:59%; 
}
.skills_banner .skills_list .skills_listing li.skill_list{ 
    padding-bottom:.4em
}

section#exp{ 
    display:grid;
    grid-template-columns: 184px 1fr;
    gap:1.4em; 
    padding-top:4em;
    padding-bottom:4em;
}
section#exp .exp_num{ 
    align-self: flex-end;
}

section#exp .exp_banner .exp_list{ 
    color:var(--primary-color);
  
}
section#exp .exp_banner .exp_list_one{ 
    display:grid;
    grid-gap:7em;
    grid-template-columns:auto auto;
    margin-bottom:1.8em;
 
}

h5.exp_header{
    
    line-height:1.2em;
    font-size: var(--small-para-font);
}

.exp_para{ 
    line-height: 1.5em;
}

.exp_year{ 
    align-self:center;
}

.exp_list .exp_list_two{ 
    display:grid;
    grid-gap:3.2em;
    grid-template-columns:auto auto;
    margin-bottom:1.8em;
 }

footer{ 
    position:relative;
    z-index:20;
    padding-top:6em;

}
footer:before{ 
    content: "";
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 30em;
    background: linear-gradient(90deg, #6E4F4F, #6E4F4f, #392A2A);
    clip-path: polygon(100% 0, -111% 100%, 100% 100%);
    z-index: -1;
}
footer #wrapper .footer_container{ 
    display:flex;
    justify-content: space-between;
    color:var(--primary-color);
    font-family: 'montserrat', sans-serif;
}

footer #wrapper .footer_container .contact_link{ 
    align-self:center;
}

.footer_container .contact_link h3.contact_heading{ 
    font-size:var(--small-font-size);
    margin-bottom:0;
}

.footer_container .contact_link .footer_links{ 
    display: flex;
    
    padding-top:.9em;
}

.footer_container .contact_link ul.footer_links li a{ 
    text-decoration:none;
    color:#6E4F4F;
    font-size:var(--small-font-size);
    background:var(--primary-color); 
    padding:.1em .3em; 
    border-radius:7px;
}

.footer_container .contact_link ul.footer_links li a:hover{ 
    color:var(--primary-color);
   background:none; 
      
}
.footer_container .contact_link ul.footer_links li:nth-child(2),
.footer_container .contact_link ul.footer_links li:last-child
{ 
    padding-left:1.2em;
}
footer #wrapper .contact_forms .form_group{ 
    padding-bottom:1.4em;
    
}
footer #wrapper .contact_forms .form_group input {
    
    height:2.4em;
    color:#C5C5C5;
    padding:.3em;
    border:2px solid #C5C5C5; 
    border-radius:3px; 
    background-color: #6E4F4F;
}

footer #wrapper .contact_forms .form_group textarea{ 
    
    height:3.7em; 
    border:2px solid #C5C5C5; 
    border-radius:3px; 
    color:#C5C5C5;
    padding:.3em;
    background-color: #6E4F4F;
}

footer #wrapper .contact_forms .form_group select{ 
    
    height:2.4em;
    padding:.3em;
    border:2px solid var(--primary-color); 
    border-radius:3px; 
    color:#C5C5C5;
    background-color: #6E4F4F;
}

footer #wrapper .contact_forms input[type = submit]{ 
    padding: 10px 20px;
    font-size:var(--small-para-font);
    border-radius:.3em;
    cursor:pointer;
    transition:ease-in .5s;
    border:none;
    float:right;
    margin-top:1.2em;
    margin-bottom: 2.5em;
}

footer #wrapper .footer_copyright{ 
    text-align:center;
    color:#818181;
    text-transform: capitalize;
    font-size:.7em;
}

footer #wrapper .contact_forms input[type = submit]:hover{
    background:#6E4F4F;
    color:var(--primary-color);
}


.scroll_up{ 
    position:fixed; 
    width:2em; 
    height:2em;
    bottom:-35%;
    z-index:20;   
    text-align:center;
    right:1em; 
    color:var(--primary-color); 
    background-color: #473c3c;
    border-radius:5px;
    cursor:pointer;
    padding:.3em;
    transition:.3s;
}

.scroll_up:hover{ 
   background: #846767;     
   font-weight:var(--bold-font-weight);
}
.show_scroll{ 
    bottom:7em;
}


/* media queries */
/* smaller screens */
@media screen and (min-width:360px){ 
   
    header{ 
        flex-direction: column;
    }
    header .header_image{ 
        height:1em; 
        visibility:hidden;
    }
    header .header_nav{ 
        align-self:flex-start; 
        height:10em; 
        padding:1.3em;
    }

    #container{ 
        width:100%;
    }

    main#about{
        margin-bottom:2.5em;
    }
    main#about .about_name{ 
        font-size:3em;
        height:2.3em;
    }
    
    main#about .about_name span.num{ 
        visibility:hidden;
    }
    
    main#about .about_banner{ 
        align-self:flex-start; 
        width:100%;
    }
    
    main#about .about_banner .about_title h4{
        text-align:left; 
        width:50%;
        font-size:1.3em;
    }
    main#about .about_banner .about_para{ 
        font-size:.7em;
    }

    
    section#edu{ 
        grid-template-columns:49px 1fr;
        column-gap:.7em;
    }
    section#edu .education_num{ 
            align-self: flex-start;
        
    }
    section#edu .education_num h1{ 
        font-size:2.5em;
        padding-top:.2em
    }
    section#edu .education_banner .education_heading h3{
        width:100%;
        font-size:1.9em;
    }
    section#edu .education_banner .education_list .education_list_one,
    section#edu .education_banner .education_list .education_list_two{ 
        flex-direction: column;
    }
    .year{
        align-self:flex-start;
    }

    
    section#skills{ 
        grid-template-columns:49px 1fr;
        column-gap:.7em;
    }
    section#skills .skills_num{ 
            align-self: flex-start;
        
    }
    section#skills .skills_num h1
    { 
        font-size:2.5em;
        padding-top:.2em
    }
    section#skills .skills_banner .skills_list .skills_para{ 
        width:100%;
        padding-bottom:.5em;
    }

    section#skills .skills_banner .skills_list .skills_listing ul li.skill_list{ 
        display:inline; 
        padding-right:.5em
    }

    
    section#exp{ 
        grid-template-columns:49px 1fr;
        column-gap:.7em;
        padding-bottom:0;
    }
    section#exp .exp_num{ 
            align-self: flex-start;
        
    }
    section#exp .exp_num h1{ 
        font-size:2.5em;
        padding-top:.2em
    }

    section#exp .exp_banner .exp_list .exp_list_one, 
    section#exp .exp_banner .exp_list .exp_list_two { 
        grid-template-columns:auto; 
        grid-gap:2em;
    }

    footer #wrapper .footer_container{
        flex-direction:column;
    }
    footer:before{ 
        height:41em;
    }
    
    footer #wrapper .footer_container .contact_link{
        align-self:flex-start; 
        padding-bottom:3em;
    }

    footer #wrapper .footer_copyright{ 
        float:right; 
        text-align:right;
    }

}
/* medium screens */

@media screen and (min-width:576px){
    
    main#about {
        margin-bottom:4.5em;
    }
    main#about .about_name{ 
        font-size:5em;
     
    }
    main#about .about_banner .about_title h4{
        
        font-size:1.5em;
    }

    section#edu{ 
        grid-template-columns:87px 1fr;
        gap:1.7em;
    }
    section#edu .education_num{ 
            align-self: flex-start;
        
    }
    section#edu .education_num h1{ 
        font-size:4em;
    }
    section#edu .education_banner .education_heading h3{
        width:73%;
    }

    
    section#skills{ 
        grid-template-columns: 87px 1fr;
        gap:1.7em;
        padding-top:4em;
    }
    section#skills .skills_num{
        align-self: flex-start;
    }
    section#skills .skills_num h1{ 
        font-size:4em;
    }
    section#skills .skills_banner .skills_list{ 
        flex-direction: column;
    }
    section#skills .skills_banner .skills_list .skills_para{ 
        margin-bottom:0.4em;
        width:100%;
    }
   .skills_list .skills_listing li.skill_list{ 
        display:inline;
        padding-right:0.5em
    }

    section#exp{ 
        grid-template-columns: 87px 1fr;
        gap:1.7em;
        padding-top:4em;
        padding-bottom:0;
    }

    section#exp .exp_num{
        align-self: flex-start;
    }
    section#exp .exp_num h1{ 
        font-size:4em;
    }
    
    section#exp .exp_banner .exp_list .exp_list_one{ 
        gap:1em;
        grid-template-columns:auto;
        margin-bottom:1.8em;
    }
    section#exp .exp_banner .exp_list .exp_list_two{
        gap:1em; 
        grid-template-columns:auto; 
    }

    footer{ 
        padding-top:8em;    
    }
    footer:before{ 
        height:30em;
    }
    footer #wrapper .footer_container{ 
        flex-direction: row;
    }

    footer #wrapper .footer_container .contact_link{ 
        align-self:center;
    }
    footer #wrapper .contact_forms input[type = submit]{ 
        margin-bottom:1em;
    }
    footer #wrapper .footer_copyright{ 
        float:none; 
        text-align:center;
    }
}


@media screen and (min-width:767px){

    header{ 
        flex-direction: row;
    }
    header .header_image{ 
        height:14.5em; 
        visibility:visible;
    }
    header .header_nav{ 
        align-self:center; 
        height:16.3em; 
        padding:0;
    }
    #container{ 
        width:82%;
    }

    main#about .about_name{ 
        height:2.3em;
        font-size:4em;
    }
    main#about .about_name span.num{ 
        visibility:visible;
    }
    main#about .about_banner{ 
        width:60%;
        align-self: flex-end;
    }
    main#about .about_banner .about_para{ 
        font-size:.7em;
    }
    main#about .about_banner .about_title h4{ 
        font-size:1.5em;
        text-align:center; 
        width:100%;
        }
    section#edu .education_banner .education_list .education_list_one,
    section#edu .education_banner .education_list .education_list_two{
        flex-direction: row;
    }
    .year{ 
        align-self:center;
    }

    section#skills .skills_banner .skills_list {
        flex-direction:row;
    }
    section#skills .skills_banner .skills_list .skills_para{ 
        width:70%;
    }
    section#skills .skills_banner .skills_list .skills_listing ul li.skill_list{ 
        display:block; 
        padding-right:0;
    }

    section#exp .exp_banner .exp_list .exp_list_one,
    section#exp .exp_banner .exp_list .exp_list_two{
        grid-template-columns: 390px;
        gap:1em
    }
    footer #wrapper .footer_container .contact_forms{ 
        padding-top:2em; 
    }

    
    footer{ 
        padding-top:8em;    
    }
    footer:before{ 
        height:31em;
    }
    footer #wrapper .footer_container .contact_forms{ 
        padding-top:0;
    }
    footer #wrapper .contact_forms input[type = submit]{ 
        margin-bottom:1em;
    }
}





/* large screens */
@media screen and (min-width:968px){ 
    #wrapper #container{ 
        width:87%;
    }
    main#about .about_banner { 
        width: 49%; 
    }
    main#about .about_name{ 
        font-size:6em;
    }
    
    main#about .about_banner .about_title h4{ 
            font-size:1.6em; 
        }

    main#about .about_banner .about_para{ 
        font-size:0.8em;
    }
    
    section#edu, 
    section#skills, 
    section#exp{ 
        grid-template-columns: 184px 1fr;
        gap:1.4em;
    }
    section#edu .education_num,
    section#skills .skills_num,
    section#exp .exp_num
        { 
            align-self: flex-end;
            }
    section#edu .education_num h1,
    section#skills .skills_num h1, 
    section#exp .exp_num h1{ 
        font-size:var(--big-font-size);
    }

    section#skills .skills_banner .skills_list .skills_para{ 
        width:75%;
    }
    section#skills .skills_banner .skills_list{ 
        flex-direction:row;
    }
    section#skills .skills_list .skills_listing .skill_list{ 
        display:block;
    }

    section#exp .exp_banner .exp_list .exp_list_one{ 
        gap:4.8em;
        grid-template-columns: auto auto;
    }
    
    section#exp .exp_banner .exp_list .exp_list_two{ 
        gap:1.2em;
        grid-template-columns:auto auto;
    }
}


@media screen and (min-width:1280px){

    main#about .about_banner .about_title h4{ 
        font-size:2.2em;
    }

    main#about h1.about_name{ 
        font-size:8em;
    }

    main#about .about_banner .about_para{
        font-size:var(--small-para-font);
    }

    section#edu .education_banner .education_heading h3{
        width:50%;
    }

    .skills_banner .skills_list .skills_para{ 
        width:67%;
    }

}