@font-face {
    font-family: 'sims';
    src: url(simsans.ttf);
}

@font-face {
    font-family: 'display';
    src: url(simsansdisplay.ttf);
}

@font-face {
    font-family: 'bentou';
    src: url(bentousans.ttf);
}

body {
    font-family: 'bentou';
    background-image: url(bg.png);
    background-position: top center;
    background-size: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: #012254;
}

h1 {
    background-image: linear-gradient(180deg, #12adf5, #2254b7);
    background-clip: text;
    color: transparent;
    font-family: 'sims';
    -webkit-text-stroke-width: 0.5px;
    -webkit-text-stroke-color: white;
}

h3 {
    background-clip: text;
    color: transparent;
    font-family: 'display';
    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
    color: #61cb36;
}

h2 {
    font-family: 'sims';
    color: #fff;
    padding: 10px;
    border-radius: 10px 10px 0 0;
    margin-bottom: 0px;
    cursor: pointer;
}

h2 img {
    vertical-align: middle;
}

.gp {
    background-color: #136cfc;
}

.ep {
    background-color: #26bebd;
}

b{
    color: #136cfc;
}

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

.gen {
    width: 30px;
    float: left;
    margin-right: 5px;
}

.blank::before {
    content: "◻ ";
}

.done::before {
    content: "⧅ ";
}

li.done {
    color: gray;
}

li {
    list-style: none;
    padding-left: 10px;
}

a, a:visited {
    color: #136cfc;
}

a:hover {
    color: #61cb36;
}

.trait {
  height: 64px; /* adjust to control the size  */
  aspect-ratio: 1/cos(30deg);
  clip-path: polygon(50% -50%,100% 50%,50% 150%,0 50%);
  padding: 15px;
    background-color: #ebebeb;
}

.trait2 {
  height: 64px; /* adjust to control the size  */
  aspect-ratio: 1/cos(30deg);
  clip-path: polygon(50% -50%,100% 50%,50% 150%,0 50%);
  padding: 15px;
    background-color: #ebebeb;
    margin-left: -20px;
    position: relative;
    top: 50px;
    margin-right: -20px;
}

.content {
    background-color: rgba(235, 235, 235, 0.7);
    padding: 5px;
    border-radius: 10px;
    border: 2px solid #fff;
    margin-bottom: 10px;
}

.game {
    background-color: rgba(235, 235, 235, 0.7);
    padding: 5px;
    border-radius: 0 0 10px 10px;
    border-left: 2px solid #136cfc;
    border-right: 2px solid #136cfc;
    border-bottom: 2px solid #136cfc;
    box-shadow: inset -7px -7px 7px 3px rgba(0,0,0,0.1);
}

.expansion {
    background-color: rgba(235, 235, 235, 0.7);
    padding: 5px;
    border-radius: 0 0 10px 10px;
    border-left: 2px solid #26bebd;
    border-right: 2px solid #26bebd;
    border-bottom: 2px solid #26bebd;
    box-shadow: inset -7px -7px 7px 3px rgba(0,0,0,0.1);
}

.game b, .expansion b {
    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
}

.task {
    padding-left: 20px;
}

.aspiration {
    clip-path: polygon(50% -50%,100% 50%,50% 150%,0 50%);
    padding: 15px;
    padding: 15px;
    float: left;
    background-image: radial-gradient(#ebebeb, #ffd655);
    margin-top: 10px;
    margin-right: 10px;
}

hr {
    border: none;
}

.title {
    background-color: #ebebeb;
    padding: 5px;
    border-radius: 5px 5px 0 0;
    margin: -10px;
    margin-bottom: 10px;
    display: flex;
}

.border {
    border: 2px solid #ebebeb;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 20px;
    margin-top: 20px;
}

.border b {
    color: #ffd655;
}

.bar {
    background-color: #c6cdf4;
    border-radius: 50px;
    border: 2px solid #6b6e83;
}

.progress {
    background-image: linear-gradient(180deg, #98d74e, #49b52d);
    padding: 5px;
    border-radius: 50px;
    color: #ebebeb;
    text-align: right;
    margin: 1px;
}

li img {
    width: 20px;
    vertical-align: middle;
    filter: drop-shadow(-1px -1px 0 #fff)
            drop-shadow(1px -1px 0 #fff)
            drop-shadow(-1px 1px 0 #fff)
            drop-shadow(1px 1px 0 #fff);
    margin-left: 2px;
}

.collection {
    text-align: center;
}

.collection img {
    border: 2px solid #ebebeb;
    background-color: #ebebeb80;
    border-radius: 20px;
    filter: grayscale(100);
    width: 100px;
}

.tooltip {
  position: absolute;
  visibility: hidden;
  padding: 5px;
  background-color: #ebebebbb;
  z-index: 1000;
  pointer-events: none;
  max-width: 300px;
  border-radius: 10px;
  border: 2px solid #ebebebd2;
}

.tooltip-visible {
  visibility: visible;
  opacity: 1;
  display: block;
}

img.gotten {
    filter: grayscale(0);
}

.clearfix {
    overflow: auto;
}

.heart {
  background-color: #ebebebbb;
  width: 150px;
  clip-path: shape(from 50% 91%,line to 90% 50%,arc to 50% 9%  of 1%,arc to 10% 50% of 1%);
  text-align: center;
}

#G2, #G3, #G4, #G5, #G6 {
    display: none;
}