* {
    font-family: 'Roboto', sans-serif;
  }

.groups_header{
    font-family: 'Inter', sans-serif;
    font-weight: bold;
    color:black;
    padding-left: 0;
    padding-top: 10;
    padding-bottom: 0;
    font-size: 16;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 25px;
  max-width: fit-content;
}
.container div {
    /* margin-left: 20; */
    aspect-ratio: 1;
}

.token_img {
    width: 160;
    height: 160;
    /* border-radius: 20px; */
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.groupImageDiv {
    width: 160;
    height: 160;
    /* border-radius: 20px; */
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;

    /* border */
    border-bottom-color: lightgrey;
    border-bottom-style: solid;
    border-width: 1;

    position: relative;

    /* center vertically */
    display:flex;
    justify-content:center;
    align-items:center;
}

.groupContainerDiv{
    width: 160;
    height: 240;
    border-radius: 20px;

    padding: 0px;

    /* border */
    /* border-color: lightgrey;
    border-style: solid;
    border-width: 1; */

    background-color: white;
}

.groupContainerDiv:hover{
    box-shadow: rgba(4, 17, 29, 0.25) 0px 0px 8px 0px;
}

.groupMetaDataBar{
    /* display: flex; */
    position: absolute;
    width: 160;
    height: 50;

    border-radius: 20px;
}

.groupBarTypeLabel{
    color: #7B7B7B;
    font-family: 'Inter', sans-serif;
    font-size: 9px;
    font-weight: 500; 

    padding-top: 5px;
    padding-left: 10px;

    margin-bottom: 0px;
    padding-bottom: 5px;

}
.groupBarNameLabel{
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    color: black;
    font-size: 14;

    justify-content: flex-start;
    /* align-items:center; */

    margin-top: 0;
    padding-left: 10px;
    padding-right: 8px;

    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* number of lines to show */
            line-clamp: 2; 
    -webkit-box-orient: vertical;
}

.name_label {
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    color: white;
    text-align: center;
    padding: 5;
    font-size: 12;
}

header{
    height: 70;
    background-color: white;
    box-shadow: rgba(4, 17, 29, 0.25) 0px 0px 8px 0px;

    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
}

body{
    margin: 0;
    padding: 0;
    background-color: #F8F9F8;
    /* background-color: white; */
}

#connectWalletPrompt{
    font-family: 'Roboto', sans-serif;
    font-weight: lighter;
    color: darkslategrey;
    margin-top: -10 ;
}

#noTokensPrompt{
    font-family: 'Roboto', sans-serif;
    font-weight: lighter;
    color: darkslategrey;
    margin-top: -10 ;
    max-width: 550;
}

#recommendedComingSoon{
    font-family: 'Roboto', sans-serif;
    font-weight: lighter;
    color: darkslategrey;
    margin-top: -10 ;
}

#groupLists{
    max-width: fit-content;
    margin: 0 auto;
}

#featured_groups_container{
    margin-bottom: 20px;
}

#logo{
    height: 35;
    margin-left: 20;
    margin-top: 17;
}

#yourGroupsHeader{
    /* border-style: solid;
    border-color: red; */
    position: relative;
    padding-top: 30px;
}

#yourGroupsLoadingGif{
    display: none;
}

#mainContent{
    min-height: 100%;
    margin-top: 70px;
}

/* Landing section */
#landingSectionContainerForBackground{
    display: none;
    height: 375px;
    /* background-color: #F8F9F8; */
    background-color: white;
}

#landingSection{
    margin: 0 auto;
    max-width: fit-content;
}

#landingSectionContent{
    display: flex;
    margin: 0 auto;
    max-width: fit-content;
}

#landingImage{
    margin-top: 50px;
    margin-left: 25px;
    height: 250px;
    flex: 1;
}

#landingCTASection{
    margin-top: 70px;
    margin-left: 175px;
    margin-right: 50px;
}

#ctaHeaderOne{
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    font-size: 25px;
    color:darkslategrey;
}

#ctaHeaderTwo{
    font-family: 'Roboto', sans-serif;
    font-weight: regular;
    width: 275px;
    font-size: 18px;
    color:darkslategrey;

    /* margin-top: 30px;
    margin-bottom: 0px; */
}

#landingConnectWalletButton{
    background-color: #2E0CE7;
    border-style: none;
    width: 200px;
    padding: 12px;
    border-radius: 100px;

    font-family: 'Roboto', sans-serif;
    font-weight: regular;
    font-size: 20px;
    color: white;
}

#communitiesCountContainer{
    display: flex;
    background-color: white;
    margin-left: 25px;
    margin-top: 40px;
    /* margin-left: 375px; */
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    width: fit-content;
    border-radius: 100px;
}
#communitiesCountText{
    font-family: 'Roboto', sans-serif;
    font-weight: regular;
    width: 275px;
    font-size: 15px;
    color:darkslategrey;
    flex: 1;
}
#smallCommunityTokenImages{
    margin-top: 10px;
    margin-left: 10px;
    height: 30px;
}

.boldedNumber{
    font-weight: bold;
}


.badge{
    height: 35px;
    position: relative;
    top: -170px;
    margin-left: 140px;
    padding: 0px;
}

/* footer */

#homePageFooter{
    height: 60px;
    margin-top: 50px;
    background-color: #F8F9F8;
}

#footerContent{
    max-width: fit-content;
    display: flex;

    margin: 0 auto;
}

#signatureText{
    flex: 1;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: regular;
    color: #979797;

    padding-top: 10px;
    padding-left: 20px;

    min-width: fit-content
}

#twitterLogo{
    padding-top: 22px;
    padding-right: 20px;
    height: 20px;
    margin-left: 600px;
}