body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #ccc;
}

* {
  box-sizing: border-box;
}

.top-container {
  background-color: #f1f1f1;
  padding: 10px;
  text-align: center;
}


.ttop {
  padding: 10px 16px;
  background: #555;
  color: #f1f1f1;
  border: 2px solid black;
}

.tlabels {
  padding: 10px 16px;
  background: #555;
  color: #f1f1f1;
  border: 2px solid black;
}

.headerlinks {
  padding: 8px 16px;
  background: #555;
  color: #f1f1f1;
}

.headerbox {
  padding: 10px 16px;
  background: #555;
  color: #f1f1f1;
  margin-left: auto;
  margin-right: auto;
  margin: 0 auto;
}

th {
  padding: 10px 16px;
  background: #555;
  color: #f1f1f1;
}

td {
  padding: 8px 16px;
  background: #888;
  color: #f1f1f1;
}

.iconsbox {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.content {
  padding: 16px;
}

.iconcolumn {
  float: left;
  margin-right: 10px;
}

.column {
  float: left;
  width: 35%;
  margin-right: 10px;
}

.row {
  display: flex;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.anchor {
  display: block;
  position: relative;
  top: -200px;
  visibility: hidden;
}

.sticky + .content {
  padding-top: 122px;
}

.Purified {
  background: #94d2cd;
}

.Shadow{
  background: #ca99fe;
}

.Perfect {
  background: #f19fad;
}

.ThreeStars {
  background: #f89a0f;
}

.ShinyThreeStars {
  background: #f5c204;
}

.Shiny {
  background: #f5c204;
}

.Lucky {
  background: #ffbd6a;
}

.Event {
  background: #e2ace3;
}

.Mega {
  background: #da85b6;
}