@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:ital,wght@0,400;0,500;0,600;1,300&family=Outfit:wght@400;500;600;700&family=Red+Hat+Text:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');
*{
    margin: 0;
    padding: 0;
}
:root{
    /* LightMode */
    --body-bg-color:#f6f8ff;
    --head-color:#222731;
    --dark-light:#697c9a;
    --search-bg-color:#fff;
    --search-color:#4b6a9b;
    --black:black;
    --follow-color:#4b6a9b;
    --followTotal-color:#2b3442;
    /* DarkMode */
    --body-bg-color:#141d2f;
    --head-color:#fff;
    --link:#0079ff;
    --dark-light:#fff;
    --search-bg-color:#1e2a47;
    --search-color:#fff;
    --black:white;
    --follow-bg-color:#f6f8ff;
    --follow-color:#fff;
    --followTotal-color:white;
    --social-color:white;
}
body.lightTheme{
    --search-color:#4b6a9b;
    --body-bg-color:#f6f8ff;
    --head-color:#222731;
    --dark-light:#697c9a;
    --search-bg-color:#fff;
    --black:black;
    --follow-color:#4b6a9b;
    --followTotal-color:#2b3442;
}
img{
    max-width:100%;
    display: block;
}
.light-dark{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap:.3rem;
    cursor: pointer;
    color: var(--dark-light);
}
.DarkMode{
    position: absolute;
    display: none;
    right:1.3rem;
}
.mode{
    display: flex;
}
body{
    color: var(--link);
    background-color:var(--body-bg-color);
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: 'Libre Franklin', sans-serif;
    font-family: 'Outfit', sans-serif;
    font-family: 'Red Hat Text', sans-serif;
    font-family: 'Space Mono', monospace;
}
main{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: 100vh;
}
header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width:730px;
    margin-bottom: 25px;
}
.head{
    font-size: 26px;
    font-weight: bold;
    color: var(--head-color);
}
.search{
    height:69px;
    width: 730px;
    background-color:var(--search-bg-color);
    border-radius:10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.searchTxt{
    display: flex;
    align-items: center;
    height: 100%;
}
.searchTxt input{
    margin-left: 20px;
    height: 100%;
    width: 500px;
    border-radius:15px;
    outline: none;
    border: none;
    font-size: 16px;
    color: var(--search-color);
    background-color: var(--search-bg-color);
}
::placeholder{
    color: var(--search-color);
    opacity:1;
}
.searchBtn{
    height: 50px;
    width: 106px;
    background-color: #0079ff;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 16px;
    cursor: pointer;
    margin-right:1rem;
    transition: transform .5s ease;
}
.searchBtn:hover{
    transform: scale(1.05);
}
.searchTxt i{
    color:var(--search-color);
    margin-left: 1rem;
}
.resultInfo{
    background-color:var(--search-bg-color);
    max-width: 730px;
    width: 100%;
    max-height: 439px;
    height: 100%;
    border-radius: 15px;
    margin-top:10px;
}
.resultBox{
    margin: 2rem 3rem;
    width: initial;
    height:initial;
}
.resultInfo .mainImg{
    width:117px;
    height:117px;
    border:1px solid var(--black);
    border-radius:50%;
    object-fit:contain;
}
.resultInfo .mainImg img{
    object-fit: contain;
    width: 100%;
    height: 100%;
    border-radius:50%;
}
.githubHead{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap:2rem;
    /* margin-top: 30px; */
}
.githubInfo{
    /* height: 100%; */
    width: 480px;
    position: relative;
}
.githubUser{
    font-size: 26px;
    font-weight: bold;
    color: var(--followTotal-color);
}
.githubJoinedDate{
    position: absolute;
    top: 7px;
    right: 0;
    font-size: 14px;
    color: var(--dark-light);
}
.githubUserName{
    margin-top:7px;
}
.githubUserName a{
    text-decoration: none;
    font-size: 16px;
    color:#0079ff;
}
.githubFact{
    width:650px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.githubBio{
    width:495px;
    height: 25px;
    color: var(--dark-light);
    margin: 2px 0px 35px 0px;

}
.githubRepo{
    display: flex;
    align-items: center;
    justify-content:space-around;
    background-color: var(--body-bg-color);
    height: 85px;
    width:495px;
    border-radius:10px;
    margin-top:40px;
}
.repoHeading,
.followerHeading,
.followingHeading{
    font-size: 13px;
    color: var(--follow-color);
}
.repoTotal,
.followerTotal,
.followingTotal{
    font-size:22px;
    color: var(--follow-color);
    font-weight: bold;
}
.githubSocial{
    display: grid;
    grid-template-columns:240px 240px;
    row-gap:1.2rem;
    margin-top: 20px;
}
.location,
.twitter,
.website,
.company{
    display: flex;
    align-items:center;
    font-size: 14px;
    gap:.5rem;
    color: var(--dark-light);
}
/* 



/* Responsiveness */
@media screen and (max-width:600px){
    header,
    .search{
        width:550px;
        margin-bottom:.3rem;
    }
    .searchTxt input{
        width:160px;
        font-size: 12px;
    }
    .resultInfo{
        width:550px;
    }
    .resultBox{
        margin: 1rem;
    }
    .githubFact,
    .githubHead{
        width:100%;
    }
    .resultInfo .mainImg{
        width:100px;
        height:100px;
    }
    .resultInfo .mainImg img{
        width:100%;
        height:100%;
    }
    .githubInfo{
        width:390px;
    }
    .githubBio{
        margin-top: 1rem;
    }
}
@media screen and (max-width:426px) {
    header,
    .search{
        width:350px;
        margin-bottom:.3rem;
    }
    .searchTxt input{
        width:160px;
        font-size: 12px;
    }
    .searchBtn{
        width: 84px;
        height: 46px;
        font-size: 12px;
    }
    .resultInfo{
        width:350px;
        max-height:600px;
    }
    .resultInfo .mainImg{
        width: 60px;
        height: 60px;
    }
    .resultInfo .mainImg img{
        width:100%;
        height:100%;
    }
    .githubInfo{
        width:230px;
    }
    .githubUser{
        font-size: 17px;
    }
    .githubUserName{
        margin-top: -5px;
    }
    .githubJoinedDate{
        top: 48px;
        left: 0;
    }
    .githubUserName a,
    .githubJoinedDate,
    .githubBio{
        font-size: 12px;
    }
    .githubBio{
        width: 100%;
        margin-top: 25px;
    }
    .githubRepo{
        width:100%;
    }
    .githubSocial{
        width: 100%;
        grid-template-columns: repeat(1, 1fr);
    }
    .repoTotal,
    .followerTotal,
    .followingTotal{
        text-align: center;
    }
    /* 
    
    
     */


}
/* @media screen and (max-width:769px) {
    header,
    .search{
        width: 574px;
    }
    .searchTxt input{
        width: 480px;
    }
    .resultInfo{
        width: 573px;
        height: 481px;
    }
    .searchBtn{
        margin-right:0;
        position: absolute;
        right:6.5rem;
    }
    .githubHead,
    .githubRepo,
    .githubSocial{
        width: 493px;
    }
    .githubInfo{
        margin-top:1rem;
        width: 350px;
    }
    .githubJoinedDate{
        top: 70px;
        left: 0;
    }
    .githubFact{
        width: 493px;
        align-items:flex-start;
        margin-top: 25px;
    }

} */