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

body{
    font-family: 'Montserrat', sans-serif;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;

}

#nav{
    height: auto;
    width: 100%;
    background-color: #fff;
    /* border: 1px solid blue; */
    margin-top: 5px;
    position: sticky;
    top: 0;
    z-index: 3000;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    /* overflow: hidden; */
}

#nav > #upper{
    height: 35px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* position: absolute; */
    
}

#nav > #upper > a >  img{
    display: block;
    padding-left: 2px;
    height: 60px;
}

#nav > #upper >  input{
    background-color: #eeeeee;
    border: none;
    margin-left: -28px;
    width: 50%;
    height: 41px;
    border-radius: 40px;
    font-size: 15px;
    letter-spacing: 1px;
    padding-left: 12px;
    font-weight: 100;
    color: gray;
    font-family: 'Montserrat', sans-serif;
    font-weight: 100;
    
}

#nav > #upper > p > a{
    color: gray;
    font-size: 13.9px;
    /* font-family: 'Montserrat', sans-serif; */
    font-weight: 100;  
}

#nav > #upper > p > a{
    color: gray;
    font-size: 13.9px;
    /* font-family: 'Montserrat', sans-serif; */
    font-weight: 100;
    text-decoration: none;  
}

.thinLine{
    /* color: blue; */
    border-left: 0.01px solid lightgray;
    height: 35px;
}

#nav > #upper > #thrline > div{
    /* display: block; */
    height: 2px;
    width: 22px;
    border: 1px  gray;
    background-color: gray;
    margin: 2.8px;
    margin-right: 20px;
}

button{
    height: 35px;
    width: 130px;
    letter-spacing: 1px;
    padding: auto;
    border: 1px solid lightgray;
    background-color: white;
    color: gray;
    font-size: 14px;
    font-weight: 100;
    font-family: 'Montserrat', sans-serif;
}

#lower{
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* color: ; */
    margin-left: 15px;
    margin-right: 10px;
    /* background-color: #fff; */
    /* position: fixed; */
    
}



#nav > #lower >  p > a{
    color: gray;
    font-size: 13.9px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    cursor: pointer;  
    text-decoration: none;
}

#nav > #lower >  p > a:hover{
    font-weight: 500;
    color: black;
    font-size: 14.1px;
}

#nav > #lower >  p:nth-child(14) > a:hover{
    font-weight: 500;
    color: red;
    font-size: 14.1px;
}



#nav > #lower > p:nth-child(1){
    text-decoration: underline;
}


#heads{
    margin-top: 70px;
    display: flex;
    height: auto;
    width: 100%;
    /* border: 1px solid red; */
}

#heads > #left{
    height: auto;
    width: 60%;
    /* border: 1px solid black; */
    /* margin-left: 80px; */
}



#heads > #left > h1{
    font-size: 45px;
    margin-left: 75px;
}

#heads > #left > p{
    margin-top: 20px;
    margin-left: 75px;
    letter-spacing: 1px;
    line-height: 25px;
}


#heads > #right{
    height: 250px;
    width: 34%;
    border: 1px solid lightgray;
    border-radius: 5px;
}

#heads > #right > #status{
    display: flex;
    margin-left: 10px;
    margin-top: 20px;
    justify-content: space-between;
}

#heads > #right > #status > div:nth-child(1){
    margin-left: 17px;
}

#heads > #right > #status > div:nth-child(2){
    margin-left: -297px;
}

#heads > #right > #status > div:nth-child(3){
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 25px;
    width: 60px;
    padding: 2%;
    border: 1px solid #c2ebd3;
    background-color: #c2ebd3;
    margin-right: 30px;
    border-radius: 4px;
}

#heads > #right > #status > div:nth-child(3) > p:first-child{
    margin-bottom: -1px;
    font-weight: bold;
    margin-right: 5px;
    font-size: 40px;
    color: darkgreen;
    

}

#heads > #right > #status > div:nth-child(3) > p:last-child{
    font-size: 14px;
}

#right > #status + hr{
    
    width: 90%;
    margin: auto;
    margin-top: 10px;
    /* margin-bottom: -10px; */
    border: 0.0001px solid lightgray;
}

#heads > #right > #carator{
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
}

#heads > #right > #carator > div:nth-child(1) {
    margin-left: 27px;

}

#heads > #right > #carator > div:nth-child(2) {
    margin-left: -312px;

}

#heads > #right > #carator > div:nth-child(3) > a > img {
    height: 30px;
    margin-right: 40px;
}

#right > #carator + hr{
    
    width: 90%;
    margin: auto;
    margin-top: 10px;
    /* margin-bottom: -10px; */
    border: 0.0001px solid lightgray;
}

#heads > #right #Contributions{
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
}

#heads > #right #Contributions > div:nth-child(1){
    margin-left: 27px;
}

#heads > #right #Contributions > div:nth-child(2){
    margin-left: -263px;
}

#heads > #right #Contributions > div:nth-child(3){
    margin-right: 40px;
}

#heads > #right #Contributions > div:nth-child(3) > p{
    font-weight: bold;
}
#right > #Contributions + hr{
    width: 90%;
    margin: auto;
    margin-top: 15px;
    /* margin-bottom: -10px; */
    border: 0.0001px solid lightgray;
}

#heads > #right > #TopContributors{
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
}

#heads > #right >  #TopContributors > div:nth-child(1){
    margin-left: 27px;
}

#heads > #right #TopContributors > div:nth-child(2){
    margin-left: -203px;
}

#heads > #right #TopContributors > div:nth-child(3){
    margin-right: 20px;
}

#heads > #right #TopContributors > div:nth-child(3) > a > img{
    height: 15px;
    border-radius: 100px;
    /* margin-right: 20px; */
}

#btn{
    display: flex;
    margin-right: 84px;
    justify-content: right;
    margin-top: 13px;
}

#btn > button{
    height: 40px;
    width: 36%;
    border-radius: 5px;
    border: 1px solid black;
    background-color: black;
    color: white;
}

#btn > button > span{
    font-weight: bold;
}



#imgss{
    height: auto;
    width: 90%;
    /* border: 1px solid blue; */
    margin: auto;
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(10, auto);
    row-gap: 20px;
    column-gap: 20px;
    grid-template-areas:
        "a b c"
        "d b e"
        "d f e"
        "g f h"
        "i j h"
        "k j l"
        "k m l"
        "n o p"
        "q o p"
        "q r s"
        "t r s"
        "u v w"
        "u v x"
        "y z x" 
    ;
}

#imgss > div{
    height: auto;
    width: 100%;
    
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

#imgss > div > img{
    height: 41vh;
    width: 100%;
    /* cursor: pointer; */
    /* gap: 20px; */
}

#imgss > div > img:hover{
    height: 41vh;
    width: 100%;
    cursor: zoom-in;
    /* gap: 20px; */
}

#imgss > div:nth-child(2) > img{
    height: 95%;
    width: 100%;
    /* gap: 20px; */
}

#imgss > div:nth-child(4) > img{
    height: 100%;
    width: 100%;
    /* gap: 20px; */
}

#imgss > div:nth-child(5) > img{
    height: 100%;
    width: 100%;
    /* gap: 20px; */
}

#imgss > div:nth-child(6) > img{
    height: 100%;
    width: 100%;
    /* gap: 20px; */
}


#imgss > div:nth-child(8) > img{
    height: 100%;
    width: 100%;
    /* gap: 20px; */
}

#imgss > div:nth-child(10) > img{
    height: 100%;
    width: 100%;
    /* gap: 20px; */
}

#imgss > div:nth-child(11) > img{
    height: 100%;
    width: 100%;
    /* gap: 20px; */
}

#imgss > div:nth-child(12) > img{
    height: 100%;
    width: 100%;
    /* gap: 20px; */
}

#imgss > div:nth-child(15) > img{
    height: 100%;
    width: 100%;
    /* gap: 20px; */
}

#imgss > div:nth-child(16) > img{
    height: 100%;
    width: 100%;
    /* gap: 20px; */
}

#imgss > div:nth-child(17) > img{
    height: 100%;
    width: 100%;
    /* gap: 20px; */
}

#imgss > div:nth-child(18) > img{
    height: 100%;
    width: 100%;
    /* gap: 20px; */
}

#imgss > div:nth-child(19) > img{
    height: 100%;
    width: 100%;
    /* gap: 20px; */
}

#imgss > div:nth-child(21) > img{
    height: 100%;
    width: 100%;
    /* gap: 20px; */
}

#imgss > div:nth-child(22) > img{
    height: 100%;
    width: 100%;
    /* gap: 20px; */
}

#imgss > div:nth-child(24) > img{
    height: 100%;
    width: 100%;
    /* gap: 20px; */
}


#imgss > div:nth-child(1){
    grid-area: a;
}

#imgss > div:nth-child(2){
    grid-area: b;
}

#imgss > div:nth-child(3){
    grid-area: c;
}

#imgss > div:nth-child(4){
    grid-area: d;
}

#imgss > div:nth-child(5){
    grid-area: e;
}

#imgss > div:nth-child(6){
    grid-area: f;
}

#imgss > div:nth-child(7){
    grid-area: g;
}

#imgss > div:nth-child(8){
    grid-area: h;
}

#imgss > div:nth-child(9){
    grid-area: i;
}

#imgss > div:nth-child(10){
    grid-area: j;
}


#imgss > div:nth-child(11){
    grid-area: k;
}

#imgss > div:nth-child(12){
    grid-area: l;
}

#imgss > div:nth-child(13){
    grid-area: m;
}

#imgss > div:nth-child(14){
    grid-area: n;
}

#imgss > div:nth-child(15){
    grid-area: o;
}

#imgss > div:nth-child(16){
    grid-area: p;
}

#imgss > div:nth-child(17){
    grid-area: q;
}

#imgss > div:nth-child(18){
    grid-area: r;
}

#imgss > div:nth-child(19){
    grid-area: s;
}

#imgss > div:nth-child(20){
    grid-area: t;
}

#imgss > div:nth-child(21){
    grid-area: u;
}

#imgss > div:nth-child(22){
    grid-area: v;
}

#imgss > div:nth-child(23){
    grid-area: w;
}

#imgss > div:nth-child(24){
    grid-area: x;
}

#imgss > div:nth-child(25){
    grid-area: y;
}

#imgss > div:nth-child(26){
    grid-area: z;
}

#imgss  > div > div > button{
    height: 40px;
    
    width: 40px;
    font-weight: bold;
    border-radius: 50%;
    /* color: gray; */
    /* background: transparent; */
    
}



#imgss  > div > div > button:hover{
    height: 40px;
    width: 40px;
    font-weight: bold;
    /* font-size: 22px; */
    color: red;
    /* background: visible; */
    
}

#imgss  > div:nth-child(1) > div > button {
    margin-top: -300px;
    margin-left: 360px;
}




#imgss  > div:nth-child(2) > div > button {
    margin-top: -595.8px;
    margin-left: 360px;
}

#imgss  > div:nth-child(3) > div > button {
    margin-top: -300px;
    margin-left: 360px;
}

#imgss  > div:nth-child(4) > div > button {
    margin-top: -595.8px;
    margin-left: 360px;
}

#imgss  > div:nth-child(5) > div > button {
    margin-top: -595.8px;
    margin-left: 360px;
}

#imgss  > div:nth-child(6) > div > button{
    margin-top: -610.8px;
    margin-left: 360px;
    
}

#imgss  > div:nth-child(7) > div > button {
    margin-top: -300px;
    margin-left: 360px;
}

#imgss  > div:nth-child(8) > div > button{
    margin-top: -640.8px;
    margin-left: 360px;
    
}

#imgss  > div:nth-child(9) > div > button{
    margin-top: -300px;
    margin-left: 360px;
    
}

#imgss  > div:nth-child(10) > div > button{
    margin-top: -600.8px;
    margin-left: 360px;
    
}

#imgss  > div:nth-child(11) > div > button{
    margin-top: -600.8px;
    margin-left: 360px;
    
}

#imgss  > div:nth-child(12) > div > button{
    margin-top: -600.8px;
    margin-left: 360px;
    
}

#imgss  > div:nth-child(13) > div > button {
    margin-top: -300px;
    margin-left: 360px;
}

#imgss  > div:nth-child(14) > div > button {
    margin-top: -300px;
    margin-left: 360px;
}

#imgss  > div:nth-child(15) > div > button{
    margin-top: -630.8px;
    margin-left: 360px;
    
}

#imgss  > div:nth-child(16) > div > button{
    margin-top: -630.8px;
    margin-left: 360px;
    
}

#imgss  > div:nth-child(17) > div > button{
    margin-top: -600.8px;
    margin-left: 360px;
    
}

#imgss  > div:nth-child(18) > div > button{
    margin-top: -630.8px;
    margin-left: 360px;    
}

#imgss  > div:nth-child(19) > div > button{
    margin-top: -630.8px;
    margin-left: 360px;    
}

#imgss  > div:nth-child(20) > div > button {
    margin-top: -300px;
    margin-left: 360px;
}

#imgss  > div:nth-child(21) > div > button{
    margin-top: -600.8px;
    margin-left: 360px;    
}

#imgss  > div:nth-child(22) > div > button{
    margin-top: -600.8px;
    margin-left: 360px;    
}

#imgss  > div:nth-child(23) > div > button {
    margin-top: -300px;
    margin-left: 360px;
}

#imgss  > div:nth-child(24) > div > button{
    margin-top: -610.8px;
    margin-left: 360px;    
}

#imgss  > div:nth-child(25) > div > button {
    margin-top: -300px;
    margin-left: 360px;
}



#imgss  > div:nth-child(26) > div > button {
    margin-top: -300px;
    margin-left: 360px;
}