* {

margin: 0px;
padding: 0px;
text-decoration: none;

}

a:visited, a:hover, a:focus {
    text-decoration: none;
    color: var(--fontcolor);
}


:root{

    --backgroundColor: #000000;
    --navbarcolor:  linear-gradient(90deg,#eb5d47,#a933b2,#a4f9ff);

    --boxcolor:  #a933b2;   
    --lighterbackfill:  #000000; 
    
    --fontcolor:rgb(255, 255, 255);
    --accentoutline:  #a4f9ff; 


   }

  


/*



Rocketship Theme/default colors

    --backgroundColor: #141010;
    --navbarcolor:  #f70776; 

    --boxcolor: #c3195d; 
    --lighterbackfill: #c35983; 
    
    --fontcolor:rgb(255, 255, 255);
    --accentoutline:  #680747; 



juno colors
    --backgroundColor:#9d3b58;
    --navbarcolor:#F56457;

    --boxcolor: #f0827d;
    --lighterbackfill: #ef9894;
    
    --fontcolor:rgb(255, 255, 255);
    --accentoutline: rgb(255, 0, 93);



Evmos Theme
    --backgroundColor: #000000;
    --navbarcolor:  #444137; 

    --boxcolor: rgb(219, 55, 39);
    --lighterbackfill: rgb(105, 105, 105);
    
    --fontcolor:rgb(255, 255, 255);
    --accentoutline: rgb(237, 84, 30);

    
Osmosis Theme
    --backgroundColor:#170F34;
    --navbarcolor:#2d2755; 

    --boxcolor:#3c356c;
    --lighterbackfill: #3c356c;
    
    --fontcolor:rgb(255, 255, 255);
    --accentoutline: #756b95;


Akash Theme
    --backgroundColor: rgb(30, 5, 8);
    --navbarcolor: rgb(219, 26, 28);

    --boxcolor: rgb(170, 26, 28);
    --lighterbackfill:rgb(170, 25, 19);

    --fontcolor:rgb(255, 255, 255);
    --accentoutline:  #ff5353;

Cresent Theme
    --backgroundColor: #231210;
    --navbarcolor:  #000000;

    --boxcolor:rgb(255, 187, 108);
    --lighterbackfill: #371814;
    
    --fontcolor:rgb(255, 255, 255);
    --accentoutline:  rgb(252, 129, 13);

Secret Network
   --backgroundColor: url("https://images.unsplash.com/photo-1520531158340-44015069e78e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8YmxhY2slMjBhbmQlMjB3aGl0ZSUyMGNpdHl8ZW58MHx8MHx8&w=1000&q=80");

    --backgroundColor: #151a1f;
    --navbarcolor:  #000000; 

    --boxcolor: #2f3c4a;
    --lighterbackfill: #2f3c4a ;

    --fontcolor: #ffffff;
    --accentoutline:  #4bbeb3; 


*/



body {

    background: var(--backgroundColor);
    background-repeat: no-repeat;
  background-size: cover;
}



#blockexplorer {

    position: fixed;
    display: inline-flex;

    right: 1%;
    top: 50%;


    color: var(--fontcolor);
    font-family: sans-serif;
}


#blockexplorer > div > h1 {

    font-size: 2rem;
    
}
#blockexplorer > div > i {

    font-size: 1.75rem;
    line-height: 75px;
padding-left: 5px;
}




/* 

Nav below

*/


nav {

    display: block;
    position: sticky;

    top: 0px;
    height: 50px;
    width: 100vw;

    background: var(--navbarcolor);

    outline: 3px solid var(--accentoutline);
    
    z-index: 2 ;


}




.navdiv {

    position: relative;
    display: inline-flex;

    width: 95vw;
    height: 50px;
    left: 2.5vw;
}



.navdiv > .navlogodiv{

    position: relative;
    display:inline-flex;

    margin-right: auto;

}



.navlogodiv > img {

    position: relative;
    height:50px;

    
    }


.navlogodiv > i {

    position: relative;

    color: var(--fontcolor);
    font-size: 2.5rem;
    line-height: 50px;

   padding-inline: 10px;
    
    }


.tagssearchsort {

    display: flex;
    position: relative;
    width: 100%;
    height: 50px;

    justify-content: center;
    align-items: center;

}




#buttons {

    display: inline-flex;
    position: relative;
    height: 50px;

    padding: 10px;

    z-index: 4 !important;


    justify-content: center;
    align-items: center;

}



.setupdiv {

    position: relative;
    display: inline-flex;
    align-items: center;
    float: right;

    height: 50px;
    width: fit-content;

}


.setupdiv > i{

    position: relative;


    color: var(--fontcolor);
    font-size: 2.5rem;
    padding-inline: 10px;
    line-height: 50px !important;



}


.connectwallet{

padding-inline: 10px;
font-size: 1.5rem;

color: var(--fontcolor);
outline: solid 2px var(--accentoutline);
border-radius: 2.5px;
background-color: var(--lighterbackfill);
border-bottom: var(--fontcolor) 1px solid ;


}





/*

buttons below

*/







#buttons > div {

position: relative;
display: inline;
padding-inline: 10px;
max-height: 40px ;


}




.dropdown {

position: relative;


}

.dropdown > span {

    position: relative;
    font-size: 1.5rem; 
    padding-inline: 15px;
    width: fit-content;

    z-index: 3 !important;


    border-bottom: var(--fontcolor) 1px solid ;
    outline: solid 2px var(--accentoutline);
    border-radius: 2.5px;
    color: var(--fontcolor);
    background-color: var(--lighterbackfill);

}

.dropdown > ul {



    position: absolute;

    width: max-content;

    max-height: 200px;
    overflow-y: scroll;

    top: 1.75rem;



    list-style: none;
    outline: solid 2px var(--accentoutline);

    background-color:var(--lighterbackfill);

    border-top-right-radius: 2.5px;
    border-bottom-left-radius: 2.5px;
    border-bottom-right-radius: 2.5px;

}



.dropdown > ul > li  {

position: relative;

font-size: 1.5rem; 
color: var(--fontcolor);
border-bottom: var(--fontcolor) 1px solid ;
padding-inline: 15px;
padding-top: 2.5px;
padding-bottom: 2.5px;
text-align: left;
background-color:var(--lighterbackfill);



}




.searchdiv {

    position: relative;
    display: inline-flex;

    color: var(--fontcolor);
    outline: solid 2px var(--accentoutline);;
    border-radius: 2.5px;
    background-color: var(--lighterbackfill);


}


#search {


    position: relative;
    display: inline-flex;

    width: 200px;


    color: var(--fontcolor);
    background-color:var(--lighterbackfill);
    border: transparent;
    font-size: 1.5rem; 
    padding-left: 5px;

}


#searchicon {



    font-size: 1.5rem; 
    color: var(--fontcolor);
    
}


#filtericon {

    padding-right: 10px;
    position: relative;
    display: flex;

    font-size: 1.5rem; 
    color: var(--fontcolor);

}

.dropsort {

    position: relative;

    


    }

.dropsort > span {

    position: relative;
    display: inline-flex;
    font-size: 1.5rem; 
    padding-inline: 15px;
    width: fit-content;

    z-index: 3 !important;


    border-bottom: var(--fontcolor) 1px solid ;
    outline: solid 2px var(--accentoutline);
    border-radius: 2.5px;
    color: var(--fontcolor);
    background-color: var(--lighterbackfill);

}

.dropsort > ul {

    position: absolute;

    width: max-content;

    max-height: 200px;
    overflow-y: scroll;

    top: 1.75rem;

    z-index: 3 !important;

    list-style: none;
    outline: solid 2px var(--accentoutline);

    background-color: var(--lighterbackfill);

    border-top-right-radius: 2.5px;
    border-bottom-left-radius: 2.5px;
    border-bottom-right-radius: 2.5px;
    
    }


.dropsort > ul > li  {

    position: relative;

    z-index: 3;

    font-size: 1.5rem; 
    color: var(--fontcolor);
    border-bottom: var(--fontcolor) 1px solid ;
    padding-inline: 15px;
    padding-top: 2.5px;
    padding-bottom: 2.5px;
    text-align: left;
    background-color: var(--boxlight);
    }


/* Nav below */








/* Header Above */







/* 

Main and Articles below

*/


main {

    position: relative;
    display: block;
    justify-content: center;

    width: fit-content;


    margin-left: auto;
    margin-right: auto;

}





.grid-container {

position: relative;

display: grid;
gap: 2rem;
grid-template-columns: 1fr 1fr;

max-width: 80vw;
height: fit-content;

margin-top: 10px;




}

.article {

z-index: -2;
position: relative;
display: inline-flex;

width: 600px;
height: 200px;

border-radius: 19px;

outline: .5px solid var(--accentoutline);

background: var(--boxcolor);
box-shadow:  6px 6px 26px var(--boxdark),
            -6px -6px 26px var(--boxlight);

}


.article > div {

    margin-top: 20px;
background-color: transparent;


}

.article > img {

position: relative;

margin-top: auto;
margin-bottom: auto;
margin-left: 15px;

width: 300px;
height: 168.75px;
border-radius: 10px;
outline: .5px solid var(--accentoutline);

}

.articlehead {

    position: relative;
    display: inline-flex;
    width: 300px;
    margin-left: 1rem;
    margin-right: 1.5rem;
    background-color: transparent;

}

.title {

font-size: 1.75rem;
color: var(--fontcolor);
line-height: 50px;
text-align: center;

}

.logo {

width: 250px;
height: 50px;
float: left;

object-position: left center;
object-fit: contain;

}




.article > div > p {

position: relative;
display: flex;

width: 16rem;


margin: 1rem;

margin: .5rem 1rem 0rem 1rem;
font: 1.25rem;

color: var(--fontcolor);




}






.explorebtnsdiv {

position: absolute;
display: inline-block ;

bottom: 20px;

width: 16rem;
margin-left: 1rem;
margin-right: 1.5rem;

height: 2rem;


}

.explorebtns {

    position: relative;

    font-size: 1.125rem;
    font-family: Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bolder;

    height: 2rem;
    padding-inline: 20px;
    margin-right: 5px;
    
    }

.add {
    
    position: relative;

    padding-right: 5px;
    float: right;
    line-height: 2rem !important;
    font-size: 1.75rem;

    color: var(--fontcolor);
    
    
    }






.dropy {

position: relative;
display: block;



font-size: 1.5rem; 
color: var(--fontcolor);

border-bottom: var(--fontcolor) 1px solid ;
min-width: max-content;


text-align: left;

background-color: var(--lighterbackfill);
}

.dropy > span {

    
    position: relative;
    display: block;

    font-size: 1.5rem; 
    color: var(--fontcolor);
    
    border-bottom: var(--fontcolor) 1px solid ;
    min-width: max-content;
    
    padding-inline: 10px;
    text-align: left;
    
    background-color: var(--lighterbackfill);

}

.dropy > ul {

    top: 29px;
    left: 0px;

    list-style: none;
    
    position: absolute;
    display: block;

    font-size: 1.5rem; 
    color: var(--fontcolor);
    
    border-bottom: var(--fontcolor) 1px solid ;
    min-width: max-content;
    
    padding-inline: 10px;
    text-align: left;
    
    background-color: var(--lighterbackfill);
}





/* 

Dashboard Below 

*/

#dashboard {


position: relative;
display: block;
justify-content: center;

width: fit-content;
min-height: 400px;
z-index: -3;
margin-left: auto;
margin-right: auto;





}


.maindash{

    display: block;
    position: relative;
    width: 1230px;
    min-height: 400px;
    margin-top: 30px;
    margin-bottom: 30px;
    /* padding-bottom: 15px; */



    border-radius: 19px;
    outline: .5px solid var(--accentoutline);
    background: var(--navbarcolor);

    margin-inline: 12px;

}




.dashboardoptions {

    display: inline-flex;
    list-style: none;
    
    color: var(--fontcolor);

    height: 30px;
    font-size: 1.5rem;
    font-family: sans-serif;



    /* outline: 3px yellow solid; */

}

.dashboardoptions > li {

  
    padding-inline: 30px;

}

.selectedoption {

    border-bottom: 3px var(--accentoutline) solid ;
}

.notselectedoption {

    opacity: .65;
}




.dashboardslides{

display: block;
position: relative;

width: 1200px;
height: 300px;
margin-left: auto;
margin-right: auto;


border-radius: 19px;
outline: 1px solid var(--accentoutline);
background: var(--boxcolor);


}


.buttonsbar{


    display: block;
    position: relative;
    
    margin-top: 15px;

    width: 1200px;
    margin-left: auto;
    margin-right: auto;
    
    border-radius: 19px;
    outline: 1px solid var(--accentoutline);
    background: var(--backgroundColor);

}






.chaintitle{

display: inline-flex;
padding: 10px;

}


.chaintitle > h1 {

padding-left: 10px;
line-height: 60px;
padding-top: 2.5px;


font-family:  sans-serif;
font-size: 2.5rem;
color: var(--fontcolor);
font-weight: bold;
    
    }

.chaintitle > img{

height: 60px;
        
        }



.chaininfo {

    display: inline-flex;
    width: 1230px;
    height: 300px;


    
    /* outline: 3px red solid; */

}



.chaintokenstats {

    display: flex;
    position: relative;

    padding-inline: 10px;
    margin-inline: 12px;


    height: 310px;




    border-radius: 15px;
    outline: 1px solid var(--accentoutline);
    background: var(--boxcolor);


}

.tokenstats {

    position: relative;
    padding-top: 5px;
    width: 120px;

}

.tokenstats > h2 {

    padding-top: 5px;

    font-family:  sans-serif;
    color: var(--fontcolor);
    font-size: 2rem;


}
    
.tokenstats > h4{


    font-family:  sans-serif;
    color: var(--fontcolor);
    font-size: 1rem;
    padding-bottom: 2px;

}

.tokenstats > p {

    font-family:  sans-serif;
    color: var(--fontcolor);
    font-size: 1.5rem;
    padding-bottom: 20px;

}


.tempchartimage {

display: inline;
position: relative;

margin-top: 50px;


height: 250px;
border-radius: 5px;
outline: var(--accentoutline) 1px solid;

    
}




.govandstake {

    width: 275px;
    height: 310px;
    position: relative;

    padding-inline: 10px;
    margin-inline: 12px;

    /* margin-right: 20px ;
    padding-inline: 10px; */

    border-radius: 15px;
    outline: 1px solid var(--accentoutline);
    background: var(--boxcolor);



}




.chainoptions {
    position: relative;
    display: inline-flex;
    width: 275px;


}

.chainoptions > h2 {

    font-size: 2.25rem;
    color: var(--fontcolor);
    font-family:  sans-serif;

}

.chainoptions > i {

    font-size: 1.5rem;
    color: var(--fontcolor);
    line-height: 2.7rem !important;
    padding-left: 5px;



}


.govprop {

    margin-top: 10px;
    position: relative;
    min-height: 67px;
    max-height: 67px;


    border-radius: 2.5px;
    outline: 2px solid var(--accentoutline);
    background: var(--backgroundColor);


}

.govprop > div {

display: inline-flex;

/* outline: red solid 3px; */

padding-top: 5px;


}

.govprop > div > i {


    padding-left: 5px;
    color:var(--fontcolor);
    font-size: .75rem;
    line-height: 1.25rem;


}

.govprop > div > h3 {

    padding-left: 2.5px;
    color:var(--fontcolor);
    font-size: 1rem;
    font-family:  sans-serif;
    
    
    }

.govprop > p {

font-size: 1rem;
padding-inline: 5px;
padding-bottom: 5px;
font-family:  sans-serif;
color: var(--fontcolor);

}


.chainstaking > h2 {

    padding-top: 10px;
}

.chainstaking > i {

    padding-top: 10px;
}

.chainstakingapr {


padding-top: 5px;
display: flex;



}

.chainstakingapr > button {

margin-inline: 5px;

text-align: center;

border-radius: 5px;
height: 45px;
padding-inline: 10px;
font-size: 1.05rem;

color: var(--fontcolor);
outline: solid .5px var(--accentoutline);
border-radius: 2.5px;
background-color:var(--navbarcolor);
font-family: sans-serif;

}





.chainresources {


    width: 275px;
    height: 310px;
    position: relative;

    padding-inline: 10px;
    margin-inline: 12px;


    border-radius: 15px;
    outline: 1px solid var(--accentoutline);
    background: var(--boxcolor);


}

.chainresources > h2 {

    font-size: 2.5rem;
    color: var(--fontcolor);
    font-family: sans-serif;

}

.chainresources > ul {

list-style: none;
padding-inline: 3px;
padding-top: 5px;

}

.chainresources > ul > li {

    font-size: 1.25rem;
    color: var(--fontcolor);
    font-family: sans-serif;

}

.chainresources > ul > li > i{

padding-right: 3px;

}

.resourcesblockdiv {

    display: flex;
    position: relative;
    padding-top: 10px;

}

.resourcesblockdiv > button {

margin-left: auto;
margin-right: auto;
height: 50px;
width: 150px;

font-size: 1.25rem;

color: var(--fontcolor);
outline: solid .5px var(--accentoutline);
border-radius: 2.5px;
background-color:var(--navbarcolor);
font-family: sans-serif;
}



footer{

display: block;
position: absolute;

width: 100%;
height: 25px;
margin-top: 50px;
bottom: auto;


background-color: var(--navbarcolor) ;
color: var(--fontcolor);
outline: 3px solid var(--accentoutline);

}



.hide {

    display: none ;
    visibility: hidden;

    }