/*
Theme Name: akfgfragments
Theme URI: https://github.com/TimaGribanov/akfgfragments_theme
Author: Timofey Gribanov
Author URI: https://github.com/TimaGribanov
Description: A simple but effective WordPress theme for akfgfragments – international Asian Kung-Fu Generation fan project.
Text Domain: akfgfragments
Version: 0.2.15-beta
*/

/*************/
/* VARIABLES */
/*************/

:root {
    --bg-colour: #fff;
    --text-colour: #000;
    --header-colour: #000;
    --link-hover-colour: #000;
    --footer-bg-colour: #000;
    --footer-text-colour: #fff;
    --border-colour: #000;
    --btn-colour: #fff;
    --btn-hover-colour: #000;
    --btn-hover-text-colour: #fff;
}

/*********/
/* FONTS */
/*********/

@font-face {
    font-family: 'Lora Regular';
    src: url('assets/fonts/Lora/Lora-Regular.ttf');
    font-weight: 400;
}

@font-face {
    font-family: 'Lora Italic';
    src: url('assets/fonts/Lora/Lora-Italic.ttf');
    font-weight: 400;
}

@font-face {
    font-family: 'Lora Semi Bold';
    src: url('assets/fonts/Lora/Lora-SemiBold.ttf');
    font-weight: 600;
}

@font-face {
    font-family: 'Lora Semi Bold Italic';
    src: url('assets/fonts/Lora/Lora-SemiBoldItalic.ttf');
    font-weight: 600;
}

@font-face {
    font-family: 'Nunito Regular';
    src: url('assets/fonts/Nunito/Nunito-Regular.ttf');
    font-weight: 400;
}

@font-face {
    font-family: 'Nunito Italic';
    src: url('assets/fonts/Nunito/Nunito-Italic.ttf');
    font-weight: 400;
}

@font-face {
    font-family: 'Nunito Semi Bold';
    src: url('assets/fonts/Nunito/Nunito-SemiBold.ttf');
    font-weight: 600;
}

@font-face {
    font-family: 'Nunito Semi Bold Italic';
    src: url('assets/fonts/Nunito/Nunito-SemiBoldItalic.ttf');
    font-weight: 600;
}

@font-face {
    font-family: 'Shippori Mincho Regular';
    src: url('assets/fonts/Shippori_Mincho/ShipporiMincho-Regular.ttf');
    font-weight: 400;
}

@font-face {
    font-family: 'Shippori Mincho Bold';
    src: url('assets/fonts/Shippori_Mincho/ShipporiMincho-Bold.ttf');
    font-weight: 700;
}

@font-face {
    font-family: 'Zen Kaku Gothic New Regular';
    src: url('assets/fonts/Zen_Kaku_Gothic_New/ZenKakuGothicNew-Regular.ttf');
    font-weight: 400;
}

@font-face {
    font-family: 'Zen Kaku Gothic NewBold';
    src: url('assets/fonts/Zen_Kaku_Gothic_New/ZenKakuGothicNew-Bold.ttf');
    font-weight: 700;
}

:lang(ja-jp) {
    font-family: 'Shippori Mincho Regular', sans-serif;
}

/*****************/
/***** BASIC *****/
/*****************/

body {
    background: var(--bg-colour);
    text-align: left;
    margin: 0 auto;
    color: var(--text-colour);
    font-family: 'Lora Regular', sans-serif;
}

a {
    color: var(--text-colour);
}

a:hover,
a:active {
    color: var(--link-hover-colour);
}

blockquote {
    border-left: var(--header-colour) 3px solid;
    width: 70%;
    margin: 0 auto;
    padding: 5px;
    background-color: #e7e7e7;
}

blockquote p {
    font-family: 'Lora Italic', sans-serif;
}

blockquote cite {
    font-family: 'Lora Semi Bold', sans-serif;
    font-style: normal;
}

.nav-link {
    color: var(--text-colour);
    cursor: pointer;
}

.nav-link:hover,
.nav-link:active {
    color: var(--link-hover-colour);
}

h1 {
    font-size: 2rem;
}

h2 {
    font-size: 1.75rem;
}

h3 {
    font-size: 1.5rem;
}

h4 {
    font-size: 1.25rem;
}

h5 {
    font-size: 1rem;
}

h6 {
    font-size: 0.75rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--header-colour);
    font-family: 'Lora Semi Bold', sans-serif;
    font-weight: 600;
}

dl,
ol,
ul {
    margin-left: 2rem;
}

em,
i {
    font-family: 'Lora Regular', sans-serif;
}

strong {
    font-family: 'Lora Semi Bold', sans-serif;
}

.block-separator {
    width: 40%;
    color: var(--border-colour);
    margin: 0 auto;
    margin-top: 10px;
    margin-bottom: 10px;
}

.block-separator:last-of-type {
    display: none;
}

/******************/
/***** HEADER *****/
/******************/

#main-header {
    margin: 20px;
    border: 3px var(--border-colour) solid;
    background-color: var(--bg-colour);
    font-family: 'Nunito Regular';
}

#main-header li a {
    font-size: 14pt;
    font-variant-caps: all-small-caps;
    font-family: 'Nunito Semi Bold';
}

#main-header li a:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

.navbar-brand {
    font-size: 25pt;
    font-family: 'Nunito Semi Bold';
}

.navbar-brand img {
    width: 50px;
    height: 50px;
}

@media (min-width: 992px) {
    header .navbar {
        height: 100px;
    }
}

@media (max-width: 992px) {
    header .navbar-brand {
        position: relative;
        margin: 0 auto;
        font-size: 8vw;
    }
}

@media (max-width: 1120px) {
    header>.navbar>.main-wrapper>.header-lang-selector {
        display: none;
    }
}

@media (max-width: 420px) {
    header .navbar-brand img {
        display: none;
    }
}

#hamburgerMenu .header-lang-selector {
    width: fit-content;
    margin: 0 auto;
}

.btn-langs,
.btn-langs:hover {
    background-color: var(--bg-colour);
    border: 2px var(--border-colour) solid;
    border-radius: 0% !important;
}

.ham-bars {
    font-size: 8vw;
    color: var(--text-colour);
}

#hamburgerMenu {
    width: 100%;
}

#hamburgerMenu .navbar-nav {
    min-height: 100vh;
}

#hamburgerMenu .nav-item:hover {
    background-color: var(--block-border-colour);
}

#hamburgerMenu hr {
    width: 40%;
    margin: 0 auto;
}

#hamburgerMenu .ham-icon {
    font-size: 20pt;
    text-decoration: none;
}

/************************/
/***** MAIN CONTENT *****/
/************************/

@media (max-width: 991px) {
    #main {
        margin: 0;
    }

    .pagination .nav-links {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .pagination .page-numbers {
        display: inline-block;
        width: 40px;
        height: 40px;
        border: 1px solid;
        font-size: 1.5rem;
        text-decoration: none;
        text-align: center;
    }
}

.main-post a {
    text-decoration: none;
}

.main-post-right a:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

.main-post .wp-post-image {
    width: 300px;
}

.main-post .post-image>img {
    width: 100%;
}

.main-post a {
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

.main-post a:not(.main-post .main-post-taglist a):hover {
    background-color: var(--btn-hover-colour);
    color: var(--btn-hover-text-colour);
}

.main-post .main-post-taglist a {
    text-decoration: none;
}

.main-post .main-post-taglist a:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

.main-post-right {
    padding-bottom: 0;
}

.main-post-taglist {
    font-size: 0.8rem;
    margin-left: 0;
    padding-left: 0;
}

.main-post-taglist li {
    display: inline;
    margin-right: 5px;
}

.main-post-taglist li:hover {
    color: var(--bg-colour);
}

.main-post-right>p:last-of-type {
    display: none;
}

.main-post>div>p {
    text-indent: 15pt;
}

.no-indent {
    text-indent: 0 !important;
}

.no-bullets {
    list-style-type: none;
}

.more-link {
    padding-bottom: 0;
}

.main-post-mobile {
    width: 100%;
    margin: auto;
}

[class~='main-post-mobile']:last-of-type {
    border-bottom: none;
}

.main-title-mobile {
    text-decoration: none;
}

.main-title-mobile h1 {
    margin: 0;
}

.main-tag-mobile {
    background-color: var(--link-hover-colour);
    border-radius: 5px;
    padding: 5px;
    margin: 0 3px;
    line-height: 40px;
    text-decoration: none;
    color: var(--bg-colour);
}

.main-post-excerpt-mobile a {
    text-decoration: none;
}

.main-post-excerpt-mobile a:hover {
    color: var(--text-colour);
}

.wp-block-image img {
    width: 100%;
    height: auto;
}

.wp-block-image .aligncenter {
    text-align: center;
}

.wp-block-image figcaption {
    text-align: center;
    font-style: italic;
    font-size: smaller;
}

.wp-block-video video {
    width: 100%;
    height: auto;
}

.wp-block-embed-youtube iframe {
    width: 100%;
    height: calc(942px * 9 / 16);
}

@media (max-width: 991px) {
    .wp-block-embed-youtube iframe {
        width: 100%;
        height: revert-layer;
    }
}

.wp-block-columns {
    display: flex;
    width: 100%;
}

.wp-block-column {
    word-wrap: anywhere;
    padding-right: 10px;
}

.wp-block-column:last-of-type {
    padding-right: 0;
}

.pagination div {
    margin: 0 auto;
}

.pagination .screen-reader-text {
    display: none;
}

.pagination .nav-links {
    display: block ruby;
}

.pagination .nav-links .page-numbers {
    display: inline-block;
    width: 35px;
    border: 2px solid black;
    font-size: 1.3rem;
    text-align: center;
    height: auto;
}

.pagination .nav-links a:hover {
    background-color: #e7e7e7;
}

.pagination .nav-links a {
    text-decoration: none;
}

/*******************/
/***** SIDEBAR *****/
/*******************/

.main-side-block {
    width: 300px;
    margin-top: 15px;
    margin-bottom: 15px;
}

.main-side-block:last-of-type {
    margin-bottom: 0;
}

.main-btn-text {
    margin-left: 5px;
    color: #fff;
}

.main-latest-release-link {
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

.main-latest-release-link:hover {
    background-color: var(--btn-hover-colour);
    color: var(--btn-hover-text-colour);
}

.btn-discord,
.btn-discord:hover {
    background-color: #5865f2;
}

.btn-discord>a,
.btn-discord>i,
.btn-twitter>a,
.btn-instagram>a,
.btn-instagram>i,
.btn-twitter>i {
    color: #fff;
    text-decoration: none;
}

.btn-discord>a,
.btn-twitter>a,
.btn-instagram>a {
    margin-left: 10px;
}

.btn-twitter,
.btn-twitter:hover {
    background-color: #00acee;
}

.btn-instagram,
.btn-instagram:hover {
    background-color: #C13584;
}

#main-ajikan-project img:hover {
    opacity: 0.7;
}

/*****************/
/***** DISCO *****/
/*****************/

.disco-list .disco-release img {
    width: 60px;
}

.disco-release-title {
    text-decoration: none;
}

.disco-release-title:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

.disco-release-title>span {
    font-family: 'Lora Semi Bold', sans-serif;
}

@media (max-width: 991px) {
    .disco-list .disco-release img {
        width: 100px;
    }

    .disco-release>div {
        width: auto;
    }
}

#top-btn {
    font-size: 30pt;
    z-index: 1;
    position: fixed;
    bottom: 10%;
    left: 35px;
}

/******************/
/***** LYRICS *****/
/******************/

.lyrics-link {
    text-decoration: none;
}

.lyrics-link:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

/****************/
/***** SONG *****/
/****************/

#open-hidden {
    cursor: pointer;
    color: var(--link-hover-colour);
}

.song-releases>a {
    text-decoration: none;
}

.song-releases>a:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

.song-text-btn,
.song-text-btn:active,
.song-text-btn:focus {
    background-color: var(--btn-colour);
    color: var(--text-colour);
    padding: 5px 10px;
    border: 3px var(--border-colour) solid;
    border-radius: 5px;
}

.song-text-btn:hover {
    background-color: var(--btn-hover-colour);
    color: var(--btn-hover-text-colour);
    border: 3px var(--border-colour) solid;
}

/*******************/
/***** RELEASE *****/
/*******************/

.main-tracklist {
    margin-left: 30px;
}

.main-tracklist-link {
    text-decoration: none;
}

.main-tracklist-link:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

.main-image-container {
    position: relative;
    text-align: center;
    color: gray;
    font-size: 30pt;
    margin-bottom: 30px;
}

.main-double-image-arrows {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.main-double-image-arrow {
    cursor: pointer;
}

.main-double-image-arrow:hover {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff;
}

.main-double-image-arrow-left {
    position: absolute;
    left: 5%;
    display: none;
}

.main-double-image-arrow-right {
    position: absolute;
    right: 5%;
}

.main-double-image {
    display: none;
}

.main-double-image:first-of-type {
    display: block;
}

.rel-ver-btn,
.rel-ver-btn:active,
.rel-ver-btn:focus {
    background-color: var(--btn-colour);
    color: var(--text-colour);
    padding: 5px 10px;
    border: 3px var(--border-colour) solid;
    border-radius: 5px;
    width: 25%;
    margin-left: 5%;
}

.rel-ver-btn:hover {
    background-color: var(--btn-hover-colour);
    color: var(--btn-hover-text-colour);
    border: 3px var(--border-colour) solid;
}

#content-mobile .rel-ver-btn {
    width: auto;
}

/******************/
/******* MV *******/
/******************/

.mv-page-local {
    width: 100%;
    height: auto;
}

.mv-link {
    text-decoration: none;
}

.mv-link:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

/**********************/
/***** INTERVIEWS *****/
/**********************/

.interview-post .wp-post-image {
    width: 300px;
}

.post-image>img {
    width: 100%;
}

/****************/
/***** TABS *****/
/****************/

.tabs-btn,
.tabs-btn:active,
.tabs-btn:focus,
.tabs-pdf-btn,
.tabs-pdf-btn:active,
.tabs-pdf-btn:focus,
#tabs-pdf-pages button,
#tabs-pdf-pages button:active,
#tabs-pdf-pages button:focus {
    background-color: var(--btn-colour);
    color: var(--text-colour);
    padding: 5px 10px;
    border: 3px var(--border-colour) solid;
    border-radius: 5px;
}

.tabs-btn:hover,
.tabs-pdf-btn:hover,
#tabs-pdf-pages button:hover {
    background-color: var(--btn-hover-colour);
    color: var(--btn-hover-text-colour);
    border: 3px var(--border-colour) solid;
}

.tabs-btn:hover a {
    color: var(--btn-hover-text-colour);
}

.tabs-btn a {
    text-decoration: none;
}

/******************/
/***** AUTHOR *****/
/******************/

.author-photo img {
    border-radius: 50%;
}

.author-links a {
    text-decoration-thickness: 2px;
}

.author-links a:hover {
    background-color: var(--btn-hover-colour);
    color: var(--btn-hover-text-colour);
}

/******************/
/***** FOOTER *****/
/******************/

@media (max-width: 991px) {
    #ftr-right-block {
        display: none;
    }
}

#main-footer {
    width: 100%;
    text-align: center;
    margin-top: 20px;
    padding: 20px;
    background-color: var(--footer-bg-colour);
    color: var(--footer-text-colour);
    z-index: 2;
}

#main-footer .nav-link {
    color: var(--footer-text-colour);
    cursor: pointer;
}

#main-footer .nav-link:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

#main-footer .nav-link:hover,
#main-footer .nav-link:active {
    color: var(--footer-text-colour);
}

#main-footer h1,
#main-footer h2,
#main-footer h3,
#main-footer h4,
#main-footer h5,
#main-footer h6 {
    color: var(--footer-text-colour);
}

#main-footer.main-wrapper {
    padding-left: 20px;
}

.ftr-crossed {
    text-decoration-line: line-through;
}

#ftr-left-block {
    text-align: left;
}

#ftr-socials i {
    font-size: 20px;
}