trackers/build/backloggery.css

a,aside,body,details,div,fieldset,figcaption,figure,footer,h1,h2,h3,html,img,input,li,main,nav,ol,p,section,select,span,summary,table,textarea,ul {
  border:0;
  -webkit-box-sizing:border-box;
  box-sizing:border-box;
  font-size:100%;
  margin:0;
  outline:none;
  padding:0;
  vertical-align:baseline
}

:root {
  --default-base:#424957;
  --default-secondary:#272c34;
  --default-secondary-50:rgba(40,44,52,0.5);
  --default-accent:#f58d47;
  --default-text:#fff;
  --default-secondary-text:#fff;
  --default-accent-text:#000;
  --default-accent-shadow:hsla(0,0%,0%,50%);
  --retro-border:url(/img/border.png);
  --active-base:var(--default-base);
  --active-secondary:var(--default-secondary);
  --active-secondary-50:var(--default-secondary-50);
  --active-accent:var(--default-accent);
  --active-text:var(--default-text);
  --active-secondary-text:var(--default-secondary-text);
  --active-secondary-text-25:hsla(0,0%,100%,0.25);
  --active-accent-text:var(--default-accent-text);
  --beaten-color: hsla(0, 0%, 82%, 0.9);
  --completed-color: hsla(48, 80%, 82%, 0.9);
  --unplayed-color: hsla(200, 30%, 30%, 0.9);
  --unfinished-color: hsla(0, 38%, 35%, 0.9);
  --endless-color: hsla(275, 39%, 32%, 0.9);
}

html {
  color:var(--active-text);
  font-family:Lato,arial,helvetica,sans-serif;
  font-size:.9rem;
  overflow-x:hidden;
  overflow-y:overlay;
  scroll-behavior:smooth
}

body {
  background-attachment:fixed;
  background-color:var(--active-base);
  margin:0;
  padding:0
}

#app>div:last-of-type {
  display:grid;
  grid-gap:0 10px;
  grid-template-columns:repeat(12,1fr);
  grid-template-rows:auto;
  grid-template-areas:"card card card card card card card card card card card card" "side side side side side side side side side side side side" "main main main main main main main main main main main main";
  max-width:1200px;
  margin: 0 auto;
  padding:0 2vw 0 1vw
}

section {
  padding:2vh 1vw 2vh
}

a {
  text-decoration:none
}

.link,a {
  color:var(--active-text)
}

img {
  max-width:100%
}

h1,h2 {
  font-family:Titillium Web,Tahoma,Arial,Helvetica,sans-serif;
  font-variant:small-caps;
  letter-spacing:2px;
  border-bottom:1px solid var(--active-text);
  font-size:18px;
  margin:30px 0 10px;
  padding-left:5px
}

h1:first-of-type {
  margin:0 0 15px
}

svg,svg text {
  fill:var(--active-text)
}

svg text {
  font-family:Titillium Web,Tahoma,Arial,Helvetica,sans-serif
}

.decay {
  opacity:.5
}

.decay:active,.decay:focus,.decay:focus-within,.decay:hover {
  opacity:1
}

.tabs {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  /* margin-top:3rem; */
  padding:.3rem 0
}

.tabs a,.tabs div {
  background-color:var(--active-secondary-50);
  border-bottom:2px solid var(--active-text);
  color:var(--active-secondary-text);
  -webkit-box-flex:1;
  -ms-flex:1;
  flex:1;
  font-family:Titillium Web,Tahoma,Arial,Helvetica,sans-serif;
  font-size:1rem;
  letter-spacing:1px;
  opacity:.7;
  padding:.5rem 0 .4rem;
  text-align:center;
  text-transform:uppercase;
  white-space:nowrap
}

.tabs a:hover,.tabs div:hover {
  opacity:1
}

.tabs a,.tabs a.router-link-active {
  border-top:2px solid var(--active-text)
}

.tabs a.router-link-active {
  background:var(--active-accent);
  border-bottom:2px solid var(--active-text);
  color:var(--active-accent-text);
  font-weight:700;
  opacity:1;
  position:relative
}

.tabs a.router-link-active a {
  border:none;
  display:block;
  padding-right:10%;
  position:absolute;
  top:-7px;
  right:0;
  text-align:right;
  width:100%
}



.Added,.unplayed,.Unplayed {
  background-color:var(--unplayed-color)!important;
  color:hsla(0,0%,100%,.75);
  text-shadow:none
}

.Started,.unfinished,.Unfinished {
  background-color:var(--unfinished-color)!important;
  color:hsla(0,0%,100%,.75);
  text-shadow:none
}

.Beat,.beaten,.Beaten {
  background-color:var(--beaten-color)!important;
  color:rgba(0,0,0,.75);
  text-shadow:none
}

.completed,.Completed {
  background-color:var(--completed-color)!important;
  color:rgba(0,0,0,.75);
  text-shadow:none
}

.endless,.Endless {
  background-color:var(--endless-color)!important;
  color:hsla(0,0%,100%,.75);
  text-shadow:none
}

.Playing {
  color:hsla(0,0%,100%,.75)
  background-color:#202020!important
}

.borderless {
  border:none!important
}

.markdown {
  padding:0 .25rem;
  white-space:pre-wrap
}

div.profile main {
  grid-area:main
}

.game-item {
  margin-bottom:-3px;
  overflow:hidden;
  position:relative;
}

.game-item>summary {
  cursor: pointer;
}

.game-item>summary:first-child {
  background-color:hsla(0,0%,100%,.05);
  border:2px solid rgba(0,0,0,.5);
  border-radius:4px;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  margin-bottom:10px;
  min-height:54px;
  max-height:54px;
  overflow:hidden;
  position:relative;
  text-align:center;
  width:100%
}

.game-item>summary:first-child>div {
  -webkit-box-flex:1;
  -ms-flex:1;
  flex:1
}

.game-item>summary:first-child>.platform {
  background-color:var(--active-secondary);
  border-radius:3px 0 0 3px;
  color:var(--active-secondary-text);
  min-height:50px;
  max-width:50px;
  overflow:hidden
}

.game-item>summary:first-child>.platform img,.game-item>summary:first-child>.platform p {
  opacity:.85
}

.game-item>summary:first-child>.platform img {
  position:relative;
  top:7px;
  width:35px
}

.game-item>summary:first-child>.platform img.bw {
  -webkit-filter:var(--platform-bw);
  filter:var(--platform-bw)
}

.game-item>summary:first-child>.status {
  max-width:48px;
  padding:5px 9px
}

.game-item>summary:first-child>.status img {
  margin-top:3px;
  max-width:32px
}

.game-item>summary:first-child>.text {
  -webkit-box-flex:5;
  -ms-flex-positive:5;
  flex-grow:5;
  padding:3px 4px;
  text-align:left
}

.game-item>summary:first-child>.text>.title {
  font-family:Titillium Web,sans-serif;
  font-size:1.1rem;
  line-height:1.1rem;
  margin:0 0 -3px
}

@supports(-webkit-line-clamp:1) {
  .game-item>summary:first-child>.text>.title {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:normal;
    display:-webkit-box;
    -webkit-line-clamp:1;
    -webkit-box-orient:vertical
  }


}

.game-item>summary:first-child>.text>.markdown {
  font-size:.7rem;
  max-height:32px;
  opacity:.75;
  padding:2px 1px;
  width:auto;
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden
}

@supports(-webkit-line-clamp:2) {
  .game-item>summary:first-child>.text>.markdown {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:normal;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical
  }


}

.game-item>summary:first-child>.priority {
  max-width:56px;
  padding-right:10px;
  text-align:center
}

.game-item>summary:first-child>.priority img {
  margin-top:3px;
  max-width:32px;
  opacity:.5
}

.donut {
  display:block
}

.platform-card {
  border:2px solid rgba(0,0,0,.5);
  border-radius:6px;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  font-weight:700;
  margin:0 0 7px;
  text-align:center;
  width:100%
}

.platform-card .bars {
  border-radius:0 4px 4px 0;
  display:-webkit-inline-box;
  display:-ms-inline-flexbox;
  display:inline-flex;
  border-left:2px solid rgba(0,0,0,.5);
  -webkit-box-flex:9;
  -ms-flex:9;
  flex:9
}

.platform-card .bars a {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;
  -webkit-box-pack:center;
  -ms-flex-pack:center;
  justify-content:center;
  border-left:2px solid rgba(0,0,0,.5);
  -webkit-box-flex:1;
  -ms-flex:1;
  flex:1;
  font-size:20px;
  margin:0;
  min-width:2rem;
  padding:0 3px;
  -webkit-transition:-webkit-box-flex .5s ease-in-out;
  transition:-webkit-box-flex .5s ease-in-out;
  transition:flex .5s ease-in-out;
  transition:flex .5s ease-in-out,-webkit-box-flex .5s ease-in-out,-ms-flex .5s ease-in-out
}

.platform-card .bars a:first-of-type {
  border-left:0 solid rgba(0,0,0,.5)
}

.platform-card .bars a.remove_flex {
  border:none;
  -webkit-box-flex:0;
  -ms-flex:0;
  flex:0;
  min-width:unset;
  padding:0
}

.platform-card .abbr,.platform-card .title {
  background:var(--active-secondary);
  border-radius:4px 0 0 4px;
  color:var(--active-secondary-text);
  -webkit-box-pack:center;
  -ms-flex-pack:center;
  justify-content:center;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-flex:4;
  -ms-flex:4;
  flex:4;
  font-size:17px;
  font-weight:700;
  min-width:50px;
  overflow:hidden;
  padding:5px;
  white-space:nowrap
}

.platform-card .abbr {
  display:none
}

.platform-card .total {
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;
  background:var(--active-secondary);
  border-radius:0 4px 4px 0;
  color:var(--active-secondary-text);
  -webkit-box-pack:right;
  -ms-flex-pack:right;
  justify-content:right;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-flex:2;
  -ms-flex:2;
  flex:2;
  font-size:17px;
  font-weight:700;
  overflow:hidden;
  padding-right:10px;
  white-space:nowrap;
  width:100px
}

.platform-card .total span {
  margin-left:6px
}

.backlog-breakdown {
  display:block;
  text-align:center;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap
}

.backlog-breakdown .backlog-charts {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
  -ms-flex-direction:column;
  flex-direction:column;
  width:100%
}

.backlog-breakdown .mem-sum {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-flex:1;
  -ms-flex:1;
  flex:1
}

.backlog-breakdown .mem-sum .donut {
  display:inline-block;
  margin:0 4vw;
  min-width:44%
}

.status-tally {
  -webkit-box-flex:4;
  -ms-flex:4;
  flex:4;
  font-size:18px;
  margin:15px 0 25px 25px
}

.status-tally a:first-of-type div {
  padding-top:8px!important
}

.status-tally a {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;
  margin:-5px 20px -5px 0;
}

.status-tally a div {
  padding:1px 3px;
  vertical-align:middle
}

.status-tally a div img {
  max-width:32px
}

.status-tally a div:first-child {
  text-align:right;
  width:60px
}

.status-tally a div:nth-child(2) {
  border-right:2px solid rgba(0,0,0,.5);
  padding:4px 5px 4px 0;
  width:40px
}

.status-tally a div:last-child {
  -webkit-box-shadow:inset 7px 0 7px -5px rgba(0,0,0,.25);
  box-shadow:inset 7px 0 7px -5px rgba(0,0,0,.25);
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  padding:4px 0;
  width:99%
}

.status-tally a div:last-child div {
  -webkit-animation:width_in 1s ease-in-out;
  animation:width_in 1s ease-in-out;
  border:2px solid rgba(0,0,0,.5);
  border-left:none;
  border-radius:0 4px 4px 0;
  display:block;
  font-size:14px;
  font-weight:700;
  overflow:hidden;
  padding:7px 0 7px 7px;
  text-align:left;
  -webkit-transition:width .5s ease-in-out;
  transition:width .5s ease-in-out;
  white-space:nowrap
}

.status-tally img {
  max-width:none;
  position:relative;
  top:2px
}

.status-tally .backlog-tally {
  border:2px solid rgba(0,0,0,.5);
  border-radius:4px;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  margin-bottom:5px
}

.status-tally .backlog-tally div {
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  font-size:1rem;
  font-weight:700;
  height:2.35rem;
  text-align:center;
  -webkit-transition:width .5s ease-in-out;
  transition:width .5s ease-in-out
}

.status-tally .backlog-tally div:first-of-type {
  border-radius:4px 0 0 4px;
  border-right:2px solid rgba(0,0,0,.5);
  background-color:var(--active-accent);
  color:var(--active-accent-text)
}

.status-tally .backlog-tally div:last-of-type {
  border-radius:0 4px 4px 0;
  background-color:var(--active-secondary);
  color:var(--active-secondary-text)
}

.status-tally .backlog-tally div span {
  width:100%
}

.library .unibar {
  border:2px solid rgba(0,0,0,.5);border-radius:8px;display:-webkit-box;display:-ms-flexbox;display:flex;width:100%}

.library .unibar div {
  border-left:2px solid rgba(0,0,0,.5);-webkit-box-flex:1;-ms-flex:1;flex:1;font-size:1.25rem;font-weight:700;line-height:1.25rem;padding:.5rem;text-align:center}

.library .unibar div:first-of-type {
  background-color:var(--active-secondary);border:none;border-radius:6px 0 0 6px;color:var(--active-secondary-text);max-width:30%;padding:.5rem 1rem;white-space:nowrap}

.library .unibar div:first-of-type span {
  margin-right:1rem}

.library .unibar div:last-of-type {
  border-radius:0 6px 6px 0}

.library .unibar div.unplayed {
  background-color:var(--unplayed-color)}

.library .unibar div.unfinished {
  background-color:var(--unfinished-color)}

.library .unibar div.beaten {
  background-color:var(--beaten-color)}

.library .unibar div.completed {
  background-color:var(--completed-color)}

.library .unibar div.endless {
  background-color:var(--endless-color)}

.library .library-list {
  margin-top:20px}

.game-item .game-info {
  -webkit-box-align:start;
  -ms-flex-align:start;
  align-items:flex-start;
  background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.05)),to(rgba(0,0,0,.05)));
  background-image:linear-gradient(rgba(0,0,0,.05),rgba(0,0,0,.05));
  border-radius:0 0 5px 5px;
  -webkit-box-shadow:inset 0 3px 10px rgba(0,0,0,.5);
  box-shadow:inset 0 3px 10px rgba(0,0,0,.5);
  margin:-10px 8px 15px 30px;
  padding:10px;
  position:relative
}

.game-item .game-info label {
  font-size:12px;
  font-weight:700;
  letter-spacing:.5px;
  margin-left:4px;
  opacity:.9;
  text-transform:uppercase
}

.game-item .game-info .markdown,.game-item .game-info p {
  font-size:16px;
  margin:0 0 12px .3rem;
  padding:0
}

.game-item .game-info .data,.game-item .game-info .history,.game-item .game-info .review {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  margin:auto 15px;
}

.game-item .game-info .history {
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
  width:100%
}

.game-item .game-info .history .list {
  font-size:14px
}

.game-item .game-info .history .list>div {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex
}

.game-item .game-info .history .list>div>div:first-of-type {
  -webkit-box-flex:1;
  -ms-flex:1;
  flex:1;
  margin-right:5px;
  opacity:.65;
  text-align:right
}

.game-item .game-info .history .list>div>div:last-of-type {
  -webkit-box-flex:2;
  -ms-flex:2;
  flex:2
}

.game-item .game-info .box_2 {
  margin-right:15px
}

.game-item .game-guest label {
  opacity:.5
}

.history .box_1 {
  width: 95%;
}

div.profile aside {
  grid-area:side;
  margin-top:1.5rem;
  position: sticky;
}

.library .filters {
margin:.25rem 0 1.5rem;
width:100%}

.library .filters>div {
padding:1rem;
width:95%}

/* .library .filters .empty-filters {
   border:2px solid rgba(0,0,0,.5);
   background-color:var(--active-secondary);
   color:var(--active-secondary-text);
   border-radius:.5rem;
   margin:.5rem auto;
   opacity:.8;
   padding:.4rem;
   text-align:center}

   .library .filters .empty-filters:hover {
   opacity:1} */

.library .filters .item {
border:2px solid rgba(0,0,0,.5);
background-color:var(--active-secondary);
color:var(--active-secondary-text);
border-radius:.5rem;
margin:.25rem;
max-width:8rem;
opacity:.8;
padding:.4rem 1rem .5rem}

.library .filters .item:hover {
opacity:1}

.status-dot {
  width:12px;
  height:12px;
  max-width:12px;
  border-radius:8px;
  border:2px solid #000;
  display:inline-block;
  margin-right:3px;
  opacity:1;
  position:relative;
  top:1px;
}


/* new for history page */

.hide_arrow {
    -webkit-transform: translateX(100px);
    transform: translateX(100px)
}

.scroll-button {
  border-radius: 8px;
  background: var(--active-secondary);
  color: var(--active-secondary-text);
  cursor: pointer;
  display: block;
  font-size: 18px;
  opacity: .7;
  pointer-events: all;
  position: fixed;
  bottom: 20px;
  right: 20px;
  text-align: center;
  line-height: 26px;
  height: 30px;
  width: 30px;
  -webkit-transition: -webkit-transform .5s;
  transition: -webkit-transform .5s;
  transition: transform .5s;
  transition: transform .5s,-webkit-transform .5s
}

.box_1 {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1
}

.history {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  width: 100%
}

.history .list, .history .retro {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.history .list>div {
    font-size: 14px
}

.history .list>div:first-of-type h2 {
    margin-top: 0
}

.history .list>div h2 {
    display: block;
    font-size: 13px
}

section.history .list>div>div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex
}

.history .list>div>div>div:first-of-type {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin-right: 5px;
    opacity: .65;
    text-align: right
}

.history .list>div>div>div:last-of-type {
    -webkit-box-flex: 2;
    -ms-flex: 2;
    flex: 2
}

.history .list>div>div>div:last-of-type span {
  opacity: .65
}

.history .side {
    margin-left: 40px;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.history .side .year-tally {
    font-size: 14px;
    opacity: .7;
    margin: 25px 0 15px 0;
    padding: 10px 10px 10px
}

.history .side .year-tally.active {
  background-color: var(--active-secondary-50);
  color: var(--active-secondary-text);
  border-left: 3px solid var(--active-accent);
  border-radius: 0 1rem 1rem 0;
  opacity: 1
}

.history .side .year-tally:first-of-type {
    margin-top: 0
}

.history .side .year-tally h2 {
    border: none;
    margin: 0 0 5px
}

.history .side .year-tally h2 span {
    float: right;
    font-size: 14px;
    padding-top: 5px
}

.history .side .year-tally div {
    display: table-row
}

.history .side .year-tally div div {
    display: table-cell;
    padding: 1px 3px;
    vertical-align: middle
}

.history .side .year-tally div div:first-of-type {
    text-align: right
}

.history .side .year-tally div div:nth-child(2) {
    -webkit-box-flex: 0;
    -ms-flex: 0;
    flex: 0;
    border-right: 2px solid #000;
    padding: 0 5px 0 3px;
    text-align: center;
    min-width: 40px
}

.history .side .year-tally div div:last-child {
    -webkit-box-shadow: inset 7px 0 7px -5px rgba(0,0,0,.25);
    box-shadow: inset 7px 0 7px -5px rgba(0,0,0,.25);
    padding: 4px 0;
    width: 100%
}

.history .side .year-tally div div:last-child div {
  -webkit-animation: width_in 1s ease-in-out;
  animation: width_in 1s ease-in-out;
  border: 2px solid #000;
  border-left: none;
  border-radius: 0 4px 4px 0;
  display: block;
  font-size: 14px;
  height: 16px;
  overflow: hidden;
  text-align: left
}

@media screen and (min-width:800px) {
  div.profile {
    grid-template-areas:"card card card card card card card card card card card card" "side side side side main main main main main main main main"!important
  }

  .tabs {
    margin-top:0
  }


}

@media screen and (min-width:1024px) {
  .backlog-breakdown,.backlog-breakdown .backlog-charts {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex
  }

  .backlog-breakdown .backlog-charts {
    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
    -ms-flex-direction:row;
    flex-direction:row;
    width:100%
  }

  .backlog-breakdown .mem-sum {
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column;
    min-width:160px;
    max-width:160px
  }

  .backlog-breakdown .mem-sum .donut {
    margin:0
  }

  .backlog-breakdown .mem-sum .donut:last-of-type {
    position:relative;
    top:-10px
  }

}

@media screen and (max-width:1024px) {
  .platform-card .title {
    display:none
  }

  .platform-card .abbr {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-flex:1;
    -ms-flex:1;
    flex:1;
    min-width:80px
  }

  .platform-card .bars a:last-of-type {
    width:50px
  }

  .platform-card .bars a:last-of-type span {
    display:none
  }


}

@media screen and (max-width:700px) {
  .tabs a {
    font-size:.8rem
  }

  .history {
    display:block;
  }

  .history .side {
    margin-left: 0;
    margin-top: 50px
  }

  .game-item .game-info {
    margin-left:8px
  }

  .game-item .game-info .box_2 {
    margin-right:0
  }

  .game-item .game-info .data,.game-item .game-info .history,.game-item .game-info .review {
    display:block
  }
  
  .game-item .game-info .data .box_1 div {
    display:inline-block;
    margin-right:1%;
    width:48%
  }
  
  
}

@media screen and (max-width:600px) {
  .library .unibar div {
    font-size:3vw}

  .library .unibar div:first-of-type span {
    margin-right:.5rem}
}

@media screen and (max-width:520px) {

  .game-item>summary:first-child>.text>.title {
    font-size:1rem
  }

  .game-item>summary:first-child>.status {
    padding:5px
  }

}