@font-face {
    font-family: 'Quattrocento';
    font-style: normal;
    font-weight: 400;
    src: local('Quattrocento'), url(http://fonts.gstatic.com/s/quattrocento/v7/WZDISdyil4HsmirlOdBRFD0LW-43aMEzIO6XUTLjad8.woff2) format('woff2');
    unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Quattrocento';
    font-style: normal;
    font-weight: 400;
    src: local('Quattrocento'), url(http://fonts.gstatic.com/s/quattrocento/v7/WZDISdyil4HsmirlOdBRFOgdm0LZdjqr5-oayXSOefg.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

html {
    font-family: Quattrocento;
    font-size: 12px;
    overflow-y: scroll;
}

body {
    background-color: rgb(12, 6, 31);
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0, rgba(0, 0, 0, 0.5) 100px, rgba(0, 0, 0, 0) 400px), url(tile.png);
    background-repeat: no-repeat, repeat;
    color: rgb(255, 255, 255);
    font-size: 1.5rem;
    line-height: 1.67;
    text-align: center;
    text-shadow:
         1px  1px 2px rgb(0, 0, 0),
        -1px -1px 2px rgb(0, 0, 0);
    padding-bottom: 80px;
}

h1 {
    font-size: 6rem;
    margin: 4rem auto auto auto;
    text-shadow:
         4px 1px 0 rgb(128, 128, 170);
}

#list {
    display: flex;
    flex-direction: column;
    margin: auto;
    max-width: 1600px;
}

#tag-header {
    max-width: 900px;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin: 1rem auto;
}

.jsOff #tag-header {
    display: none;
}

#tag-header > .tag-key {
    padding: 6px 8px;
    margin: 10px;
    font-size: 2rem;
    display: block;
    opacity: 0.5;
    font-family: inherit;
}

#tag-header > .tag-selected {
    opacity: 1.0;
}

.tag-watching, .tag-rewatch, .tag-on-hold, .tag-music, .tag-dropped,
.tag-hated, .tag-loved {
    pointer-events: all;
    border-radius: 4px;
    padding: 2px 3px;
    font-size: 1.5rem;
    display: inline-block;
}

.tag-watching:hover, .tag-rewatch:hover, .tag-on-hold:hover, .tag-music:hover, .tag-dropped:hover,
.tag-hated:hover, .tag-loved:hover {
    text-shadow:
         1px  1px 2px rgb(254, 246, 59),
        -1px -1px 2px rgb(254, 246, 59);
}

.tag-watching { background-color: rgb(28, 39, 143); }
.tag-rewatch  { background-color: rgb(144, 48, 20); }
.tag-on-hold  { background-color: rgb(104, 50, 20); }
.tag-music    { background-color: rgb(16, 95, 0); }
.tag-dropped  { background-color: rgb(155, 20, 20); }
.tag-hated    { background-color: rgb(116, 18, 146); }
.tag-loved    { background-color: rgb(71, 19, 169); }

.tag-watching:before { content: "WATCHING"; }
.tag-rewatch:before  { content: "REWATCH"; }
.tag-on-hold:before  { content: "ON-HOLD"; }
.tag-music:before    { content: "GET-MUSIC"; }
.tag-dropped:before  { content: "DROPPED"; }
.tag-hated:before    { content: "HUMMINGBIRD HATES"; }
.tag-loved:before    { content: "HUMMINGBIRD LOVES"; }

#search-box {
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    outline: none;
    color: rgb(255, 255, 255);
    width: 200px;
}

input[type=text]::-ms-clear {  display: none; width: 0; height: 0; }
input[type=text]::-ms-reveal {  display: none; width: 0; height: 0; }
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { display: none; }

#search-box:focus {
    opacity: 1.0;
}

.perspective-anchor {
    perspective: 1000px;
}

.perspective-anchor[class$='-selected'] {
    display: none;
}

.item-best {
    padding-top: 20px;
    padding-bottom: 20px;
    order: 0;
}

.item-main {
    padding-top: 8px;
    padding-bottom: 8px;
    height: 120px;
    order: 1;
}

.elem {
    height: 100%;
    position: relative;
    transition-duration: 0.3s;
    transition-timing-function: cubic-bezier(0.3, 0.7, 0, 2);
}

.perspective-anchor:hover > .elem {
    transform: translateZ(50px);
}

#sakamoto > .elem {
    transition-duration: 0.5s;
    transition-timing-function: ease-in-out;
}
#sakamoto:hover > .elem {
    transform: translateZ(100px) rotateX(-340deg);
}

.backdrop {
    width: 100%;
    display: block;
}

.item-best:hover .backdrop {
    filter: saturate(1.4) contrast(1.4);
    -webkit-filter: saturate(1.4) contrast(1.4); /* prefix */
}

.item-main .backdrop {
    object-fit: cover;
    height: 100%;
    filter: brightness(0.3) saturate(0.75);
    -webkit-filter: brightness(0.4) saturate(0.75); /* prefix */
    transition-duration: 0.1s;
    transition-timing-function: linear;
}

.item-main:hover .backdrop {
    border-radius: 7px;
    filter: brightness(0.55) saturate(1.4) contrast(1.4);
    -webkit-filter: brightness(0.55) saturate(1.4) contrast(1.4); /* prefix */
}

.data {
    align-items: center;
    bottom: 0;
    display: flex;
    position: absolute;
    width: 100%;
    pointer-events: none;
    overflow: hidden;
}

/* The font is a bit misaligned, so we correct this. */
.data > * {
    margin-bottom: -0.5rem;
}

/* However, we actually want this misalignment when there's a see-also, */
/* since it gives a little more breathing room at the bottom. */
.item-main .see-also + .data > .info,
.item-main .see-also + .data > .discussion {
    margin-bottom: 0px;
}

.item-best .data {
    height: 32%;
}

.item-main .data {
    height: 100%;
}

.rank, .unranked, .rank-todo {
    font-size: 4rem;
    font-weight: bold;
    flex-basis: 500px;
    flex-shrink: 5;
}

@media (max-width: 1024px) {
    .rank, .unranked, .rank-todo {
        display: none;
    }
}

.unranked:before {
    content: "· · ·";
}

.rank-todo:before {
    content: "· · ·";
}

.info {
    flex-basis: 600px;
    flex-shrink: 2;
}

.elem-title {
    font-size: 2rem;
    line-height: 1;
}

.elem-title-extra {
    font-size: 1.5rem;
    opacity: 0.85;
    white-space: nowrap;
}

.discussion {
    flex-basis: 500px;
    flex-shrink: 2;
    line-height: 1.25;
}

.short {
    font-size: 2rem;
}

.data a {
    pointer-events: all;
    text-decoration: none;
    color: rgb(240, 250, 255);
    border-radius: 3px;
    padding: 2px 6px;
    margin: -2px 0;
    transition-duration: 0.1s;
    background-color: rgba(76, 196, 255, 0.3);
    box-shadow: 0px 0px 2px rgb(19, 49, 63);
    white-space: nowrap;
}

.perspective-anchor:hover > .elem > .data a {
    border-radius: 4px;
    padding: 3px 8px;
    margin: -3px 0;
    background-color: rgba(76, 196, 255, 0.5);
}

.perspective-anchor > .elem > .data a:hover {
    border-radius: 5px;
    padding: 4px 10px;
    margin: -4px 0;
    background-color: rgba(76, 196, 255, 0.75);
}

.perspective-anchor > .elem > .data a:active {
    border-radius: 8px;
    padding: 8px 15px;
    margin: -8px 0;
    background-color: rgba(38, 98, 127, 0.75);
}

.see-also {
    white-space: nowrap;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    bottom: 0;
    font-size: 1.5rem;
    pointer-events: none;
    opacity: 0.85;
}

.see-also:before {
    content: "See also:";
    opacity: 0.85;
    backface-visibility: hidden;
}

.see-also a {
    text-decoration: none;
    pointer-events: all;
    color: rgb(255, 255, 255);
}