html, body{margin:0; padding:0;}

body{height: auto !important; transition:none;}

*{box-sizing: border-box; font-family: 'Inter', sans-serif;}

.root-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;

    overflow-x: hidden;
}

header{
    flex-shrink:0;
    height:auto;
    width:100%;
    color:white;
    background: #24292f;
    padding:15px 16px;
    font-size: 13.5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 1.5;
}

/*web navigation*/
.web-header-nav{
    padding: 20px 32px;
    display: flex;
    align-items: center;
    height:62px;
    justify-content: space-between;
}@media only screen and (max-width: 770px) {
    .web-header-nav{
        display:none;
    }
}

.web-header-nav .web-menu-icons{
    display: flex; 
    align-items: center;
    justify-content: space-between;
    width: auto;
}

/*selecting all its children*/
.web-header-nav .web-menu-icons.first a, .web-header-nav .web-menu-icons.first  p {
    margin-right: 16px;
    height: 31px;
    width:auto;
}

/*web nav svg icons on hover*/
.web-menu-icons svg:hover:not(.octicon-plus){cursor:pointer; fill:#c2c0c0;}
.web-menu-icons span:hover{color:#c2c0c0;cursor: pointer; }

/*web nav search bar*/
.web-menu-icons .input-group{ 
    width:auto;
    margin-right: 0;
}


.web-menu-icons .input-group .search-bar{
    width:272px;;
}@media only screen and (min-width: 1010px) {
    .web-menu-icons input.search-bar[type=text]:focus{
        width:350px;
        margin-right: 16px;
        transition: 0.3s
    }
}

/*web nav search key slash*/
.web-menu-icons .input-group .icon { 
    position:relative;
    right:35px;
    min-height: 10px;
    fill:#505050;
}

/*web nav text*/
.web-menu-icons p{font-weight: 600; position: relative; top:6px;}

.web-menu-icons p:hover{color:#c2c0c0; cursor: pointer;}

.web-menu-icons.second{display: flex; align-items: center;}

/*notification bell, add bell and profile pic*/
.web-menu-icons.second div.joint{
    margin-right: 16px;
    display:flex; 
    align-items: center;
}

/*web nav profile pic*/
.web-menu-icons.second .nav-profile{display: flex; align-items: center;}

.web-menu-icons.second .profile-pic{ margin-right: 0;}

/*dropdown icons*/
.web-menu-icons.second span{cursor: default; font-size: 16px;}

.web-menu-icons.second .joint{
   position: relative;
   display:inline-block;
}

 .dropdown-new{
    position: absolute;
    top:27px;
    right:0px;
    z-index: 1;
    min-width: 145px;
    box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.2);
    background-color: #fffefe;
    border-radius: 10px;
    display:none;
}

.dropdown-new a{cursor:default; font-size:13px;color:black; padding:9px 14px 7px; text-decoration: none; display: block;}
.dropdown-new a:hover:not(#signed-in) { color:white; background-color: #0b6fe0;cursor: pointer;}

.dropdown-new p{cursor:default!important; margin:0; color:#7a7a85; padding: 10px 10px; font-size: 10px; border-top:1px solid rgb(210, 214, 219, 0.7); font-weight: 400;}
.dropdown-new p:hover{color:#7a7a85;}

.dropdown-new.sign{max-width:180px; top:48px; right:30px;};
.dropdown-new.sign a{padding:7px 1px}

/*dropdown icon*/
.joint .material-icons.new, .nav-profile .material-icons.sign{cursor: pointer;}

.dropdown-new.sign .input-group{padding:13px 10px; border-top:1px solid rgb(210, 214, 219, 0.7); border-bottom: 1px solid rgb(210, 214, 219, 0.7);}
.dropdown-new.sign .status-field{cursor:pointer; background-color: #ffffff; border:1px solid rgb(210, 214, 219, 0.7); padding:5px 20px ; border-radius: 5px; width:100%;}

.dropdown-new.sign .status-field::placeholder{padding-left: 10px; color:#3a3a3a};

.dropdown-new.sign .input-group .octicon-smiley{fill:#66666e;min-height: 0;position: absolute!important;left:13px!important; padding: 0 5px;}
.dropdown-new.sign .input-group :hover{ fill:#0b6fe0!important}

.dropdown-new.sign .input-group .octicon-smiley{
    position: absolute;
    left:10px;
}

#signed-in span:hover{color:initial}

/*to show the dropdown on toggle the dropdown icon*/
.show-new {display:block;}
.show-sign {display:block;}

/*mobile navigation*/
.mobile-header-nav{
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin-bottom: 5px;
}@media only screen and (min-width: 770px) {
    .mobile-header-nav{
        display:none;
    }
}

.mobile-header-nav .mobile-menu-icons{ 
    height:4.1vh; 
    width:100%; 
    display: flex; 
    align-items: center; 
    justify-content: space-between;
}
.mobile-header-nav .mobile-menu-icons a{ display: flex; 
    align-items: center; }

/*hamburger menu icon and github logo on hover*/
.mobile-header-nav .mobile-menu-icons svg:hover{cursor:pointer; fill:#c2c0c0;}

/*sticky header*/

header.sticky-header{background-color: white; color:black; height:75px}

.sticky-header{
    border-bottom: 1px solid rgb(210, 214, 219, 0.4);
}
svg{min-height: 100%;}
/*sticky header for web and mobile styling*/
.sticky-header.web, .sticky-header.mobile{
    display: flex; 
    justify-content:center;
    align-items: flex-end;
    min-width:100%;
    padding: 0 27px 0 27px;
    height:72px;
}

/*aligns mobile to mobile to right*/
.sticky-header .sticky-row {
    max-width: 1270px; 
    width:100%; 
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-end;
}

/*get sticky mobile to occupy entire width*/
.sticky-header.mobile{
    min-width: 100vw;
    padding-left: 10px;
    transform: translateX(-15px) ;
    justify-content:flex-start;
    border-bottom: 1px solid rgb(210, 214, 219, 0.4);
    height: inherit;
}@media only screen and (max-width: 414px) {
     .sticky-header.mobile{
         /*display scroll bar on very small screen size*/
        overflow: scroll;
    }
}

.sticky-header.mobile .sticky-items-icons{min-height:100%}

.fixed{
    position:fixed;
    top:0;
}

/*to make header stick smoothly*/
@media screen and (min-width:770px){
    .fixed + section{padding-top:75px}

}

@media screen and (max-width:770px){
    .fixed + .section-content.two{padding-top: 95px;}
}

.fixed + .section-content.two{padding-top: 10px;}

/*aligns mobile to left*/
.sticky-header.mobile .sticky-row{justify-content: flex-start;}

.sticky-header.mobile .sticky-row-content{border:1px solid transparent;display:flex; align-items: center;}

/*profile attached to sticky header*/
.sticky-row-content.first{
    width:25%; 
    min-height: 100%;
    align-self: center;
    animation: fade .2s;
}

@keyframes fade{
    0%{opacity: 0.5;}
    100%{opacity: 1;}
}

.sticky-row-content.first span{
    color:#3a3a3a;
}

.sticky-row-content.first .nav-profile.joint{
    min-height: 100%;
    display:flex;
    justify-content: flex-start;
    align-items: center;
    width:100%;
    font-weight: 600;
}

.sticky-row-content.first .nav-profile.joint .profile-pic{
    width:32px;
}

.sticky-header .sticky-row .sticky-row-content.second{
    display:flex; 
    flex-direction: row;
    justify-content: flex-start;
    justify-self: flex-end;
    align-self: flex-end;
    width:75%;
    padding-left:8px;
}


/*Overview, Repositories, Projects, Packages entire content*/
.sticky-header .sticky-items-icons{
    display: flex;
    align-items: center; 
    padding:8px 13px 11px 13px;
    border:2px solid transparent;
    margin-bottom: -1px;
    transition: border-bottom-color .2s ease-in-out;
}@media only screen and (max-width: 549px) {
    .sticky-header .sticky-items-icons svg{
        display: none;
    }
}

.sticky-header .sticky-items-icons:hover{cursor: pointer; border-bottom:2px solid #d3d2d2;  }

/*Overview, Repositories, Projects, Packages text*/
.sticky-header .sticky-items-icons span{
    color:#2e2e33; 
    letter-spacing: 0.006px; 
    font-weight: 400; 
    font-size: 13.5px; 
}

/*Overview, Repositories, Projects, Packages associated icons*/
.sticky-header .sticky-items-icons svg{margin-right: 7px; fill:#979595;}


/*Repositories*/
.sticky-header  .sticky-items-icons.active span#repo{
    font-weight: 600; 
    color:#474646;
} 

/*Repositories associated icon*/
.sticky-header  .sticky-items-icons.active{border-bottom: 2px solid #f87f67}

.sticky-header .sticky-items-icons.active svg{fill:#474646}

/*Number of Repositories*/
.sticky-header .sticky-items-icons.active span.number-of-repos{
    margin-left: 6px;
     background-color:#e7e5e5; 
     border-radius: 50%;
     padding:1px 5.5px;
    font-size: 11px;
    font-weight: 600;
    }

/*sticky header for mobile*/

/**search bar in mobile nav**/

/*icons within input field*/
.input-group { 
    width: 100%; 
    color: #ffffff;
    display: flex;
    align-items: center;
} 

.input-group .icon { 
    position: absolute;
    right: 20px;
    padding: 5px; 
    border-radius: 7px;
    
    color:#c2c0c0;
} 
  
.search-bar { 
    width: 100%; 
    padding: 6px 13px; 
    text-align: center; 
    background: #24292f; 
    outline: none;
    border-radius: 7px;
    border: 1px solid rgb(255,255,255,0.2);
    text-align: left;
    font-size: 13.3px;
    font-weight: 300;
} 

/*input placeholder*/
::placeholder{
    font-family:'Inter', 
    sans-serif;
    text-align:left; 
    color:#cccaca; 
    padding:6px 0px;
    font-family: 600;
    font-size: 13px;;
}

/*change background color and text color when user types in input field*/
input.search-bar[type=text]:focus{
    background-color: #ffffff;
    color:black;
    margin-right: 16px;
    transition: 0.3s
}

input:focus ~ .icon {
    display:none;
}

input.search-bar:focus::placeholder {color:#6d6d77;}

/*mobile menu items only comes into view on toggling hamburger menu icon*/
.mobile-header-nav .mobile-menu-items{min-width:100%;  margin-top: 16px; display:none}

.mobile-menu-items p, .mobile-menu-items div:not(.input-group) {
    margin: 0;
    padding:8px 0;
    border-top: 1px solid rgb(255,255,255,0.1);
    font-weight: 500;
    font-size: 13.5px;
}

/*Dashboard*/
.mobile-menu-items p:nth-child(2){margin-top: 16px;}

/*wenadev profile pic and name*/
.mobile-menu-items .joint{
    display: flex; 
    align-items: center; 
    margin-right: 5px;
}

/*web and mobile profile picture*/
 .nav-profile div.profile-pic{
    padding:0; 
    height:auto; 
    width:20px; 
    border-top: none; 
    margin-right: 5px;
    position: relative; 
    top:3px;
}
 .nav-profile div.profile-pic img{height:100%; width:100%; border-radius: 50%;}

/*mobile nav wenadev text*/
.mobile-menu-items .nav-profile span{text-decoration: none; color:#ffffff; }

.mobile-menu-items .nav-profile span:hover , .mobile-menu-items p:hover{color:#c2c0c0;cursor: pointer;}

.mobile-menu-items .joint svg{margin-right: 5px;}



section{
    flex:1 0 auto;
    min-height:60vh;
    width:100%;
    padding: 0 23px 20px 20px;
  
    max-width: 1270px;
    display:flex;
    flex-wrap: wrap;  
}@media only screen and (max-width: 770px) {
    section {padding:0 13px;}
}

.section-content{
    width: 100%;
}@media only screen and (max-width: 770px) {
    .section-content.one {min-width:100%; height:auto;}

    .section-content.two{min-width:100%; height: auto;}
}

.section-content.one {
    display: flex;
    flex-direction: column; 
    width:25%; 
    padding:0px 8px 8px 0px;
}@media only screen and (min-width: 1010px) {
    .section-content.one {
        padding:0 19.8px 19.2px 5px;
    }
}@media only screen and (max-width: 770px) {
    .section-content.one {
        height:auto;
        display:flex;
        flex-direction: column;
        padding: 0;
    }
}

.section-content.one .web-profile-seperator{height:initial}

/*first section aligned on the left*/
.section-content.one .web-profile-seperator .profile-status{
    height:auto; 
    width:100%;
    display: flex; 
    position: relative;
}@media only screen and (max-width: 770px) {
    /*responsively change height with smaller screen sizes*/
    .section-content.one .web-profile-seperator .profile-status{ 
        width:16.5%;
        margin-right: 23px;
    }

    /*remove status svg icon*/
    .section-content.one .web-profile-seperator .profile-status #status-svg{
        display:none;
    }
}

/*profile pic in first section*/
.section-content.one .web-profile-seperator .large-profile-pic{
    width:100%; 
    height:150px; 
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-origin: content-box;
    position: relative;
    bottom:33px;
    cursor: pointer;
}@media only screen and (max-width: 770px) {
    /*responsively change height with smaller screen sizes*/
    .section-content.one .web-profile-seperator .large-profile-pic{   
        position:unset;
    }
}

.section-content.one .web-profile-seperator .large-profile-pic img{
    height:100%;
    width:100%; 
    border-radius: 50%;
    object-fit: contain;
    object-position: center;
}

/*status svg*/
.section-content.one .web-profile-seperator .profile-status #status-svg{
    position: relative;
    width:0;
}


#status-svg div{
    position: absolute; 
    right:3px; 
    bottom:66px;
    background-color: white; 
    box-shadow: 1px 1px 1px #e0e0e0;
    padding:11px 10.5px 5.8px 10px;
    border-radius: 50%;
    cursor: pointer;
}

#status-svg div:hover .octicon-smiley{fill:#1674e0;}

.section-content.one .web-profile-seperator .name{
    margin-top:-17px;
    display: flex;
    flex-direction: column; 
}@media only screen and (max-width: 770px) {
    .section-content.one .web-profile-seperator .name{
        margin-top: unset;
    }
}

.section-content.one .web-profile-seperator .name :nth-child(1){
    font-weight:500 ;
    font-size: 25px;
    letter-spacing: 0.0001px;
    line-height:35px;
}

.section-content.one .web-profile-seperator .name :nth-child(2){
    font-size: 18.5px;
    color: #6e6e7c;
    font-weight: 300;
}

/*security analyst by day, developer by night.*/
.section-content.one  span.bio{
    line-height:24px; 
    font-size: 14px; 
    letter-spacing: 0.4px;
    margin-top: 16px;
    color:#222222;
}@media only screen and (max-width: 770px) {
    .section-content.one span.bio.web{
        display:none;
    }
}

.section-content.two{
    width:75%;
    padding:14px 0 16px 10px;

}@media only screen and (max-width: 770px) {
    .section-content.two{
        height:auto;
    }
}

.section-content.two .status-field:disabled{
    width: 100%; 
    padding: 8px 10px; 
    text-align: center;  
    outline: none;
    border-radius: 7px;
    border:1px solid rgb(210, 214, 219, 0.7);
    text-align: left;
    font-size: 13.3px;
    font-weight: 400;
    cursor: pointer;
    background-color: transparent;
    cursor: pointer;
}

.section-content.two div#text-container{padding:0 0 20px; font-size: 14px;}@media only screen and (max-width: 770px) {
    .section-content.two div#text-container .status-field{
        margin-top: 16px;
    }

    .section-content.two div#text-container .status-field::placeholder{ padding-left: 1px; font-size: 13px;}
}

.section-content.two div#public-repo{padding:16px 0;  font-size: 14px; max-width:220px;}

.section-content.two .status-field::placeholder{color: #777783;}

/*input and results*/
.section-content.two > div{ border-bottom: 1px solid rgb(210, 214, 219, 0.6);}

.section-content.two p{
    margin: 0;
}

/*repo items*/
.section-content.two .content-items{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 26px 0;
}@media only screen and (max-width: 320px) {
    .content-items .item-detail.first .repo-description{
        font-size: 10px!important;
    }

    .item-description .repo-language, .item-description .time-stamp, .item-description .repo-forks{font-size: 9px!important;}

    .content-items .item-detail.first .repo-fork-link{font-size: 9px!important;}
}

.content-items .item-detail.first{width: auto;}

.content-items .item-detail.first .repo-name{
    font-size:20px; 
    letter-spacing: 0.1px; 
    font-weight: 500;
    margin-bottom: 5px;
    cursor: pointer;
    letter-spacing: 0.0px;
}

.repo-name a{text-decoration: none; color:#0b6fe0;}

.content-items .item-detail.first .repo-fork-link{font-size: 11px; margin-bottom: 5px; font-weight: 300}

.content-items .item-detail.first .repo-fork-link a{text-decoration: none; cursor: pointer;color:#4b4b53;}
.content-items .item-detail.first .repo-fork-link a:hover{color:#0b6fe0;}
.content-items .item-detail.first .repo-description{font-size: 12.5px; color:#56565e; font-weight: 400; max-width:98%}

.content-items .item-description{
    display:flex;
    flex-direction: row;
    margin-top: 20px;
}

.content-items .item-description p{font-size: 12px;}

.item-description .repo-language, .item-description .repo-forks{margin-right: 16px!important; align-items: center!important;}

.item-description .repo-language, .item-description .repo-forks:hover{color:#0969d6; cursor: pointer;}

.item-description .repo-language, .item-description .repo-forks .octicon-repo-forked:hover{fill:#0969d6;cursor: pointer; color:#0969d6}
.item-description .repo-language, .item-description .time-stamp, .item-description .repo-forks{
    font-size: 12px;
    color: #676774;
    font-weight: 400;
    display: flex;
    align-items: center;
}

.repo-language .repo-colour{
    margin-right: 3px;
    border-radius: 50%; 
    padding: 6px; 
    font-size:8px;
}

.repo-forks svg{margin-right: 3px;}
.content-items .item-detail.second{
    display: flex;
    align-items: center;
}

.item-detail.second .button{
    transition: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding:6px 13px; 
    font-size: 11px; 
    border-radius: 6px;
    border: 1px solid rgb(210, 214, 219);
    outline: none;
    cursor: pointer;
}

.item-detail.second .button:hover{background-color:#f7f7f7;}

.button span{margin-left: 4px; font-weight: 500;}

.web-profile-seperator{width:100%; height:100%;}@media only screen and (max-width: 770px) {
    /*activates and aligns items when screen is in smaller screen sizing*/
    .section-content.one .web-profile-seperator {
        display: flex;
        align-items: center;
        margin-bottom: 24px;
    }

    .section-content.one .name{margin-top: 15px;}
    /*activates and aligns items when screen is in smaller screen sizing*/
    .section-content.one .mobile-status {
        margin-bottom: 9px;
    }

    .mobile-status .status-field:disabled{
        width: 100%; 
        padding: 7px 12px; 
        text-align: center;  
        outline: none;
        border-radius: 7px;
        border:1px solid rgb(210, 214, 219, 0.7);
        text-align: left;
        font-size: 13.3px;
        font-weight: 300;
        cursor: pointer;
        background-color: transparent;
    }

    .status-field::placeholder{
    text-align:left; 
    color: #48484e;
    padding-left: 22px;
    font-family: 300;
    font-size: 11.5px;
    font-weight: 400;
    }

    .status-field:hover::placeholder{color:#1674e0}

    .mobile-status .icon { 
        position: absolute;
        left: 20px;
        padding: 5px; 
        border-radius: 7px;
        fill:#706f6f;
        cursor: pointer;
        min-height:10px;
    }

    .mobile-status:hover .icon{fill:#1674e0;}

    .section-content.one .bio.mobile{margin-top: 0;}
}

footer{
    flex-shrink: 0;
    height:auto;
    width:100%;
    padding: 0 16px;
    max-width: 1300px;
    font-size: 11.5px;
    margin-top:40px;
}

footer p{margin: 0; padding:0}

.footer-items{ 
    height: auto;
    display:flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 40px 8px 45px; 
    border-top:1px solid rgb(210, 214, 219, 0.5);
    margin: 0;
}@media only screen and (max-width: 1010px) {
    .footer-items {
        margin:  0 auto;
        max-width: 97%;
        padding:40px 10px 45px;
    }
}

/*github logo and github copyright text*/
.footer-items ul li div{
    display: flex;
    align-items: center;
    width:auto;
    height:100%;
 
}@media only screen and (max-width: 1010px) {
    .footer-items ul li div{
        margin-right: 12px;
    }
}

/*github logo*/
.footer-items div:nth-child(1) a{
    margin-right: 24px;
}@media only screen and (max-width: 1010px) {
    .footer-items div:nth-child(1) a{
        display: none;
    }
}
/*on hover*/
.footer-items div:nth-child(1) a:hover svg{
    fill:#606069;
    cursor: pointer;
}

/*github copyright text*/
.footer-items div:nth-child(1) p{color:#606069}

/*github footer items */
.footer-items ul{ 
    height: auto;
    width:100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    list-style-type: none;
    padding: 0;
    margin: 0;
}@media only screen and (max-width: 850px) {
    .footer-items ul{  
        justify-content: center;
    }
}

/*list items*/
.footer-items ul li{ width:auto; margin:5px; }

.footer-items ul li a{text-decoration: none; color: #136dd3}
.footer-items ul li a:hover{text-decoration: underline;}