MediaWiki:Common.css: Difference between revisions

From Blank Chronicle
No edit summary
No edit summary
Line 241: Line 241:
{
{
     text-decoration: none;
     text-decoration: none;
     background-color: #447ff5;
     opacity: 80%;
    border-color: #447ff5;
}
}


Line 261: Line 260:
{
{
     text-decoration: none;
     text-decoration: none;
     background-color: #447ff5;
     opacity: 80%;
    border-color: #447ff5;
}
}


Line 281: Line 279:
{
{
     text-decoration: none;
     text-decoration: none;
     background-color: #447ff5;
     opacity: 80%;
    border-color: #447ff5;
}
}


Line 301: Line 298:
{
{
     text-decoration: none;
     text-decoration: none;
     background-color: #447ff5;
     opacity: 80%;
    border-color: #447ff5;
}
}


Line 321: Line 317:
{
{
     text-decoration: none;
     text-decoration: none;
     background-color: #447ff5;
     opacity: 80%;
    border-color: #447ff5;
}
}


Line 341: Line 336:
{
{
     text-decoration: none;
     text-decoration: none;
     background-color: #447ff5;
     opacity: 80%;
    border-color: #447ff5;
}
}



Revision as of 15:29, 7 July 2020

/* CSS placed here will be applied to all skins */

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i&display=swap&subset=latin-ext');

html, body
{
    font-family: 'Open Sans', sans-serif;
}

.mw-wiki-logo
{
    background-size: contain;
}

.mw-parser-output .external {
    background-position: center right 12px;
}

div#mw-head-base.noprint
{
    margin-left: 0;
}

div#mw-panel
{
    display: none;
}

div#content.mw-body
{
    border: 1px solid #a2a9b1;
    margin-left: auto;
    margin-right: auto;
    max-width: 1000px;
}

div#footer
{
    margin-left: auto;
    margin-right: auto;
    max-width: 1000px;
}

@media screen and (min-width: 10px)
.mw-body, #mw-head-base, #left-navigation, #mw-data-after-content, #footer
{
    margin-left: 0;
}

.mw-body-content
{
    font-size: unset;
}


h1, h2, h3, h4, h5, h6
{
    border-bottom: 1px solid #d5d5d5;
    font-weight: bold;
}

.mw-body h1, .mw-body-content h1
{
    font-size: 2em;
}

.mw-body h1, .mw-body-content h1, .mw-body-content h2
{
    font-weight: bold;
    margin-bottom: 0.3em;
}

.spaced-header-container
{
    display: flex;
    justify-content: center;
    align-items: center;
}

.spaced-header-container h2
{
    text-align: center;
    padding-top: 2em;
    padding-bottom: 2em;
    margin-top: .2em;
    margin-bottom: .2em;
    border-bottom: none;
}

.tight-header-container
{
    display: flex;
    justify-content: center;
    align-items: center;
}

.tight-header-container h2
{
    padding-top: .5em;
    padding-bottom: .5em;
    margin-top: .2em;
    margin-bottom: .2em;
    border-bottom: none;
}

img
{
    max-width: 100%;
    height: auto;
}

.img-cover p
{
    text-align: center;
}

.img-cover img
{
    border-radius: 5px;
    width: 250px;
    max-width: 100%;
}

.social-icons a.external
{
    background: unset;
    font-size: 30px;
    text-align: center;
}

.diff-addedline
{
    border-color: #a3d3ff;
}

.diff-addedline, .diff-deletedline, .diff-context
{
    font-size: 88%;
    line-height: 1.6;
    vertical-align: top;
    white-space: -moz-pre-wrap;
    white-space: pre-wrap;
    border-style: solid;
    border-width: 1px 1px 1px 4px;
    border-radius: 0.33em;
}

.highlight
{
    background: #ff0;
    font-weight: unset;
}

.highlight-warning
{
    background: #fa0;
    font-weight: unset;
}

.highlight-bad,
.highlight-danger,
.highlight-todo
{
    background: #f00;
    font-weight: unset;
}

.highlight-good,
.highlight-done
{
    background: #0f0;
    font-weight: unset;
}



.intro-container
{

}

.mp-banner
{

}

.intro-text
{
    text-align: center;
}

.mp-container {
    display: grid;
    grid-template-columns: auto auto;
    gap: 1em 1em;
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    max-width: 1000px;
    margin-bottom: 1em;
}

.generic-container
{
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    max-width: 1000px;
}

.grid-item
{
    margin: .5em;
}

.sh-container
{
    text-align: center;
    display: grid;
    grid-template-columns: auto auto;
    gap: 1em;
    margin-bottom: .7em;
}

.button-sh a
{
    color: #fff !important;
    background-color: #510d15;
    border-color: #510d15;
    padding: 0.5em 1em 0.5em 1em !important;
    display: inline-block;
    width: 14em;
    font-weight: bold;
    border-radius: 2px;
    margin-bottom: 4px;
}

.button-sh a:hover
{
    text-decoration: none;
    opacity: 80%;
}

.disc-sh a
{
    color: #fff !important;
    background-color: #510d15;
    border-color: #510d15;
    padding: 0.5em 1em 0.5em 1em !important;
    display: inline-block;
    width: 14em;
    font-weight: bold;
    border-radius: 2px;
    margin-bottom: 4px;
}

.disc-sh a:hover
{
    text-decoration: none;
    opacity: 80%;
}

.live-sh a
{
    color: #fff !important;
    background-color: #510d15;
    border-color: #510d15;
    padding: 0.5em 1em 0.5em 1em !important;
    display: inline-block;
    width: 14em;
    font-weight: bold;
    border-radius: 2px;
    margin-bottom: 4px;
}

.live-sh a:hover
{
    text-decoration: none;
    opacity: 80%;
}

.button-sh-15site a
{
    color: #fff !important;
    background-color: #510d15;
    border-color: #510d15;
    padding: 0.5em 1em 0.5em 1em !important;
    display: inline-block;
    width: 14em;
    font-weight: bold;
    border-radius: 2px;
    margin-bottom: 4px;
}

.button-sh-15site a:hover
{
    text-decoration: none;
    opacity: 80%;
}

.button-sh-web a
{
    color: #fff !important;
    background-color: #510d15;
    border-color: #510d15;
    padding: 0.5em 1em 0.5em 1em !important;
    display: inline-block;
    width: 14em;
    font-weight: bold;
    border-radius: 2px;
    margin-bottom: 4px;
}

.button-sh-web a:hover
{
    text-decoration: none;
    opacity: 80%;
}

.button-sh-shop a
{
    color: #fff !important;
    background-color: #510d15;
    border-color: #510d15;
    padding: 0.5em 1em 0.5em 1em !important;
    display: inline-block;
    width: 14em;
    font-weight: bold;
    border-radius: 2px;
    margin-bottom: 4px;
}

.button-sh-shop a:hover
{
    text-decoration: none;
    opacity: 80%;
}

.lh-container
{
    text-align: center;
    display: grid;
    grid-template-columns: auto auto;
    gap: .5em;
    margin-bottom: .7em;
}

.button-lh a
{
    color: #fff !important;
    background-color: #36c;
    border-color: #36c;
    padding: 0.5em 1em 0.5em 1em !important;
    display: inline-block;
    width: 14em;
    font-weight: bold;
    border-radius: 2px;
    margin-bottom: 4px;
}

.button-lh a:hover
{
    text-decoration: none;
    background-color: #447ff5;
    border-color: #447ff5;
}

.disc-lh a
{
    color: #fff !important;
    background-color: #36c;
    border-color: #36c;
    padding: 0.5em 1em 0.5em 1em !important;
    display: inline-block;
    width: 14em;
    font-weight: bold;
    border-radius: 2px;
    margin-bottom: 4px;
}

.disc-lh a:hover
{
    text-decoration: none;
    background-color: #447ff5;
    border-color: #447ff5;
}

.live-lh a
{
    color: #fff !important;
    background-color: #36c;
    border-color: #36c;
    padding: 0.5em 1em 0.5em 1em !important;
    display: inline-block;
    width: 14em;
    font-weight: bold;
    border-radius: 2px;
    margin-bottom: 4px;
}

.live-lh a:hover
{
    text-decoration: none;
    background-color: #447ff5;
    border-color: #447ff5;
}

.button-lh-web a
{
    color: #fff !important;
    background-color: #36c;
    border-color: #36c;
    padding: 0.5em 1em 0.5em 1em !important;
    display: inline-block;
    width: 14em;
    font-weight: bold;
    border-radius: 2px;
    margin-bottom: 4px;
}

.button-lh-web a:hover
{
    text-decoration: none;
    background-color: #447ff5;
    border-color: #447ff5;
}


.revo-container
{
    text-align: center;
    display: grid;
    grid-template-columns: auto auto;
    gap: .5em;
    margin-bottom: .7em;
}

.button-revo a
{
    color: #fff !important;
    background-color: #36c;
    border-color: #36c;
    padding: 0.5em 1em 0.5em 1em !important;
    display: inline-block;
    width: 14em;
    font-weight: bold;
    border-radius: 2px;
    margin-bottom: 4px;
}

.button-revo a:hover
{
    text-decoration: none;
    background-color: #447ff5;
    border-color: #447ff5;
}

.disc-revo a
{
    color: #fff !important;
    background-color: #36c;
    border-color: #36c;
    padding: 0.5em 1em 0.5em 1em !important;
    display: inline-block;
    width: 14em;
    font-weight: bold;
    border-radius: 2px;
    margin-bottom: 4px;
}

.disc-revo a:hover
{
    text-decoration: none;
    background-color: #447ff5;
    border-color: #447ff5;
}


.disc-sh-album-container
{
    display: grid;
    justify-content: center;
    grid-template-columns: auto auto auto;
    gap: 1em 1em;
}

.disc-chronicle
{
    height: 300px;
    width: 300px;
    border-radius: 8px;
    background-image: url('https://blankchronicle.com/images/9/97/ChronicleCover.jpg');
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
}

.disc-chronicle:hover
{
    opacity: 80%;
}

.disc-chronicle a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
    text-align: center;
}

.disc-chronicle a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
}


.disc-thanatos
{
    height: 300px;
    width: 300px;
    border-radius: 8px;
    background-image: url('https://blankchronicle.com/images/c/c2/ThanatosCover.jpg');
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
}

.disc-thanatos:hover
{
    opacity: 80%;
}

.disc-thanatos a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
    text-align: center;
}

.disc-thanatos a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
}

.disc-lost
{
    height: 300px;
    width: 300px;
    border-radius: 8px;
    background-image: url('https://blankchronicle.com/images/6/6c/LostCover.jpg');
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
}

.disc-lost:hover
{
    opacity: 80%;
}

.disc-lost a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
    text-align: center;
}

.disc-lost a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
}

.disc-pico
{
    height: 300px;
    width: 300px;
    border-radius: 8px;
    background-image: url('https://blankchronicle.com/images/9/98/PicoMagicCover.jpg');
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
}

.disc-pico:hover
{
    opacity: 80%;
}

.disc-pico a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
    text-align: center;
}

.disc-pico a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
}

.disc-reloaded
{
    height: 300px;
    width: 300px;
    border-radius: 8px;
    background-image: url('https://blankchronicle.com/images/3/37/ReloadedCover.JPG');
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
}

.disc-reloaded:hover
{
    opacity: 80%;
}

.disc-reloaded a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
    text-align: center;
}

.disc-reloaded a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
}

.disc-chrsecond
{
    height: 300px;
    width: 300px;
    border-radius: 8px;
    background-image: url('https://blankchronicle.com/images/0/05/Chronicle2ndCover.jpg');
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
}

.disc-chrsecond:hover
{
    opacity: 80%;
}

.disc-chrsecond a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
    text-align: center;
}

.disc-chrsecond a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
}

.disc-prelude
{
    height: 300px;
    width: 300px;
    border-radius: 8px;
    background-image: url('https://blankchronicle.com/images/8/8b/PreludetoElysionCover.jpg');
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
}

.disc-prelude:hover
{
    opacity: 80%;
}

.disc-prelude a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
    text-align: center;
}

.disc-prelude a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
}

.disc-elysion
{
    height: 300px;
    width: 300px;
    border-radius: 8px;
    background-image: url('https://blankchronicle.com/images/8/8a/ElysionCover.png');
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
}

.disc-elysion:hover
{
    opacity: 80%;
}

.disc-elysion a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
    text-align: center;
}

.disc-elysion a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
}

.disc-roman
{
    height: 300px;
    width: 300px;
    border-radius: 8px;
    background-image: url('https://blankchronicle.com/images/8/8e/RomanCover.jpg');
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
}

.disc-roman:hover
{
    opacity: 80%;
}

.disc-roman a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
    text-align: center;
}

.disc-roman a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
}

.disc-moira
{
    height: 300px;
    width: 300px;
    border-radius: 8px;
    background-image: url('https://blankchronicle.com/images/2/29/MoiraCover.jpg');
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
}

.disc-moira:hover
{
    opacity: 80%;
}

.disc-moira a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
    text-align: center;
}

.disc-moira a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
}

.disc-marchen
{
    height: 300px;
    width: 300px;
    border-radius: 8px;
    background-image: url('https://blankchronicle.com/images/4/4f/MarchenCover2.jpg');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.disc-marchen:hover
{
    opacity: 80%;
}

.disc-marchen a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
    text-align: center;
}

.disc-marchen a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
}

.disc-rinne
{
    height: 300px;
    width: 300px;
    border-radius: 8px;
    background-image: url('https://blankchronicle.com/images/c/c2/ThanatosCover.jpg');
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
}

.disc-rinne:hover
{
    opacity: 80%;
}

.disc-rinne a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
    text-align: center;
}

.disc-rinne a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
}

.disc-nein
{
    height: 300px;
    width: 300px;
    border-radius: 8px;
    background-image: url('https://blankchronicle.com/images/c/c2/ThanatosCover.jpg');
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
}

.disc-nein:hover
{
    opacity: 80%;
}

.disc-nein a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
    text-align: center;
}

.disc-nein a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
}


.disc-sh-single-container
{
    display: grid;
    justify-content: center;
    grid-template-columns: auto auto auto;
    gap: 1em 1em;
}

.disc-swordboy
{
    height: 300px;
    width: 300px;
    border-radius: 8px;
    background-image: url('https://blankchronicle.com/images/6/68/SwordboyCover.jpg');
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
}

.disc-swordboy:hover
{
    opacity: 80%;
}

.disc-swordboy a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
    text-align: center;
}

.disc-swordboy a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
}

.disc-iberia
{
    height: 300px;
    width: 300px;
    border-radius: 8px;
    background-image: url('https://blankchronicle.com/images/2/2f/IberiaCover.jpg');
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
}

.disc-iberia:hover
{
    opacity: 80%;
}

.disc-iberia a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
    text-align: center;
}

.disc-iberia a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
}

.disc-ido
{
    height: 300px;
    width: 300px;
    border-radius: 8px;
    background-image: url('https://blankchronicle.com/images/2/26/IdoIdoCover.jpg');
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
}

.disc-ido:hover
{
    opacity: 80%;
}

.disc-ido a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
    text-align: center;
}

.disc-ido a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
}

.disc-halloween
{
    height: 300px;
    width: 300px;
    border-radius: 8px;
    background-image: url('https://blankchronicle.com/images/d/d1/HalloYoruCover.jpg');
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
}

.disc-halloween:hover
{
    opacity: 80%;
}

.disc-halloween a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
    text-align: center;
}

.disc-halloween a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
}

.disc-vanisuta
{
    height: 300px;
    width: 300px;
    border-radius: 8px;
    background-image: url('https://blankchronicle.com/images/9/95/VaniSutaCover.jpg');
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
}

.disc-vanisuta:hover
{
    opacity: 80%;
}

.disc-vanisuta a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
    text-align: center;
}

.disc-vanisuta a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
}

.disc-marvelous
{
    height: 300px;
    width: 300px;
    border-radius: 8px;
    background-image: url('https://blankchronicle.com/images/a/a1/MarvelousShouchuuCover.jpg');
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
}

.disc-marvelous:hover
{
    opacity: 80%;
}

.disc-marvelous a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
    text-align: center;
}

.disc-marvelous a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
}

.disc-nearest
{
    height: 300px;
    width: 300px;
    border-radius: 8px;
    background-image: url('https://blankchronicle.com/images/c/c2/ThanatosCover.jpg');
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
}

.disc-nearest:hover
{
    opacity: 80%;
}

.disc-nearest a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
    text-align: center;
}

.disc-nearest a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
}



.disc-sh-other-container
{
    display: grid;
    justify-content: center;
    grid-template-columns: auto auto auto;
    gap: 1em 1em;
}

.disc-riddle
{
    height: 300px;
    width: 300px;
    border-radius: 8px;
    background-image: url('https://blankchronicle.com/images/4/4a/TempRiddleCover.jpg');
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
}

.disc-riddle:hover
{
    opacity: 80%;
}

.disc-riddle a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
    text-align: center;
}

.disc-riddle a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
}

.disc-genome
{
    height: 300px;
    width: 300px;
    border-radius: 8px;
    background-image: url('https://blankchronicle.com/images/0/0d/TempGeNOMECover.jpg');
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
}

.disc-genome:hover
{
    opacity: 80%;
}

.disc-genome a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
    text-align: center;
}

.disc-genome a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
}

.disc-sister
{
    height: 300px;
    width: 300px;
    border-radius: 8px;
    background-image: url('https://blankchronicle.com/images/0/0f/TempSisterMermaidCover.jpg');
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
}

.disc-sister:hover
{
    opacity: 80%;
}

.disc-sister a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
    text-align: center;
}

.disc-sister a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
}

.disc-link
{
    height: 300px;
    width: 300px;
    border-radius: 8px;
    background-image: url('https://blankchronicle.com/images/c/c4/TempLiNKCover.jpg');
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
}

.disc-link:hover
{
    opacity: 80%;
}

.disc-link a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
    text-align: center;
}

.disc-link a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
}

.disc-pastel
{
    height: 300px;
    width: 300px;
    border-radius: 8px;
    background-image: url('https://blankchronicle.com/images/c/c4/TempPastelCover.jpg');
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
}

.disc-pastel:hover
{
    opacity: 80%;
}

.disc-pastel a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
    text-align: center;
}

.disc-pastel a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
}

.disc-rasp
{
    height: 300px;
    width: 300px;
    border-radius: 8px;
    background-image: url('https://blankchronicle.com/images/3/36/TempRaspberryCover.jpg');
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
}

.disc-rasp:hover
{
    opacity: 80%;
}

.disc-rasp a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
    text-align: center;
}

.disc-rasp a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
}

.disc-leviathan
{
    height: 300px;
    width: 300px;
    border-radius: 8px;
    background-image: url('https://blankchronicle.com/images/1/18/LeviathanCover.jpg');
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
}

.disc-leviathan:hover
{
    opacity: 80%;
}

.disc-leviathan a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
    text-align: center;
}

.disc-leviathan a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
}

.disc-poca
{
    height: 300px;
    width: 300px;
    border-radius: 8px;
    background-image: url('https://blankchronicle.com/images/a/ab/PocafelicitaCover.jpg');
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
}

.disc-poca:hover
{
    opacity: 80%;
}

.disc-poca a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
    text-align: center;
}

.disc-poca a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
}

.disc-rest
{
    height: 300px;
    width: 300px;
    border-radius: 8px;
    background-image: url('https://blankchronicle.com/images/1/19/RestCover.jpg');
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
}

.disc-rest:hover
{
    opacity: 80%;
}

.disc-rest a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
    text-align: center;
}

.disc-rest a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
}

.disc-schwarz
{
    height: 300px;
    width: 300px;
    border-radius: 8px;
    background-image: url('https://blankchronicle.com/images/6/60/SchwarzweissCover.jpg');
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
}

.disc-schwarz:hover
{
    opacity: 80%;
}

.disc-schwarz a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
    text-align: center;
}

.disc-schwarz a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
}

.disc-dream
{
    height: 300px;
    width: 300px;
    border-radius: 8px;
    background-image: url('https://blankchronicle.com/images/f/ff/DreamPortCover.jpg');
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
}

.disc-dream:hover
{
    opacity: 80%;
}

.disc-dream a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
    text-align: center;
}

.disc-dream a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
}

.disc-chronology
{
    height: 300px;
    width: 300px;
    border-radius: 8px;
    background-image: url('https://blankchronicle.com/images/9/9c/ChronologyCover.jpg');
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
}

.disc-chronology:hover
{
    opacity: 80%;
}

.disc-chronology a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
    text-align: center;
}

.disc-chronology a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
}

.disc-yodaka
{
    height: 300px;
    width: 300px;
    border-radius: 8px;
    background-image: url('https://blankchronicle.com/images/9/9f/YodakaCover.jpeg');
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
}

.disc-yodaka:hover
{
    opacity: 80%;
}

.disc-yodaka a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
    text-align: center;
}

.disc-yodaka a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
}

.disc-lh-album-container
{
    display: grid;
    justify-content: center;
    grid-template-columns: auto auto auto;
    gap: .5em .5em;
    margin-bottom: 1em;
}

.disc-daikikou
{
    height: 300px;
    width: 300px;
    border-radius: 8px;
    background-image: url('https://blankchronicle.com/images/9/93/LuxendarcDaikikouCover.jpg');
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
}

.disc-daikikou:hover
{
    opacity: 80%;
}

.disc-daikikou a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
    text-align: center;
}

.disc-daikikou a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
}

.disc-bravely1
{
    height: 300px;
    width: 300px;
    border-radius: 8px;
    background-image: url('https://blankchronicle.com/images/a/a5/Bravely1Cover.jpg');
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
}

.disc-bravely1:hover
{
    opacity: 80%;
}

.disc-bravely1 a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
    text-align: center;
}

.disc-bravely1 a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
}

.disc-kiseki
{
    height: 300px;
    width: 300px;
    border-radius: 8px;
    background-image: url('https://blankchronicle.com/images/0/04/ShingekinoKisekiCover.jpg');
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
}

.disc-kiseki:hover
{
    opacity: 80%;
}

.disc-kiseki a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
    text-align: center;
}

.disc-kiseki a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
}



.disc-lh-single-container
{
    display: grid;
    justify-content: center;
    grid-template-columns: auto auto auto;
    gap: .5em .5em;
    margin-bottom: 1em;
}

.disc-kokikou
{
    height: 300px;
    width: 300px;
    border-radius: 8px;
    background-image: url('https://blankchronicle.com/images/b/bd/LuxendarcKokikouCover.jpg');
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
}

.disc-kokikou:hover
{
    opacity: 80%;
}

.disc-kokikou a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
    text-align: center;
}

.disc-kokikou a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
}

.disc-jiyuu
{
    height: 300px;
    width: 300px;
    border-radius: 8px;
    background-image: url('https://blankchronicle.com/images/6/6a/JiyuuhenoShingekiCover2.jpg');
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
}

.disc-jiyuu:hover
{
    opacity: 80%;
}

.disc-jiyuu a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
    text-align: center;
}

.disc-jiyuu a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
}

.disc-rakuen
{
    height: 300px;
    width: 300px;
    border-radius: 8px;
    background-image: url('https://blankchronicle.com/images/9/9c/RakuenCover.jpg');
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
}

.disc-rakuen:hover
{
    opacity: 80%;
}

.disc-rakuen a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
    text-align: center;
}

.disc-rakuen a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
}

.disc-shinjitsu
{
    height: 300px;
    width: 300px;
    border-radius: 8px;
    background-image: url('https://blankchronicle.com/images/4/4c/ShinjitsuCover.jpg');
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
}

.disc-shinjitsu:hover
{
    opacity: 80%;
}

.disc-shinjitsu a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
    text-align: center;
}

.disc-shinjitsu a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
}


.disc-lh-other-container
{
    display: grid;
    justify-content: center;
    grid-template-columns: auto auto auto;
    gap: .5em .5em;
    margin-bottom: 1em;
}

.disc-gny
{
    height: 300px;
    width: 300px;
    border-radius: 8px;
    background-image: url('https://blankchronicle.com/images/e/ed/GnYCover.jpg');
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
}

.disc-gny:hover
{
    opacity: 80%;
}

.disc-gny a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
    text-align: center;
}

.disc-gny a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
}

.disc-seishun
{
    height: 300px;
    width: 300px;
    border-radius: 8px;
    background-image: url('https://blankchronicle.com/images/e/e0/SeishunCover.jpg');
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
}

.disc-seishun:hover
{
    opacity: 80%;
}

.disc-seishun a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
    text-align: center;
}

.disc-seishun a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
}

.disc-zahyou
{
    height: 300px;
    width: 300px;
    border-radius: 8px;
    background-image: url('https://blankchronicle.com/images/1/1e/ZahyouCover.jpg');
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
}

.disc-zahyou:hover
{
    opacity: 80%;
}

.disc-zahyou a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
    text-align: center;
}

.disc-zahyou a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
}

.disc-daishou
{
    height: 300px;
    width: 300px;
    border-radius: 8px;
    background-image: url('https://blankchronicle.com/images/d/d2/DaishouCover.jpg');
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
}

.disc-daishou:hover
{
    opacity: 80%;
}

.disc-daishou a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
    text-align: center;
}

.disc-daishou a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
}

.disc-sasageyo
{
    height: 300px;
    width: 300px;
    border-radius: 8px;
    background-image: url('https://blankchronicle.com/images/a/a4/SasageyoCover.jpg');
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
}

.disc-sasageyo:hover
{
    opacity: 80%;
}

.disc-sasageyo a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
    text-align: center;
}

.disc-sasageyo a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
}

.disc-requiem
{
    height: 300px;
    width: 300px;
    border-radius: 8px;
    background-image: url('https://blankchronicle.com/images/d/d5/RequiemCover.jpg');
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
}

.disc-requiem:hover
{
    opacity: 80%;
}

.disc-requiem a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
    text-align: center;
}

.disc-requiem a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
}

.disc-shikabane
{
    height: 300px;
    width: 300px;
    border-radius: 8px;
    background-image: url('https://blankchronicle.com/images/6/6b/ShikabaneCover.jpg');
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
}

.disc-shikabane:hover
{
    opacity: 80%;
}

.disc-shikabane a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
    text-align: center;
}

.disc-shikabane a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
}


.sh-live-container
{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: .5em .5em;
    margin-bottom: 1em;
}

.live-elyscon
{
    border-radius: 8px;
}

.live-elyscon:hover
{
    opacity: 80%;
}

.live-elyscon a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
    text-align: center;
}

.live-elyscon a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
}

.live-romancon
{
    border-radius: 8px;
}

.live-romancon:hover
{
    opacity: 80%;
}

.live-romancon a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
    text-align: center;
}

.live-romancon a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
}

.live-tte2
{
    border-radius: 8px;
}

.live-tte2:hover
{
    opacity: 80%;
}

.live-tte2 a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
    text-align: center;
}

.live-tte2 a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
}

.live-moiracon
{
    border-radius: 8px;
}

.live-moiracon:hover
{
    opacity: 80%;
}

.live-moiracon a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
    text-align: center;
}

.live-moiracon a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
}

.live-tte3
{
    border-radius: 8px;
}

.live-tte3:hover
{
    opacity: 80%;
}

.live-tte3 a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
    text-align: center;
}

.live-tte3 a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
}

.live-asohora
{
    border-radius: 8px;
}

.live-asohora:hover
{
    opacity: 80%;
}

.live-asohora a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
    text-align: center;
}

.live-asohora a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
}

.live-merucon
{
    border-radius: 8px;
}

.live-merocon:hover
{
    opacity: 80%;
}

.live-merucon a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
    text-align: center;
}

.live-merucon a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
}

.live-party
{
    border-radius: 8px;
}

.live-party:hover
{
    opacity: 80%;
}

.live-party a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
    text-align: center;
}

.live-party a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
}

.live-noeru
{
    border-radius: 8px;
}

.live-noeru:hover
{
    opacity: 80%;
}

.live-noeru a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
    text-align: center;
}

.live-noeru a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
}

.live-neincon
{
    border-radius: 8px;
}

.live-neincon:hover
{
    opacity: 80%;
}

.live-neincon a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
    text-align: center;
}

.live-neincon a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
}

.live-acoustic
{
    border-radius: 8px;
}

.live-acoustic:hover
{
    opacity: 80%;
}

.live-acoustic a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
    text-align: center;
}

.live-acoustic a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
}



.lh-live-container
{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: .5em .5em;
    margin-bottom: 1em;
}

.live-luxendarc
{
    border-radius: 8px;
}

.live-luxendarc:hover
{
    opacity: 80%;
}

.live-luxendarc a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
    text-align: center;
}

.live-luxendarc a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
}

.live-asohora-shingeki
{
    border-radius: 8px;
}

.live-asohora-shingeki:hover
{
    opacity: 80%;
}

.live-asohora-shingeki a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
    text-align: center;
}

.live-asohora-shingeki a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
}

.live-kisekicon
{
    border-radius: 8px;
}

.live-kisekicon:hover
{
    opacity: 80%;
}

.live-kisekicon a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
    text-align: center;
}

.live-kisekicon a:link, a:visited
{
    display: inline-block;
    height: 300px;
    width: 300px;
    opacity: 0;
}

.lyrics-container
{

}

.song-info-container
{

}

.mv-container
{

}

.tracklist-container
{

}

.bonus-container
{

}

.album-info-container
{

}

.liveperf-container
{

}