/*
    *hacker voice* i'm in

    Code written by mews, unless otherwise specified
*/
    
/* Header font */
@font-face {
    font-family: 'PlaywrightNO';
    src: url('../fonts/PlaywriteNO-Regular.woff2') format('woff2');
    src: url('../fonts/PlaywriteNO-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* Body fonts (static) */
@font-face {
    font-family: 'Nunito';
    src: url('../fonts/Nunito-Light.woff2') format('woff2');
    src: url('../fonts/Nunito-Light.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Nunito';
    src: url('../fonts/Nunito-LightItalic.woff2') format('woff2');
    src: url('../fonts/Nunito-LightItalic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'Nunito';
    src: url('../fonts/Nunito-Bold.woff2') format('woff2');
    src: url('../fonts/Nunito-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'Nunito';
    src: url('../fonts/Nunito-BoldItalic.woff2') format('woff2');
    src: url('../fonts/Nunito-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
}

body {
    background-color: #000;
    background-image: url("../images/darkness.jpg");
    background-attachment: fixed;
    font-family: 'Nunito', 'Trebuchet MS', sans-serif;
    font-size: 0.95rem;
    color: rgb(235, 232, 255);
}

.title-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 2rem 0 1.6rem;
}

.title-bar a {
    display: inline-block;
    position: relative;
}

.title-bar h1 {
    font-family: 'PlaywrightNO', 'Brush Script MT', 'Trebuchet MS', sans-serif;
    text-align: center;
    line-height: 2.6rem;
    color: rgb(119, 255, 236);
    text-shadow: 0px 0px 20px rgb(196, 255, 236);
    margin: 0 0 1.6rem;
    transition: all 0.2s ease-in-out;
}

.title-bar a:hover > h1 {
    color: #fffd74;
    text-shadow: 0px 0px 20px #fffea4;
    transition: all 0.2s ease-in-out;
}

.title-bar h2 {
    position: absolute;
    right: 0;
    bottom: 0;
    margin: 0;
    color: #fff;
    font-weight: normal;
    font-style: italic;
    font-size: 1.3rem;
}

h3 {
    font-size: 1.4rem;
    font-style: italic;
    line-height: 1.4rem;
    margin-bottom: 1.2rem;
    color: #fff;
}

h4 {
    font-size: 1.1rem;
    font-style: italic;
    line-height: 1.1rem;
    margin: 1.6rem 0 -.75rem;
    color: #fff;
}

h5 {
    font-size: 1.1rem;
    line-height: 1.1rem;
    margin: 1rem 0;
}

h3 + .subtitle {
    margin-top: -1rem;
}

a {
    text-decoration: none;
    color: rgb(119, 255, 236);
    transition: color 0.2s ease-in-out;
}

.cover-credit a {
    color: #DB3F9D;
}

a:hover {
    color: #fffd74;
    transition: color 0.2s ease-in-out;
}

blockquote {
    padding: .8rem 1.2rem;
    margin-left: 1.2rem;
    background-color: rgba(255, 255, 255, 0.15);
    border-left: 5px solid rgb(119, 255, 236);
    color: #fff;
    font-style: italic;
}

.mainframe {
    background-color: rgba(129, 118, 183, 0.8);
    max-width: 750px;
    margin: 0 auto 3.4rem;
    position: relative;
    padding: .4rem 1.5rem 1.5rem;
}

.sidebar {
    position: absolute;
    top: 0;
    width: 11.5rem;
    font-size: .85rem;
    line-height: 1rem;
}

.sidebar.bar-left {
    left: -11.5rem;
    text-align: right;
}

.sidebar.bar-right {
    right: -11.5rem;
    text-align: center;
}

.sidebar .box {
    background-color: rgba(87, 78, 138, 0.8);
    margin-bottom: 1.2rem;
    padding: .4rem 1rem;
}

.webring-scroll {
    text-align: center;
    max-height: 120px;
    /* overflow-y: scroll; */
    scrollbar-color: rgb(119, 255, 236) transparent;
    scrollbar-width: thin;
}

.footer {
    position: absolute;
    bottom: -2.1rem;
    left: 0;
    width: 100%;
}

.footer .footer-dates {
    color: #fff;
    float: left;
    margin: .1rem 0;
    font-size: .8rem;
    font-style: italic;
}

.footer #hitcount {
    float: right;
}

.feature {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.feature .feature-cover, .feature .feature-desc {
    flex: 1 0 47%;
}

.feature-cover img, .mini-cover {
    max-width: 100%;
    position: relative;
    z-index: 2;
}

.feature-desc > div {
    padding: .6rem 1.4rem;
    margin-bottom: .6rem;
}

.feature-desc > div:last-child {
    margin-bottom: .4rem;
}

.feature-desc > div p {
    margin: 0;
}

.feature-desc .frontpage {
    padding: .8rem 1.4rem 1.4rem;
    background-color: rgba(255, 255, 255, 0.2);
}

.frontpage a:hover {
    color: rgb(119, 255, 236);
}

.carousel-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin-top: -2px;
}

.playlist-row .carousel {
    display: inline-flex;
    height: 100%;
    transition: transform 0.2s ease-in-out;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.carousel > li {
    margin: 0 4px;
    flex: 0 0 24.05%;
}

.carousel > li:first-child {
    margin-left: 0;
}

.frontpage a, .carousel a {
    color: #fff;
}

.carousel a:hover {
    color: rgb(119, 255, 236);
}

.feature a > img, .carousel a > img {
    border: 2px solid transparent;
    transition: all 0.2s ease-in-out;
}

.feature:hover a:hover > img, .carousel a:hover > img {
    border: 2px solid rgb(119, 255, 236);
    transition: all 0.2s ease-in-out;
}

.carousel > li > a > p {
    font-size: 1rem;
    line-height: 1.1rem;
    font-weight: bold;
    margin: .1rem 0 .2rem;
}

.prev, .next {
    position: absolute;
    top: 70px;
    border: none;
    border-radius: 25px;
    padding: 0 10px 5px;
    font-size: 3rem;
    font-family: 'Nunito', 'Trebuchet MS', sans-serif;
    line-height: 2.2rem;
    color: rgb(77, 71, 109);
    background: rgba(255,255,255,0.85);
    box-shadow: 0 0 6px rgba(0,0,0,0.3);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    z-index: 9;
}

.prev:hover, .next:hover {
    color: #fff;
    background: rgb(93, 79, 164);
    transition: all 0.2s ease-in-out;
}

.prev {
    left: 8px;
    display: none;
}

.next {
    right: 8px;
}

.prev.show {
    display: block;
}

.next.hide {
    display: none;
}

#carousel-3 .next {
    display: none;
}

.mini-info {
    margin: -.1rem 0 .4rem;
    font-size: .85rem;
    line-height: .9rem;
}

.tag-list {
    margin-top: .3rem;
}

.tag-list ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.tag-list ul li, .songlist label {
    display: inline-block;
    font-size: .75rem;
    line-height: .9rem;
    padding: .2rem .4rem;
    margin-bottom: .15rem;
    background-color: #fff; /* fallback */
    box-shadow: -1px 1px 0px rgb(87, 80, 121);
    border-radius: 5px;
}

/* new! tag bounce */
.new span {
  display: inline-block;
  animation: bounce 0.6s infinite ease-in-out;
}
.new span:nth-child(1) {
  animation-delay: 0s;
}
.new span:nth-child(2) {
  animation-delay: 0.1s;
}
.new span:nth-child(3) {
  animation-delay: 0.2s;
}
.new span:nth-child(4) {
  animation-delay: 0.3s;
}

/* updated! tag bounce */
.updated span {
    display: inline-block;
    animation: bounce 0.6s infinite ease-in-out;
}
.updated span:nth-child(1) {
    animation-delay: 0s;
}
.updated span:nth-child(2) {
    animation-delay: 0.1s;
}
.updated span:nth-child(3) {
    animation-delay: 0.2s;
}
.updated span:nth-child(4) {
    animation-delay: 0.3s;
}
.updated span:nth-child(5) {
    animation-delay: 0.4s;
}
.updated span:nth-child(6) {
    animation-delay: 0.5s;
}
.updated span:nth-child(7) {
    animation-delay: 0.6s;
}
.updated span:nth-child(8) {
    animation-delay: 0.7s;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(1px);
  }
  50% {
    transform: translateY(-1px);
  }
}

/* Tag colours */
.tag-list ul .new, .tag-list ul .updated {
    background-color: #fffd74;
    color: #484800;
}

.tag-list ul .shipping {
    background-color: #fbcaf8;
    color: #8c5273;
}

.tag-list ul .character {
    background-color: #ffd887;
    color: #604b25;
}

.tag-list ul .theory {
    background-color: #86e1ff;
    color: #3f5379;
}

.tag-list ul .story {
    background-color: #9eeea0;
    color: #3c643d;
}

.tag-list ul .no-update {
    background-color: #cecece;
    color: #575757;
}

.genrefail {
    background-color: rgba(255, 216, 135, 0.7);
    color: #6a4e1a;
}

.vibecheck {
    background-color: rgba(134, 225, 255, 0.7);
    color: #3f5379;
}

.live-desc {
    background-color: rgba(255, 255, 255, 0.2);
}

.live-desc br {
    display: block;
    margin: .25rem;
}

.live-desc p > br {
    display: inline;
    margin: 0;
}

.cover-credit {
    background-color: rgba(251, 202, 248, 0.75);
    color: #8c5273;
}

.lyrics-content {
    display: none;
    background-color: rgba(255, 255, 255, 0.1);
    padding: .1rem 1.4rem;
    margin: .2rem 0 .6rem;
}

.lyrics-content blockquote.contrast-up {
    background-color: rgba(255, 255, 255, 0.55);
    border-left: 5px solid white;
    color: rgb(58, 75, 72);
}

.songlist input[type=checkbox] {
    position: absolute;
    opacity: 0;
}

.songlist label {
    background-color: rgb(143, 132, 198);
    padding: .15rem .4rem;
}

.songlist label:hover {
    cursor: pointer;
    color: rgb(119, 255, 236);
}

.songlist label:active {
    background-color: rgb(81, 73, 121);
    box-shadow: 1px -1px 0px rgb(56, 51, 85);
}

#item1:checked + .lyrics-content,
#item2:checked + .lyrics-content,
#item3:checked + .lyrics-content,
#item4:checked + .lyrics-content,
#item5:checked + .lyrics-content,
#item6:checked + .lyrics-content,
#item7:checked + .lyrics-content,
#item8:checked + .lyrics-content,
#item9:checked + .lyrics-content,
#item10:checked + .lyrics-content,
#item11:checked + .lyrics-content,
#item12:checked + .lyrics-content,
#item13:checked + .lyrics-content,
#item14:checked + .lyrics-content,
#item15:checked + .lyrics-content,
#item16:checked + .lyrics-content,
#item17:checked + .lyrics-content,
#item18:checked + .lyrics-content,
#item19:checked + .lyrics-content,
#item20:checked + .lyrics-content,
#item21:checked + .lyrics-content,
#item22:checked + .lyrics-content,
#item23:checked + .lyrics-content,
#item24:checked + .lyrics-content,
#item25:checked + .lyrics-content,
#item26:checked + .lyrics-content,
#item27:checked + .lyrics-content,
#item28:checked + .lyrics-content,
#item29:checked + .lyrics-content,
#item30:checked + .lyrics-content {
    display: block;
}

.iframe-container {
    display: flex;
    gap: 8px;
    margin-top: 1.8rem;
}

.iframe-container iframe {
    flex: 0 0 49.4%;
    height: 450px !important;
}

.tooltip {
    display: inline;
}

.wtc {
    color: #ff8c8c;
}

.soul {
    color: #a83232;
}

.kris {
    color: rgb(16, 108, 145);
}

.kero {
    color: #b1f5a3;
}