trackers/gamebuild/backloggery.css

/* lato-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/lato-v24-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* lato-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  src: url('/fonts/lato-v24-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* lato-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: url('/fonts/lato-v24-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* lato-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lato';
  font-style: italic;
  font-weight: 700;
  src: url('/fonts/lato-v24-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* titillium-web-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/titillium-web-v17-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* titillium-web-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Titillium Web';
  font-style: italic;
  font-weight: 400;
  src: url('/fonts/titillium-web-v17-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* titillium-web-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 700;
  src: url('/fonts/titillium-web-v17-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* titillium-web-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Titillium Web';
  font-style: italic;
  font-weight: 700;
  src: url('/fonts/titillium-web-v17-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* material-icons-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/material-icons-v142-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

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
}

details.game-item div.history {
  max-width: 95%;
}

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%
}

.unibar a {
  color: inherit;
}

.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 4px;
  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-right:2px solid rgba(0,0,0,.5);
  -webkit-box-flex:1;
  -ms-flex:1;
  flex:1;
  font-size:14px;
  margin:0;
  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
  white-space:nowrap;
}

.platform-card .bars a:first-of-type {
  border-left:none;
}

.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);
  display: inline-block;
  font-size: 0.8rem;
border-radius:.5rem;
margin:.25rem;
max-width:8rem;
  opacity:.8;
  position: relative;
  padding:.45rem 2rem .5rem 1rem;
  white-space: nowrap;
}

.library .filters .item .filter_clear {
  border-radius: .5rem;
  padding: .425rem .5rem .475rem;
  position: absolute;
  right: 0;
  top: 0;
}

.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:680px) {
  .platform-card .bars a {
    content:"";
    font-size:.6rem;
  }

  .platform-card .abbr,.platform-card .title {
    font-size:.8rem;
    min-width:45px;
  }

  .platform-card .total {
    font-size:.8rem;
  }

  .platform-card .total>span {
    display:none;
  }

}

@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
  }

}