@font-face {
  font-family: balloo;
  src: url(https://globalactive.wondermannation.com/wndrsrv/webassets/BalooPaaji-Regular.ttf);
}

@font-face {
  font-family: rammetto;
  src: url(https://globalactive.wondermannation.com/wndrsrv/webassets/RammettoOne-Regular.ttf);
}

@font-face {
  font-family: poppins;
  src: url(https://globalactive.wondermannation.com/wndrsrv/webassets/Poppins-Regular.ttf);
}

body {
  font-family: balloo;
  color: #afafaf;
  font-size: 16px;
}

a,
a:visited,
a:hover,
a:active {
  color: inherit;
  text-decoration: none;
}

/*
style="display: flex; width:100%; height:20%; justify-content: center; background: #000000 url(https://globalactive.wondermannation.com/shop/assets/Wonderman_Hero_Capsule_V4C_Sm_FHD.jpg);"
*/
.header {
  display: grid;
  background-image: url("https://globalactive.wondermannation.com/shop/assets/Wonderman_Hero_Capsule_V4C_Sm_FHD.jpg");
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 20%;
  place-items: center;
}

.headerbox {
  display: flex;
}

.linkbox {
  background-color: #0f233e;
  color: #8ac94d;
  padding: 10px;
  padding-left: 20px;
  margin: 0px;
  margin-top: 1px;
  margin-bottom: 2px;
  font-family: rammetto;
  text-align: center;
}

.linkbox-active {
  background-color: #8ac94d;
  color: white;
  padding: 10px;
  padding-left: 20px;
  margin: 0px;
  margin-top: 1px;
  margin-bottom: 2px;
  font-family: rammetto;
  text-align: center;
}

.clinkbox {
  background-color: #0f233e;
  color: #f5d911;
  padding: 10px;
  padding-left: 20px;
  margin: 0px;
  margin-top: 1px;
  margin-bottom: 2px;
  font-family: rammetto;
  text-align: center;
}

.clinkbox-active {
  background-color: #f5d911;
  color: #0e1726;
  padding: 10px;
  padding-left: 20px;
  margin: 0px;
  margin-top: 1px;
  margin-bottom: 2px;
  font-family: rammetto;
  text-align: center;
}

.tlinkbox {
  background-color: #0f233e;
  color: #afafaf;
  padding: 10px;
  padding-left: 20px;
  margin: 0px;
  margin-top: 1px;
  margin-bottom: 2px;
  font-family: rammetto;
  text-align: center;
}

.tlinkbox-active {
  background-color: white;
  color: #0f233e;
  padding: 10px;
  padding-left: 20px;
  margin: 0px;
  margin-top: 1px;
  margin-bottom: 2px;
  font-family: rammetto;
  text-align: center;
}

.elinkbox {
  background-color: #0f233e;
  color: #ee6c3a;
  padding: 10px;
  padding-left: 20px;
  margin: 0px;
  margin-top: 1px;
  margin-bottom: 2px;
  font-family: rammetto;
  text-align: center;
}

.elinkbox-active {
  background-color: white;
  color: #ee6c3a;
  padding: 10px;
  padding-left: 20px;
  margin: 0px;
  margin-top: 1px;
  margin-bottom: 2px;
  font-family: rammetto;
  text-align: center;
}

.button {
  background-color: #3d9be9;
  border-width: 0px;
  box-shadow: 0px;
  color: white;
  padding: 0px;
  padding-left: 0px;
  margin: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  font-family: balloo;
  text-align: center;
}

.container {
  display: grid;
  align-items: center;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 5px;
}

.grid3 {
  display: grid;
  grid-template-columns: 0.3fr 1fr 0.6fr;
  grid-template-rows: auto auto;
  column-gap: 5px;
  row-gap: 5px;
  max-width: 760px;
  background-color: #d1d1d1;
  font-family: rammetto;
  font-size: 14px;
  color: #2b2b2b;
  padding-top: 16px;
  padding-bottom: 16px;
}

.grid8 {
  display: grid;
  grid-template-columns: 0.3fr 1fr 0.6fr 0.3fr 1fr 0.6fr 0.3fr 1fr;
  grid-template-rows: auto auto;
  column-gap: 5px;
  row-gap: 5px;
  max-width: 760px;
  background-color: #d1d1d1;
  font-family: rammetto;
  font-size: 14px;
  color: #2b2b2b;
  padding-top: 16px;
  padding-bottom: 16px;
}

.truncitem {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-text {
  font-size: 70px;
}

table {
  font-size: 16px;
  color: #afafaf;
  font-family: balloo;
  font-weight: lighter;
}

tr {
  font-size: 16px;
  color: #afafaf;
  font-family: balloo;
  font-weight: lighter;
}

th {
  font-size: 18px;
  color: #afafaf;
  font-family: balloo;
  font-weight: lighter;
}

.transactions {
  overflow: auto;
  background-color: #3d9be9;

  th {
    font-size: 16px;
    color: white;
    text-align: center;
    font-family: poppins;
  }

  td {
    background-color: #0e1726;
    color: white;
    text-align: center;
    /*word-wrap: break-word;
    word-break: break-all;*/
  }
}

.transactions2 {}

.truncate {
  overflow: clip;
  max-width: 100%;

  table {
    width: 100%;
    table-layout: fixed;
  }

  td {
    background-color: #0e1726;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
  }
}

.mainbody {
  height: 80%;
  /*overflow: auto;*/
}

p {
  max-width: 1000px;
}

h1 {
  font-size: 24px;
  color: #e6e6e6;
  font-family: rammetto;
  font-weight: lighter;
}

h2 {
  font-size: 20px;
  color: #e6e6e6;
  font-family: rammetto;
  font-weight: lighter;
}

h3 {
  font-size: 16px;
  color: #e6e6e6;
  font-family: rammetto;
  font-weight: lighter;
}

h4 {
  font-size: 16px;
  color: white;
  font-family: poppins;
  font-weight: lighter;
}

sub {
  font-size: 20px;
  color: white;
  font-family: rammetto;
}

.active {
  background-color: blue;
  color: white;
}

.hidden {
  display: none;
}