@import "/?originalUrl=https%3A%2F%2Ffonts.googleapis.com%2Fcss2%3Ffamily%3DMaterial%2BSymbols%2BOutlined%3Awght%2CFILL%40100..700%2C0..1"; 

@font-face {
    font-family: "titillium";
    src: url("/?originalUrl=https%3A%2F%2Fapphex.win%2FTitilliumWeb-Regular.ttf");    
}

* {
    font-family: monospace;
    font-weight: normal;
}

body {
    margin-left: 2ch;
    margin-right: 2ch;
    /*width: 100%;*/
    /*background: linear-gradient( pink, darkturquoise) fixed;*/
    background: '#333';
    color: 'whitesmoke';
}

hex  {
    color: #f0a;
}

#BPD {
    color: deeppink;
    text-shadow: 0 0 15px deeppink;
    margin-bottom: 2ch;
}

#postrate {
    color: darkturquoise;
    text-shadow: 0 0 10px darkturquoise;
}

div.border {
    background-color: #27284E;
    border-color: white;
    border-width: medium;
    border-style: none;
    border-radius: 10px;
    padding-left: 10px;
    margin-top: 1ch;
    margin-bottom: 1ch;
}

div.border2 {
    display: inline-block;
    background-color: #111;
    border-color: white;
    border-width: thin;
    border-style: solid;
    border-radius: 10px;
    padding: 10px;
    margin-top: 1ch;
    margin-bottom: 1ch;
}

h1.GRAPHEX {
    font-family: fantasy;
    background: linear-gradient(45deg,#ffe700,#f0a);
    color: darkturquoise;
    padding-left: 10px;
}

a.freehex {
    font-family: fantasy;
    background: linear-gradient(45deg,#ffe700,#f0a);
    color:#222;
    border-radius: 5px;
    padding: 5px;
}

a.freehex2 {
    font-family: fantasy;
    background-color: #f0a;
    color: #ffe700;
    border-radius: 2px;
    padding-left: 10px;
    padding-right:10px;
    font-size: x-large;
}

h2 {
    margin-block-end: 0;
}

h4 {
    color: #999;
}

a {
    color: lightyellow;
}

video {
    width: 100%;
    max-height: 350px;
}

a.top {
    padding: 0.75ch;
    background-color: #1115;
    color: lightyellow;
    /*font-size: 1.5ch;*/
    display: block;
}

img.top {
    width: 4ch;
    vertical-align: middle;
    margin-right: 1ch;
    clip-path: circle(2ch at center);
}


img.top2 {
    width: 4ch;
    vertical-align: middle;
    margin-right: 1ch;
}

button {
    margin-top: 1ch;
    padding: 1ch;
    padding-top: 0.7ch;
    padding-bottom: 0.7ch;
    background-color: rgb(239, 239, 239);
    border-radius: 2ch;
}
select {
    display: block;
    height: 3ch;
}

input {
    margin-top: 1ch;
}

#scan::after {
    background-image: url("/?originalUrl=https%3A%2F%2Fapphex.win%2Fqr-code-3.svg");
}

select {
    margin-top: 1ch;
}

form {
    margin-top: 2ch;
}

#main {
    width: 45ch;
    margin: 0 auto;
}

#cnx {
    margin-top: 2ch;
}


.addr {
    cursor: pointer
}

.addr:hover {
    color: lightyellow;
}

#error {
    color: red;
    display: block; 
    margin-top: 2ch;
}

#confirm {
    color: limegreen;
    display: block;
    margin-top: 2ch;
}

.bal {
    margin-top: 1ch;
}

bal1 {
    color: violet;
}

bal2 {
    color: yellowgreen;
}

bal3 {
    color: aqua;
}

#content {
    display: grid;
    width: 45ch;
}

.subcontent {
    display: grid;
}

.result {
    color: deepskyblue;
    margin-top: 2ch;
}

.retry {
    color: crimson;
}

#menu {
    grid-template-columns: auto auto;
    grid-gap: 4px;
    width: 44ch;
}

.menu {
    /*width: 28ch;*/
    /*margin-top: 1ch;*/
    text-align: start;
}

.menu3 {
    grid-column: 1/3;
} 

.loading {
    transform-origin: 50% 50%;
    image-rendering: pixelated;
    animation: spin 2s linear infinite ;
    transform: rotate(360deg);
}

@keyframes spin {
    0% { transform: rotate(0deg)};
}

#checkit {
    margin-top: 1ch;
    color: darkorange;
}

#dark {
    display: flex;
    justify-content: flex-end;
    cursor: pointer;
    padding: 1ch;
    position: fixed;
    right: 1ch;
}

#network1 {
    display: flex;
    justify-content: flex-end;
    cursor: pointer;
    padding: 1ch;
    position: fixed;
    right: 1ch;
    top: 11ch;
    text-shadow: 1px 2px 10px #fff;
}


#gas {
    display: flex;
    justify-content: flex-end;
    padding: 1ch;
    position: fixed;
    right: 1ch;
    bottom: 1ch;
    color:#000;
    font-size: small;
}

#ROI1 {
    color: green;
    font-size: 2ch;
}

#ROI2 {
    color: crimson;
    font-size: 2ch;
}


.tab {
    display: grid;
    grid-template-columns: auto auto;
    margin-bottom: 2ch;
}

.tab button.active {
    background-color: #111;
    border-color: #222;
    color: deeppink;
    font-size: large;
}

.tab button:focus {outline:0;}

.tablinks {
    border-radius: 0ch;
}

label.bal {
    display: table;
    font-weight: bold;
}

#baldiv {
    background-color: #eee;
    padding: 1ch;
    display: inline-grid;
    border-radius: 1.5ch;
    margin-top: 2ch;
    margin-bottom: 2ch;
    box-shadow: 1px 2px 5px #666;
}

#network4 {
    color: #000;
    font-weight: bold;
    font-size: large;
    padding: 1ch;
    /*border-radius: 1.5ch;*/
    box-shadow: 1px 2px 5px #000;
}

msg {
    color: lightyellow;
    font-size: 1.5  ch;
    display: block;
    cursor: pointer;
}

msg:active {
    background-color:mediumvioletred;
}


.addr_bt {
    cursor: pointer;
    vertical-align: top;
    padding: 1ch;
    width: 2.5ch;
    background-color: #222;
}





/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }
  
  /* Modal Content */
  .modal-content {
    background-color: #fefefe;
    color: black;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 50ch;
  }
  
  /* The Close Button */
  .close {
    color: rgb(255,38,150);
    float: right;
    font-size: 28px;
    font-weight: bold;
    padding: 1ch;
    background-color: aliceblue;
  }  

  .close:hover,
  .close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
  }

  #lang1 {
    display: flex;
    justify-content: flex-end;
    cursor: pointer;
    padding: 1ch;
    position: fixed;
    right: 1ch;
    top:6ch;
  }

  .lang {
    color:rgb(255,38,150);
    display: block;
    margin-bottom: 1.5ch;
  }

  #wc {
      width: 20ch;
  }

  .uni {
    width: max-content;
    color: white;
    background: linear-gradient(73.28deg,#49b1fc 6.51%,#821aeb 88.45%); /*radial-gradient(174.47% 188.91% at 1.84% 0%, rgb(255, 0, 122) 0%, rgb(33, 114, 229) 100%) repeat scroll 0% 0%, rgb(237, 238, 242) none repeat scroll 0% 0%;*/
    padding: 1ch;
    border-radius: 1ch;
    cursor: pointer;
    margin-top: 1ch;
  }

  .staker {
    background: linear-gradient(120deg,#0388fc 30%,#11fcf4);
    padding: 1ch;
    border-radius: 1ch;
    margin-right: 1ch;
}

.pulsechain {
    background: linear-gradient(210deg, #00eaff 0%, #0080ff 25%, #8000ff 50%, #e619e6 75%, #f00 100%);
    padding: 1ch;
    border-radius: 1ch;
    margin-right: 1ch;
}

  .stake {
    background: linear-gradient(45deg, green, transparent);
    padding: 1ch;
  }

  .stake_ees {
    background: linear-gradient(45deg, red, transparent);
    padding: 1ch;
  }

  .year {
      cursor: pointer;
      background-color: #222;
  }

#pls{
    color: hotpink;
    display: block;
}

#liq{
    color: #0388fc;
    display: block;
}

#staked{
    color: #e619e6;
    display: block;
}

#total{
    color: #ffe700;
    display: block;
}

.chainhead{  
    color: #BBB;
    font-size: 2ch;
    font-stretch: extra-expanded;
    padding: 0ch;
    margin-bottom: 1ch;
    display: flex;
    flex-wrap: nowrap;
}

.token {
    height: 2ch;
    margin-right: 0.5ch;
    vertical-align: top;
}

.rc1 {
    width: 50ch;
    flex-grow: 1;
    flex-basis: 50ch;
    padding: 1ch;
    border-style: solid;
    border-width: thin;
    border-color: darkcyan;
    font-size: medium;
    /*background-color: #27284E;*/
    background: linear-gradient(25deg, rgba(15, 15, 15, 0.4), rgba(25, 25, 25, 0.2), rgba(15, 15, 15, 0.1));
}

.rc2 {
    font-size: larger;
    font-weight: normal;
    color: white;
}
.slide {
    top: -100px; /* Adjust this to control how far the box slides up */
}