@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url('fonts/open_sans.woff') format('woff');
  font-display: fallback;
}
@font-face {
  font-family: 'Cool';
  font-style: normal;
  font-weight: 400;
  src: local('Cool'), local('Cool'), url('fonts/cool-regular.woff2') format('woff2');
  font-display: fallback;
}

*
{
    margin: 0px;
    padding: 0px;
}

body
{
    /*overflow: hidden;*/
    overflow-x: hidden;
    overflow-y: scroll;
    background-color: hsl(217, 9%, 10%);
    color: hsl(0, 0%, 93%);
    -webkit-tap-highlight-color: hsla(0, 46%, 50%, 0.3);
    font-family: 'Cool';
    font-size: 1.3em;
}

a
{
    color: inherit;
    text-decoration: none;
}

::-webkit-scrollbar
{
    width: 8px;
    height: 8px;
    background-color: hsl(217, 6%, 15%);
}
::-webkit-scrollbar-thumb
{
    background-color: hsl(359, 42%, 38%);
}
*::selection
{
    color: #ffffff;
    background: hsl(359, 42%, 38%);
}
::placeholder
{
    color: #757575;
    line-height: 24px; /* Prevent cutting of the buttom of the text */
}

/***************************
 ********** main ***********
 ***************************/

#main
{
    /*box-sizing: border-box;*/
}

/***************************
 ********** Header *********
 ***************************/

#main>img.header
{
    display: none;
}
#main.home>img.header,
#main.avarice>img.header,
#main.wiki>img.header
{
    aspect-ratio: 2048 / 512;
    width: 100%;
    max-width: 100%;
    display: block;
    margin: auto;
    cursor: pointer;
}
#main.home>img.header.collapse,
#main.avarice>img.header.collapse,
#main.wiki>img.header.collapse
{
    width: 980px;
}

/***************************
 ********* Projects ********
 ***************************/

.projects
{
    height: 50px;
    background-color: hsl(217, 9%, 10%);
    overflow: hidden;
    display: none;
}
.projects>div
{
    height: 100%;
    max-width: 980px;
    margin: auto;
}

.projects a,
.articles a,
.articles .comic .slider
{
    line-height: 50px; /* #projects height */
    height: 100%;
    display: block;
    float: left;
    text-align: center;
    padding: 0px 15px;
    cursor: pointer;
    user-select: none;
}
.projects a.link
{
    float: right;
}
.projects a.link.icon
{
    float: right;
    padding: 0px 5px;
}
.projects a.link.icon .image
{
    filter: saturate(50%) sepia(90%) hue-rotate(180deg) brightness(50%); 
    width: 16px;
    height: 16px;
    display: inline-block;
    background: url(images/atlas/atlas.webp) no-repeat;
    background-position: -32px 0px;
}
.projects a.link.icon:hover .image
{
    filter: none; 
}
@keyframes link_icon_image {
    from {transform: scale(1);}
    to {transform: scale(1.3);}
}
.projects a.link.icon:active .image
{
    animation: link_icon_image 0.1s ease-out;
}
.projects a.link.icon.twitter .image { background-position: 0px 0px; }
.projects a.link.icon.discord .image { background-position: -16px 0px; }
.projects a.link.icon.itchio .image { background-position: -48px 0px; }
.projects a.link.icon.newgrounds .image { background-position: -64px 0px; }
.projects a.link.icon.patreon .image { background-position: -80px 0px; }
.projects a.link.icon.picarto .image { background-position: -96px 0px; }
.projects a.link.icon.subscribestar .image { background-position: -112px 0px; }

#main.home .projects .home,
#main.comic .projects .comic,
#main.avarice .projects .avarice,
#main.art .projects .art,
#main.wiki .projects .wiki
{
    background-color: hsl(217, 6%, 15%);
}

#main .projects a:hover,
#main.home .projects a:hover,
#main.comic .projects a:hover,
#main.avarice .projects a:hover,
#main.art .projects a:hover,
#main.wiki .projects a:hover
{
    background-color: hsl(0, 45%, 50%);
}

/***************************
 ********* Articles ********
 ***************************/

.articles
{
    height: 50px;
    background-color: hsl(217, 6%, 15%);
    position: relative;
    z-index: 10;
    overflow: hidden;
}
#main.comic .articles
{
    overflow: initial;
}
.articles>div
{
    max-width: 980px;
    margin: auto;
}

#main.home .articles .home { display: block; }
#main:not(.home) .articles .home { display: none; }

#main.comic .articles .comic { display: block; }
#main:not(.comic) .articles .comic { display: none; }

#main.avarice .articles .avarice { display: block; }
#main:not(.avarice) .articles .avarice { display: none; }

#main.art .articles .art { display: block; }
#main:not(.art) .articles .art { display: none; }

#main.wiki .articles .wiki { display: block; }
#main:not(.wiki) .articles .wiki { display: none; }

#main.home.once_in_hell .articles .once_in_hell>.synopsis,
#main.avarice.synopsis .articles .avarice>.synopsis,
#main.avarice.download .articles .avarice>.download,
#main.avarice.play .articles .avarice>.play,
#main.avarice.faq .articles .avarice>.faq,
#main.avarice.walkthrough .articles .avarice>.walkthrough,
#main.art.gallery .articles .art .art_gallery,
#main.art.fan .articles .art .art_fan,
#main.art.meme .articles .art .art_meme,
#main.art.contest .articles .art .art_contest,
#main.wiki .articles .wiki .wiki_page_history.wiki_selected,
#main.wiki.wiki_history .articles .wiki .wiki_history,
#main.wiki.wiki_source .articles .wiki .wiki_source
{
    background-color: hsl(217, 6%, 20%);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 1;
}

#main .articles a:hover:not(.slider)
{
    background-color: hsl(217, 6%, 20%);
}

#main .articles a.special
{
    float: right;
}

/**************************
 ******** articles ********
 **************************/

#main.home .base>.home { display: block; }
#main:not(.home) .base>.home { display: none; }

#main.comic.page .base .comic .page { display: block; }
#main:not(.comic) .base .comic .page, #main:not(.page) .base .comic .page { display: none; }

#main.avarice.synopsis .base .avarice>.synopsis { display: block; }
#main:not(.avarice) .base .avarice>.synopsis, #main:not(.synopsis) .base .avarice>.synopsis { display: none; }
#main.avarice.download .base .avarice>.download { display: block; }
#main:not(.avarice) .base .avarice>.download, #main:not(.download) .base .avarice>.download { display: none; }
#main.avarice.play .base .avarice>.play { display: block; }
#main:not(.avarice) .base .avarice>.play, #main:not(.play) .base .avarice>.play { display: none; }
#main.avarice.faq .base .avarice>.faq { display: block; }
#main:not(.avarice) .base .avarice>.faq, #main:not(.faq) .base .avarice>.faq { display: none; }
#main.avarice.walkthrough .base .avarice>.walkthrough { display: block; }
#main:not(.avarice) .base .avarice>.walkthrough, #main:not(.walkthrough) .base .avarice>.walkthrough { display: none; }
#main.avarice.login .base .avarice>.login { display: block; }
#main:not(.avarice) .base .avarice>.login, #main:not(.login) .base .avarice>.login { display: none; }

#main.art .base>.art { display: block; }
#main:not(.art) .base>.art { display: none; }

#main.wiki .base>.wiki { display: block; }
#main:not(.wiki) .base>.wiki { display: none; }

#main.comic .articles.footer { display: none; }
#main:not(.comic) .articles.footer { display: none; }

/**************************
 ********** base **********
 **************************/

.base
{
    max-width: 980px;
    margin: auto;
    background-color: hsl(217, 9%, 12%);
}
#main:not(.comic) .base
{
    margin-bottom: 50px; /* Add some space at the bottom of all the pages (footer). */
}

.base a
{
    color: hsl(0, 45%, 50%);
}
.base a:hover
{
    color: hsl(0, 70%, 60%);
}

.home .base,
.avarice .base,
.art .base,
.wiki .base
{
    height: 100%;
}

h2
{
    background-color: hsl(127, 9%, 7%);
    box-shadow: 0px 0px 20px hsla(0, 0%, 0%, 0.2);
    padding: 4px 20px;
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
    position: relative;
}
.expand>h2
{
    background-color: hsl(0, 45%, 50%);
}
.section>h2
{
    user-select: none;
    cursor: pointer;
}

.section:first-of-type
{
    padding-top: 30px;
}
.section
{
    margin-bottom: 10px;
}
.section:last-of-type
{
    margin-bottom: 0px;
    padding-bottom: 0px;
}
.section .details
{
    margin-top: 15px;
    padding-bottom: 30px;
    margin-left: 20px;
    line-height: 1.2em;
}
/* Nested sections last item doesn't need padding bottom*/
.section .section:last-of-type .details
{
    padding-bottom: 0px;
}

.section.expand .details
{
    display: block;
}
.section:not(.expand) .details
{
    display: none;
}

.section>h2>.date
{
    opacity: 0.5;
    font-size: 0.5em;
    float: right;
    line-height: 35px;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translate(0%, -50%);
    user-select: none;
}

ol
{
    list-style-type: none;
    list-style-position: inside;
}

li
{
    line-height: 28px;
}

.shell
{
    font-family: Open Sans;
    color: #bbbbbb;
    background-color: hsl(217, 9%, 6%);
    padding: 0px 6px;
    font-size: 0.8em;
    border: 3px dashed hsl(217, 9%, 15%);
}

/* Templates are just here to generate dynamic content. */
.template
{
    display: none;
}

/**************************
 ******** download ********
 **************************/

.base>.avarice>.download
{
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
}

.base>.avarice>.download .build_promo>img
{
    width: 100%;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
    display: block;
}

.base>.avarice>.download>.archives:not(.expand)
{
    /*padding-bottom: 30px;*/
}

.base>.avarice>.download .build_details
{
    margin: 30px 15px;
    text-align: justify;
    line-height: 1.2em;

    margin: 0px 0px 30px 0px;
    padding: 15px;
    border: 3px dashed hsl(217, 9%, 15%);
    background-color: hsl(217, 9%, 10%);
}

.base>.avarice>.download .changelog_description
{
    margin: 0px 0px 10px 0px;
    padding: 10px;
    border: 3px dashed hsl(217, 9%, 15%);
    background-color: hsl(217, 9%, 10%);
}

.base>.avarice>.download .section.expand
{
    order: 10;
}
.base>.avarice>.download .section:not(.expand)
{
    order: 0;
}

/**************************
 ******** synopsis ********
 **************************/

.base>.avarice>.synopsis
{
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
}

.base>.avarice>.synopsis>.base,
.style_yellow_text
{
    color: hsl(32deg 21% 49%);
}

.base>.avarice>.synopsis>.header
{
    width: 100%;
}
.base>.avarice>.synopsis>.header>.header_image img
{
    width: 100%;
    display: block;
}
.base>.avarice>.synopsis>.header>.header_image
{
    position: relative;
}
.base>.avarice>.synopsis.header_game_loaded>.header>.header_image img
{
    visibility: hidden; /* We hide the image because the characters shadow pierce through the background. */
}
.base>.avarice>.synopsis>.header>.header_image>.header_character
{
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 10%;
    width: 15%;
}
#main.avarice.synopsis #avarice_synopsis_header { display: block; }
.base>.avarice>.synopsis>.header #avarice_synopsis_header
{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: calc(100vh + 200px); /* Add a bottom to increment the scroll by step. */
    pointer-events: none;
    background: none !important;
    display: none;
    z-index: 10;
}

.base>.avarice>.synopsis>.base .portrait
{
    width: 34%;
    float: right;
    border: 3px dashed hsl(217, 9%, 15%);
    background-color: hsl(217, 9%, 6%);
    margin: 15px 15px 20px 10px;
    padding: 5px 0px 0px 0px;
    text-align: center;
    clear: both;
    word-break: break-word;
    font-size: 1.2em;
    line-height: 1.3em;
}
.base>.avarice>.synopsis>.base .portrait>img
{
    width: 100%;
    display: block;
}
.base>.avarice>.synopsis>.base>.synopsis .logo
{
    text-align: center;
    margin: 15px 0px;
    width: 60%;
}
.base>.avarice>.synopsis>.base>.synopsis .logo_mobile { display: none; }
@media screen and ( max-width: 650px ) {
    .base>.avarice>.synopsis>.base>.synopsis .logo_side { display: none; }
    .base>.avarice>.synopsis>.base>.synopsis .logo_mobile {
        margin: auto;
        margin-top: 15px;
        width: 90%;
        display: block;
    }
}
.base>.avarice>.synopsis>.base>.synopsis p,
.base>.avarice>.synopsis>.base>.synopsis ul,
.style_yellow_text
{
    text-align: center;
    padding: 15px;
    line-height: 1.3em;
    font-size: 1.1em;
    text-shadow: 0 0 4px hsla(0, 0%, 0%, 0.8);
}
.base>.avarice>.synopsis>.base>.synopsis ul
{
    text-align: left;
    padding: 15px 15px 30px 45px;
}
.clear
{
    clear: both;
}
.base>.avarice>.synopsis>.base>.synopsis .trailer
{
    position: relative;
    width: calc(100% - 34% - 25px - 30px);
    margin: 15px;
}
@media screen and ( max-width: 550px ) {
    .base>.avarice>.synopsis>.base>.synopsis .trailer {
        clear: both;
        width: calc(100%);
        margin-left: 0px;
        margin-right: 0px;
    }
}
.base>.avarice>.synopsis>.base>.synopsis .trailer video
{
    width: 100%;
    outline: none;
}
.base>.avarice>.synopsis>.base>.synopsis .trailer .video_play_icon
{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 15%;
    opacity: 0.8;
    pointer-events: none;
}
.illustration_gallery
{
    margin: 15px 0px;
    clear: both;
    width: calc(100% - 6px);
    border: 3px dashed hsl(217, 9%, 15%);
}
.illustration_gallery>.current_image
{
    position: relative;
    width: 100%;
}
.illustration_gallery>.current_image img
{
    display: block;
    width: 100%;
}
.illustration_gallery>.current_image .full
{
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    color: rgba(0, 0, 0, 0);
}
.illustration_gallery>.current_image .expand_icon>div
{
    background-image: url('images/editor/editor_icon_expand_yellow.png');
    background-repeat: no-repeat;
    background-position: center;
}
.illustration_gallery>.selector
{
    width: 100%;
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 1;
    flex-flow: row wrap;
    flex-wrap: wrap;
}
.illustration_gallery>.selector>img
{
    height: 100px;
    width: 80px;
    object-fit: cover;
    flex-grow: 1;
    flex-shrink: 1;
    flex-flow: row;
    outline: 3px dashed hsl(217, 9%, 15%);
    cursor: pointer;
}
/* Mouse over image animation */
#main:not(.mobile) .illustration_gallery>.selector>img:hover
{
    position: relative;
    box-shadow: 0px 0px 15px hsla(0, 0%, 0%, 1);
    transform: scale(1.3);
    animation: hover_image 0.1s ease-out;
    z-index: 10000;
}
.illustration_gallery>.selector>img.is_selected
{
    outline: 3px dashed hsl(0, 45%, 50%);
    z-index: 2;
}
@media screen and ( max-width: 750px ) {
    .illustration_gallery.kaldea>.selector>img {
        flex-basis: 25%;
    }
    .illustration_gallery.scenes>.selector>img {
        flex-basis: 20%;
    }
}
@media screen and ( max-width: 420px ) {
    .illustration_gallery.scenes>.selector>img {
        flex-basis: 33%;
    }
}

/* Show the pointer while over a character */
#main.cursor_over_character
{
    cursor: pointer;
}

/**************************
 *********** FAQ **********
 **************************/

.faq h2
{
    padding: 8px 20px;
    font-size: 1.2em;
    font-weight: normal;
}
.faq .section:nth-of-type(even):not(.expand)>h2
{
    background-color: hsl(217, 6%, 15%);
}
.faq .section
{
    margin-bottom: 0px;
}
.faq .details
{
    word-wrap: break-word;
}

/**************************
 *********** FAQ **********
 **************************/

.faq h2
{
    padding: 8px 20px;
    font-size: 1.2em;
    font-weight: normal;
}
.faq .section:nth-of-type(even):not(.expand)>h2
{
    background-color: hsl(217, 6%, 15%);
}
.faq .section
{
    margin-bottom: 0px;
}
.faq .details
{
    word-wrap: break-word;
}

/**************************
 ********** comic *********
 **************************/

.base .comic .page a>img
{
    min-width: 100%;
    max-width: 100%;
    padding: 0px;
    margin: auto;
    display: block;
    user-select: none;
    cursor: pointer;
    z-index: 1;
    position: relative;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
    color: rgba(0, 0, 0, 0); /* Hide the alt text appearing briefly in firefox */
}

#main.comic .base .comic .page.show_comic_page
{
    display: block;
}

.articles .comic .next,
.articles .comic .latest
{
    float: right;
}

#main:not(.mobile) #comic_background
{
    filter: blur(100px) opacity(0.15);
    position: absolute;
    top: 100px;
    left: 0px;
    height: 1470px;
    width: 100%;
    left: 0;
    z-index: -1000;
}
#main:.mobile #comic_background
{
    display: none;
}
.base .comic .page .newPage
{
    text-align: center;
    padding: 250px 0px;
    /*font-style: italic;*/
    display: none;
}
.base .comic .page.lastPage .newPage
{
    display: block;
}
.base .comic .page .newPage .title
{
    font-size: 2em;
    font-weight: bold;
}
.base .comic .page .newPage .title.hiatus
{
    text-decoration: line-through;
    color: hsl(0, 45%, 50%);
}
.base .comic .page .newPage .small_message
{
    text-align: center;
    margin-top: 20px;
    font-size: 1em;
}
.base .comic .page.lastPage h1 { display: block; }
#main.comic>.base .comic .page.lastPage a { display: none; }

/* Patreon censorship */
.base .comic .page.patreon_censorship
{
    overflow: hidden;
    position: relative;
}
.base .comic .page.patreon_censorship .patreon_censorship
{
    display: block;
    position: absolute;
    top: 50%;
    left: 0px;
    right: 0px;
    padding: 50px;
    transform: translate(0%, -50%);
    text-align: center;
    pointer-events: none;
    font-size: 1.5em;
    z-index: 2;
}
.base .comic .page:not(.patreon_censorship) .patreon_censorship
{
    display: none;
}
.base .comic .page.patreon_censorship a>img
{
    filter: blur(100px) saturate(0.8) brightness(0.5);
}

/* Full width page */
#main.comic>.base.full_width
{
    max-width: unset;
    background-color: unset;
}
#main.comic>.base.full_width .comic .page a>img
{
    min-width: unset;
}

/* Page preview blured image */
#main.comic>.base .comic .page .page_preview
{
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    overflow: hidden;
}
#main.comic>.base .comic .page .page_preview>div
{
    filter: blur(10px);
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
}
#main.comic>.base .comic .page.patreon_censorship .page_preview>div
{
    filter: blur(100px) saturate(0.8) brightness(0.5);
}
#main.comic>.base .comic .page a
{
    position: relative;
    display: block;
    margin: auto;
}

#main.comic>.base .comic .page a .comic_link
{
    position: absolute;
    display: block;
    z-index: 100;
    margin: unset;
    filter: blur(30px);
    mix-blend-mode: overlay;
    background-color: hsla(0, 79%, 59%, 0);
    transition: background-color 0.2s ease-in;
}
#main.comic>.base .comic .page a .comic_link:hover
{
    background-color: hsla(0, 79%, 59%, 1);
    transition: background-color 0.075s ease-out;
}

/**************************
 ********* slider *********
 **************************/

.articles .comic
{
    color: #ab8f6f;
}

.articles .comic .slider
{
    width: 500px;
    padding: 0px;
    position: relative;
    left: 15px;
    height: 50px;
    user-select: none;
    cursor: pointer;
}

.articles .comic .slider .bar
{
    height: 4px;
    background-color: hsla(217, 5%, 12%, 1);
    position: absolute;
    top: 50%;
    left: 0px;
    right: 0px;
    transform: translate(0%, -50%);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0);
}

.articles .comic .slider .pageNumber,
.articles .comic .slider .pageNumberHover
{
    text-align: center;
    background-color: hsl(217, 6%, 20%);
    cursor: pointer;
    user-select: none;
    border-radius: 0px;
    display: inline;
    padding: 0px 10px;
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(-50%, -50%);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}
.articles .comic .slider .pageNumberHover
{
    background-color: hsl(0, 45%, 50%);
    display: none;
    color: white;
}
#main:not(.mobile) .articles .comic .slider:hover .pageNumberHover
{
    display: block;
}

.articles .comic .slider .mini
{
    position: absolute;
    bottom: 0px;
    left: 50%;
    width: 100px;
    height: 150px;
    transform: translate(-50%, 100%);
    pointer-events: none;
    /*background:url(comic/minify.jpg) no-repeat;*/
    background-repeat: no-repeat;
    background-position:-200px 0px;
    box-shadow: 0px 0px 10px hsl(0, 45%, 50%), 0px 0px 10px hsl(0, 45%, 50%);
    border: 2px solid black;
    background-color: black;
}
.articles.footer .comic .slider .mini
{
    top: 0px;
    bottom: initial;
    transform: translate(-50%, -100%);
}

/**************************
 ***** comic comments *****
 **************************/

 #main>#footers>.comicComments
 {
    display: none;
    max-width: 980px;
    margin: auto;
    /*margin-bottom: 50px;*/
 }
 #main.comic>#footers>.comicComments
 {
    /*display: block;*/
 }

#footers>.comicComments .comment
{
    cursor: auto;
    background-color: hsl(217, 9%, 10%);
    box-shadow: 5px 0px 0px hsl(220, 6%, 30%) inset;
    padding: 15px 20px;
}
#footers>.comicComments>.comments>.comment:nth-of-type(odd)
{
    background-color: hsl(217, 9%, 8%);
}

#footers>.comicComments>.comments>.comment>.userName
{
    font-style: italic;
    opacity: 0.5;
    margin-bottom: 10px;
}

#footers>.comicComments>.addComment>.comment
{
    box-shadow: 5px 0px 0px hsl(0, 55%, 55%) inset;
}
#footers>.comicComments>.addComment>.comment
{
    padding: 10px 10px;
}
#footers>.comicComments>.addComment>.comment>input,
#footers>.comicComments>.addComment>.comment>textarea
{
    display: block;
    width: 100%;
    background: none;
    color: inherit;
    border: none;
    padding: 5px 10px;
    font: inherit;
    cursor: pointer;
    outline: inherit;
    line-height: 24px; /* Prevent cutting of the buttom of the text */
}

/**************************
 ********** play **********
 **************************/

#main.play .base .avarice .play .webgl
{
    background-size: cover;
    background-position: 0px -5px;
    background-repeat: no-repeat;
    width: 100%;
    padding-top: 61.2244%;
    position: relative;
}
#main.mobile.play:not(.portrait) .base .avarice .play .webgl
{
    height: 100vh;
    padding-top: 0px;
}
#main.play .base .avarice .play .webgl.fullscreen
{
    height: 100%;
    padding-top: 0px;
}
.base .avarice .play
{
    position: relative;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
}
.base .avarice .play .webgl:not(.playing) iframe { visibility: hidden; }
.base .avarice .play .webgl:.playing iframe { visibility: visible; }
.base .avarice .play .webgl:not(.playing) .button { display: block; }
.base .avarice .play .webgl.playing .button { display: none; }

.base .avarice .play .webgl .iframe
{
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 1;
}
.base .avarice .play .webgl iframe
{
    width: 100%;
    height: 100%;
    border: none;
    overflow: hidden;
    display: block;
}

.base .avarice .play .webgl .button
{
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 2;
    cursor: pointer;
}
.base .avarice .play .webgl .button span
{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    background-color: hsl(0, 45%, 50%);
    box-shadow: 0px 0px 100px hsl(0, 45%, 50%);
    /*border: 2px solid black;*/
    font-size: 3em;
    border-radius: 30px;
    padding: 15px 20px 20px 20px;
    user-select: none;
    pointer-events: none;
}

.base .avarice .play .builds
{
    display: flex;
    justify-content: space-between;
    flex-flow: row wrap;
    flex-wrap: wrap;
}

/* Build */
.base .avarice .play .builds .build
{
    height: 180px;
    width: 280px;
    flex-grow: 1;
    display: block;
    position: relative;
}
.base .avarice .play .builds .build img
{
    height: 100%;
    width: 100%;
    object-fit: cover;
}
/* Build details */
.base .avarice .play .builds .build .details
{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: hsla(0, 0%, 93%, 0);
    text-shadow: 0 0 5px rgba(0, 0, 0, 0);
    font-size: 1.2em;
}
.base .avarice .play .builds a.build:hover .details
{
    animation: hover_build_opacity 0.5s ease-out;
    color: hsla(0, 0%, 93%, 1);
    text-shadow: 0 0 5px rgba(0, 0, 0, 1);
}
@keyframes hover_build_opacity {
    from {color: hsla(0, 0%, 93%, 0); text-shadow: 0 0 5px rgba(0, 0, 0, 0);}
    to {color: hsla(0, 0%, 93%, 1); text-shadow: 0 0 5px rgba(0, 0, 0, 1);}
}

/* Current build */
.base .avarice .play .builds .build.current
{
    background-color: hsl(0, 45%, 50%);
}
.base .avarice .play .builds .build.current img
{
    border: 4px dashed hsl(0, 45%, 50%);
    opacity: 0.8;
    box-sizing: border-box;
}

/* Mouse over image animation */
#main:not(.mobile) .base .avarice .play .builds a.build:hover
{
    position: relative;
    box-shadow: 0px 0px 15px hsla(0, 0%, 0%, 1);
    transform: scale(1.3);
    animation: hover_image 0.1s ease-out;
    z-index: 10000;
}

.base .avarice .play .current_webgl .details
{
    padding: 15px;
    background-color: hsl(217, 9%, 10%);
    border: 3px dashed hsl(217, 9%, 30%);
    text-align: center;
    word-break: break-word;
    position: relative;
}

.base .avarice .play .current_webgl .details a
{
    display: inline-block;
    position: absolute;
    top: 0px;
    padding: 15px;
    background-color: hsl(217, 9%, 10%);
}
.base .avarice .play .current_webgl .details a.play_left_link { left: 0px; }
.base .avarice .play .current_webgl .details a.fullscreen { right: 0px; }
.base .avarice .play .current_webgl .details a:hover
{
    background-color: hsl(217, 9%, 20%);
    box-shadow: 0px 0px 10px hsla(0, 0%, 0%, 0.3);
    border-right: 3px dashed hsl(217, 9%, 30%);
}
.base .avarice .play .current_webgl .details a.fullscreen:hover
{
    right: 0px;
    border-right: 0px;
    border-left: 3px dashed hsl(217, 9%, 30%);
}

.base .avarice .play .about_play
{
    text-align: left;
    padding: 20px;
    color: hsl(0, 0%, 40%);
    line-height: 1.2em;
}

span.old_build_warning
{
    text-decoration: underline;
}
.base .avarice .play .builds span.old_build_warning
{
    position: relative;
    top: 20px;
}

/**************************
 ****** Walkthrough *******
 **************************/

.base .walkthrough
{
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
}
.base .walkthrough h1
{
    text-align: center;
    line-height: 300px;
}

.base .walkthrough>.quest
{
}
.base .walkthrough>.quest.expand
{
    margin-bottom: 20px;
}
.base .walkthrough>.quest:last-of-type
{
    margin-bottom: 0px;
}
.base .walkthrough>.quest .title
{
    height: 150px;
    background-color: hsl(217, 9%, 10%);
    cursor: pointer;
    display: block;
    color: hsl(0, 0%, 93%);
    display: flex;
    align-items: center;
}
.base .walkthrough .quest:nth-of-type(odd) .title
{
    background-color: hsl(217, 9%, 8%);
}
.base .walkthrough>.quest .title h3
{
    font-size: 1.5em;
    user-select: none;
    pointer-events: none;
    flex: 1;
}
.base .walkthrough>.quest .title .image
{
    width: 99px; /* -1 to remove the texture resize artifact. */
    height: 150px;
    display: block;
    float: left;
    margin-right: 30px;
    user-select: none;
    pointer-events: none;
    background:url(static/game/avarice/walkthrough/quests.webp) no-repeat;
    background-position:-200px -150px;
    background-size: 601px 1050px; /* Increase height by 150px per row */
}

.base .walkthrough>.quest:not(.expand) .part
{
    display: none;
}
.base .walkthrough .part
{
    padding-left: 5px;
}
.base .walkthrough .part h3
{
    padding: 15px;
}
.base .walkthrough .part p
{
    padding: 0px 15px 15px 15px;
    line-height: 25px;
}
.clear
{
    clear: both;
}
.base .walkthrough .part.details
{
    box-shadow: 5px 0px 0px hsla(220, 6%, 30%, 1) inset;
}

.base .walkthrough .part.requirements
{
    box-shadow: 5px 0px 0px hsl(0, 55%, 55%) inset;
}

.base .walkthrough .part.rewards
{
    box-shadow: 5px 0px 0px rgb(255, 180, 0) inset;
}
.base .walkthrough .quest>.part:nth-of-type(odd)
{
    background-color: hsl(217, 9%, 15%);
}

.base .walkthrough .part img.right
{
    float:right;
    margin-left: 10px;
    cursor: pointer;
}

@keyframes hover_image {
    from {transform: scale(1);}
    to {transform: scale(1.2);}
}
/*.base .walkthrough .title:hover img,*/
#main:not(.mobile) .base .walkthrough .part img.right:hover
{
    position: relative;
    box-shadow: 0px 0px 15px hsla(0, 0%, 0%, 1);
    transform: scale(1.3);
    animation: hover_image 0.1s ease-out;
    z-index: 10000;
}

/* Enlarge a walkthrough image */
#image_viewer
{
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    cursor: pointer;
}
body:not(.image_viewer) #image_viewer { display: none; }
body.image_viewer #main
{
    filter: blur(10px) brightness(0.5);
}
#image_viewer img
{
    display: block;
    max-height: 90vh;
    max-width: 90vw;
}
#image_viewer>div
{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    box-shadow: 0px 0px 30px hsla(0, 0%, 0%, 1);
    max-height: 90vh;
    max-width: 90vw;
}
#image_viewer>div>.text
{
    background-color: hsl(217, 9%, 10%);
    border: 3px dashed hsl(217, 9%, 30%);
    padding: 10px;
    box-shadow: 0px 0px 30px hsla(0, 0%, 0%, 1);
    text-align: center;
}
#image_viewer:not(.text)>div>.text
{
    display: none;
}
#image_viewer.text>div
{
    max-height: 90vh;
}
#image_viewer.text img
{
    max-height: 80vh;
}
@keyframes imageViewer { from {opacity: 0;} to {opacity: 1;} }
@keyframes imageViewer_img { from {transform: translate(-50%, -50%) scale(0.95);} to {transform: translate(-50%, -50%) scale(1);} }
@keyframes imageViewer_blur { from {filter: blur(0px) brightness(1);} to {filter: blur(10px) brightness(0.5);} }
body.image_viewer #image_viewer { animation: imageViewer 0.3s linear both; }
body.image_viewer #image_viewer>div { animation: imageViewer_img 0.3s ease-out both; }
body.image_viewer #main:not(.mobile) { animation: imageViewer_blur 0.3s ease-out both; }

/**************************
 ********* Home ***********
 **************************/

.base .home_root
{
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
    padding: 0px 0px 0px 0px;
}
.base .home_root .wiki_root
{
    box-shadow: unset;
}

.base .home_root h2
{
    font-size: 2em;
    text-align: left;
    border-bottom: 1px solid #CCCCCC;
    margin-bottom: 30px;
    padding: 20px 0px 0px 0px;
    margin: 0px 20px 20px 20px;
    background-color: unset;
    box-shadow: unset;
    width: unset;
    display: block;
}

.base .home_root h3
{
    background-color: hsla(217, 9%, 7%, 1);
    overflow: hidden;
    padding-right: 15px;
}

.base .home_root h3 a {
    color: hsl(0, 0%, 93%);
    display: block;
    width: 100%;
    height: 100%;
    padding: 5px 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.base .home_root .home_page img
{
    width: 100%;
}

.base .art>.art_gallery:not(:last-child) .gallery_row { margin-bottom: 5px; }

/* Mouse over image animation */
#main:not(.mobile) .base .wiki_root .box img:hover
{
    position: relative;
    box-shadow: 0px 0px 15px hsla(0, 0%, 0%, 1);
    transform: scale(1.3);
    animation: hover_image 0.1s ease-out;
    z-index: 10000;
}

/**************************
 ********* Wiki ***********
 **************************/

.base .wiki_root
{
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
    padding: 0px 0px 0px 0px;
}

/* Summary */
/* Summary featured */
.base .wiki_root.summary .wiki_featured
{
    display: flex;
    flex-wrap: wrap;
    padding-right: 20px;
}
.base .wiki_root.summary .wiki_home_column
{
    padding-left: 20px;
    flex: 0%;
    max-width: 50%;
}
.base .wiki_root.summary .wiki_home_column_unique
{
    padding-left: 20px;
}
@media (max-width: 650px) {
    .base .wiki_root.summary .wiki_home_column {
        flex: 100%;
        max-width: 100%;
    }
}
.base .wiki_root.summary .wiki_page
{
    background-color: hsl(217, 9%, 16%);
    margin-bottom: 20px;
    /*overflow: hidden;*/
    /*box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);*/
}
.base .wiki_root.summary .wiki_page .text
{
    padding: 15px;
    /*overflow-wrap: break-word;*/
}
.base .wiki_root.summary h3
{
    background-color: hsla(217, 9%, 7%, 1);
    overflow: hidden;
    padding-right: 15px;
}
.base .wiki_root.summary h3 a
{
    color: hsl(0, 0%, 93%);
    display: block;
    width: 100%;
    height: 100%;
    padding: 5px 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.base .wiki_root.summary .wiki_block:hover h3
{
    background-color: hsla(0, 45%, 50%, 1);
}

/* Summary Categories */
.base .wiki_root.summary .wiki_categories
{
    display: flex;
    flex-wrap: wrap;
    padding-right: 20px;
}
.base .wiki_root.summary .wiki_category
{
    float: left;
    margin-bottom: 20px;
    background-color: hsl(217, 9%, 14%);
}
.base .wiki_root.summary table
{
    width: 100%;
    border-spacing: 0; 
    table-layout: fixed;
    border-collapse: collapse;
}
.base .wiki_root.summary td
{
}
.base .wiki_root.summary td a
{
    /*color: hsl(0, 0%, 93%);*/
    display: block;
    width: 100%;
    height: 100%;
    padding: 0px 0px;
}
.base .wiki_root.summary td a p
{
    display: block;
    padding: 5px 10px;
    background-color: hsl(217, 9%, 16%);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.base .wiki_root.summary tr:first-of-type td a p
{
    padding-top: 10px;
}
.base .wiki_root.summary td a:hover p
{
    color: hsl(0, 70%, 60%);
    background-color: hsl(217, 9%, 14%);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    z-index: 1;
    position: relative;
    font-style: italic;
}
.base .wiki_root.summary p
{
    line-height: 28px;
}
.base .wiki_root.summary .wiki_activity
{
    padding: 0px 20px 20px 20px;
}
.base .wiki_root.summary .wiki_activity .user_name
{
    font-weight: bold;
}
.base .wiki_root.summary .wiki_activity .time
{
    font-style: italic;
    opacity: 50%;
}
.base .wiki_root h1
{
    text-align: left;
    border-bottom: 1px solid #CCCCCC;
    margin-bottom: 30px;
    padding: 20px 0px 0px 0px;
    margin: 0px 20px 20px 20px;
}
.base .wiki_root h2
{
    cursor: initial;
    user-select: initial;
}
.base .wiki_root .expand>h2
{
    background-color: hsl(127, 9%, 7%);
}

.base .wiki_root .brief
{
    margin: 0px 20px 30px 20px;
}
.base .wiki_root .details
{
    margin-right: 20px;
    margin-bottom: 0px;
    padding-bottom: 30px;
}
/* The base texts */
.base .wiki_root p,
.base .wiki_root li,
#main.wiki_edit .base .wiki_root textarea
{
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 0.9em;
    line-height: 1.6em;
    color: hsl(0, 0%, 80%);
}
.base .wiki_root p b,
.base .wiki_root p i
{
    color: hsl(0, 0%, 100%);
}
.base .wiki_root.page p:not(:last-of-type)
{
    margin-bottom: 15px;
}
.base .wiki_root.page h3
{
    margin-top: 20px;
}
.base .wiki_root.page ol
{
    list-style-type: decimal;
    list-style-position: inside;
}
.base .wiki_root.page ul
{
    list-style-position: inside;
}
.base .wiki_root.page li
{
    text-align: left;
}
.base .wiki_root.page .quote
{
    background-color: hsl(217, 9%, 10%);
    border: 3px dashed hsl(217, 9%, 30%);
    padding: 15px;
}
#main.wiki_edit .base .wiki_root.page .wiki_page_content
{
    overflow: hidden;
}

/* Wiki page category*/
.base .wiki_root.page .wiki_categories
{
    margin: 0px;
    margin-top: -10px;
}
.base .wiki_root.page .wiki_categories a
{
    display: inline-block;
    padding: 15px;
}
.base .wiki_root.page .wiki_categories a:hover
{
    padding: 12px;
    background-color: hsl(217, 9%, 20%);
    box-shadow: 0px 0px 10px hsla(0, 0%, 0%, 0.3);
    border: 3px dashed hsl(217, 9%, 30%);
}

#main.wiki .articles .wiki .wiki_page_history:not(.wiki_selected)
{
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
 
/* Preview */
.base .wiki_root .wiki_preview_diff
{
    position: absolute;
    right: 0px;
    background-color: hsl(217, 9%, 12%);
    display: none;
}
.base .wiki_root .wiki_preview_diff h1
{
    visibility: hidden;
}
.base .wiki_root .wiki_preview_diff
{
    left: 0px;
    overflow-wrap: break-word;
}
#main.wiki_history .base .wiki_root .wiki_preview_diff
{
    display: block;
}
.base .wiki_root .ins
{
    color: #66b766;
    border: 3px dashed hsl(217, 9%, 15%);
    border-left: 0px;
    border-right: 0px;
}
.base .wiki_root .del
{
    color: #c14343;
    border: 3px dashed hsl(217, 9%, 15%);
    border-left: 0px;
    border-right: 0px;
    text-decoration: line-through;
}

/* Right box */
.base .wiki_root .box
{
    float: right;
    width: 250px;
    border: 3px dashed hsl(217, 9%, 15%);
    color: #bbbbbb;
    background-color: hsl(217, 9%, 6%);
    margin: 0px 0px 20px 10px;
    padding: 5px;
    text-align: center;
    clear: both;
    max-width: 100%;
}
.base .wiki_root .box img
{
    width: 100%;
    display: block;
}

/* Mouse over image animation */
#main:not(.mobile):not(.wiki_edit) .base .wiki_root .box img:hover
{
    position: relative;
    box-shadow: 0px 0px 15px hsla(0, 0%, 0%, 1);
    transform: scale(1.3);
    animation: hover_image 0.1s ease-out;
    z-index: 10000;
}

/* Edit page button */
#main .articles a.wiki_edit { display: none; }
#main.wiki .articles a.wiki_edit.can_edit_wiki { display: block; }
#main:not(.wiki_edit) .articles a.wiki_save { display: none; }
#main.wiki.wiki_edit>.articles a.wiki_save { display: block; }
#main:not(.wiki_edit) .articles a.wiki_history { display: none; }
#main.wiki.wiki_edit>.articles a.wiki_history { display: block; }
#main:not(.wiki_edit) .articles a.wiki_source { display: none; }
#main.wiki.wiki_edit .articles a.wiki_source { display: block; }
#main:not(.wiki_edit) .articles a.wiki_admin { display: none; }
#main.wiki.wiki_edit>.articles a.wiki_admin { display: block; }


/* Edit mode */
#main.wiki_edit .base .wiki_root textarea
{
    width: 100%;
    overflow: hidden;
    background-color: hsla(0, 0%, 100%, 0.1);
    color: hsl(0, 0%, 90%);
    padding: 20px;
    box-sizing: border-box;
    display: none;
}
#main.wiki_edit.wiki_source .base .wiki_root textarea
{
    display: block;
}
#main.wiki_edit .base .wiki_root
{
    box-shadow: none;
}
.base .wiki_root .wiki_edit
{
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
    padding: 0px 0px 0px 0px;
    z-index: 1;
    position: relative;
}
#main.wiki_history .base .wiki_root .wiki_edit
{
    z-index: 100;
}

/* History */
#main .base .wiki_root .wiki_history
{
    display: none;
    user-select: none;
}
#main.wiki_history .base .wiki_root .wiki_history
{
    display: block;
    background-color: hsl(217, 9%, 20%);
    width: 100%;
    height: 40px;
    /*margin-bottom: -15px;*/
    position: relative;
    cursor: pointer;
}

#main.wiki_history .base .wiki_root .wiki_history .history_background
{
    display: block;
    height: 100%;
    width: 50%;
    left: 0px;
    position: absolute;
    opacity: 0.3;
    background: linear-gradient(90deg, hsla(0, 45%, 50%, 0.05) 0%, hsla(0, 45%, 50%,1) 100%);
}
#main.wiki_history .base .wiki_root .wiki_history .history_background.new
{
    background: linear-gradient(-90deg, hsla(210, 45%, 50%, 0.05) 0%, hsla(210, 45%, 50%,1) 100%);
    width: 30%;
    right: 0px;
    left: inherit;
    opacity: 0.3;
}

#main.wiki_history .base .wiki_root .wiki_history .history_handle
{
    display: block;
    width: 20px;
    height: 100%;
    left: 50%;
    position: absolute;
}
#main.wiki_history .base .wiki_root .wiki_history .history_handle.old
{
    background-color: hsla(0, 45%, 50%, 1);
    box-shadow: 0px 0px 20px hsla(0, 45%, 50%, 0.5);
}
#main.wiki_history .base .wiki_root .wiki_history .history_handle.new
{
    background-color: hsla(210, 45%, 50%, 1);
    box-shadow: 0px 0px 20px hsla(210, 45%, 50%, 0.5);
    left: inherit;
    right: 30%;
}
#main.wiki_history .base .wiki_root .wiki_history .history_handle .info
{
    display: none;
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translate(-50%, 0%);
    padding: 8px 10px 8px 10px;
    text-align: center;
    white-space: nowrap;
    line-height: 25px;
    text-shadow: 0px 0px 6px hsla(0, 0%, 0%, 0.5);
    z-index: 1000;
}
#main.wiki_history .base .wiki_root .wiki_history .history_handle.old .info
{
    background-color: hsla(0, 45%, 50%, 1);
    box-shadow: 0px 0px 20px hsla(0, 45%, 50%, 0.5);
}
#main.wiki_history .base .wiki_root .wiki_history .history_handle.new .info
{
    background-color: hsla(210, 45%, 50%, 1);
    box-shadow: 0px 0px 20px hsla(210, 45%, 50%, 0.5);
}
#main.wiki_history .base .wiki_root .wiki_history .history_handle.mouse_over .info
{
    display: block;
}
#main.wiki_history .base .wiki_root .wiki_history .history_handle .info .diff,
#main.wiki_history .base .wiki_root .wiki_history .history_handle .info .date
{
    font-style: italic;
    opacity: 0.5;
}

/* Editor */
#main .base .wiki_root .wiki_content_editor
{
    border: hsl(0deg 0% 100% / 50%) solid 1px;
    border-radius: 5px;
    border: 1px solid rgb(255, 255, 255);
    border: 1px solid rgba(255, 255, 255, .5);
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    min-height: 65px;
    overflow: hidden;
}
#main.wiki_source .base .wiki_root .wiki_content_editor
{
    display: block;
    position: absolute;
    top: 0px;
    width: 446px;
    right: -446px;
    background-color: hsl(217, 9%, 12%);
    border: none;
    padding-top: 105px;
}
#main .base .wiki_root .wiki_editor
{
    width: 100%;
    height: 40px;
    margin-bottom: -15px;
    position: relative;
}
#main .base .wiki_root .wiki_editor .header
{
    display: block;
    /*background-color: hsl(217, 9%, 10%, 1); Darker*/
    background-color: hsla(217, 8%, 12%, 1);
    width: 100%;
    position: relative;
    overflow: hidden;
    text-align: center;
    height: 40px;
}
#main .base .wiki_root .wiki_editor .header.sticky
{
  position: fixed;
  top: 0;
  width: 100%;
  max-width: 980px;
  z-index: 1000;
}
#main .base .wiki_root .wiki_editor a
{
    display: inline-block;
    padding: 8px 5px 7px 5px;
    cursor: pointer;
    user-select: none;
}
#main .base .wiki_root .wiki_editor a:hover
{
    background-color: hsla(0, 45%, 50%, 1);
}
#main .base .wiki_root .wiki_editor a:not(.text) div
{
    width: 32px;
    height: 25px;
    background-image: url('images/editor/editor_icons.png');
    display: inline-block;
    margin: 0px;
    opacity: 0.5;
}
#main .base .wiki_root .wiki_editor a.text div
{
    display: inline;
    margin: 0px;
    opacity: 0.5;
    font-weight: bold;
    color: white;
    position: relative;
    top: 9px;
}
#main .base .wiki_root .wiki_editor a.text
{
    padding: 0px 5px 0px 5px;
    height: 40px;
    position: relative;
    top: -16px;
}
#main .base .wiki_root .wiki_editor a:hover div
{
    opacity: 1;
}
#main .base .wiki_root .wiki_editor a div.bold { background-position: 0px 0px; width: 21px; }
#main .base .wiki_root .wiki_editor a div.italic { background-position: -32px 0px; width: 19px; }
#main .base .wiki_root .wiki_editor a div.link { background-position: 0px -74px; width: 25px; }
#main .base .wiki_root .wiki_editor a div.image { background-position: -64px -74px; width: 32px; }
#main .base .wiki_root .wiki_editor a div.category { background-position: 0px -99px; width: 31px; }
#main .base .wiki_root .wiki_editor a div.list { background-position: -64px -49px; width: 30px; }
#main .base .wiki_root .wiki_editor a div.number { background-position: -96px -49px; width: 29px; }
#main .base .wiki_root .wiki_editor a div.quoteButton { background-position: -96px -74px; width: 28px; }
#main .base .wiki_root .wiki_editor a div.h2 { background-position: -32px -99px; width: 31px; }
#main .base .wiki_root .wiki_editor a div.h3 { background-position: -64px -99px; width: 31px; }

/* Click editor header button animation */
@keyframes wiki_editor_button {
    from {transform: scale(1); }
    to {transform: scale(1.3); }
}
#main .base .wiki_root .wiki_editor a:active div
{
    animation: wiki_editor_button 0.1s ease-out;
}

/**************************
 *********** Art **********
 **************************/

.articles .art .art_contest
{
    display: none;
}

.base>.art
{
    margin-bottom: 50px;
}

.base .art>.art_gallery .gallery_row
{
    display: flex;
}

.base .art>.art_gallery .gallery_item
{
    display: block;
}

/* Margin */
.base .art>.art_gallery .gallery_item:not(:last-child) { margin-right: 5px; }
.base .art>.art_gallery .gallery_row:not(:last-child) { margin-bottom: 5px; }

.base .art>.art_gallery .gallery_item img
{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.base .art>.art_gallery .gallery_item.gallery_video
{
    position: relative;
}
.base .art>.art_gallery .gallery_item.gallery_video img.gallery_video
{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: 20%;
    object-fit: fill;
    display: inherit;
}

/* Mouse over image animation */
#main:not(.mobile) .base .art>.art_gallery .gallery_item:hover
{
    position: relative;
    box-shadow: 0px 0px 15px hsla(0, 0%, 0%, 1);
    transform: scale(1.3);
    animation: hover_image 0.1s ease-out;
    z-index: 10000;
}

.base .art>.art_gallery .current_image
{
    overflow: hidden;
    position: relative;
}

.base .art>.art_gallery .current_image>a:not(.expand_icon)
{
    display: block;
    position: relative;
}
.base .art>.art_gallery .current_image img
{
    display: block;
    margin: auto;
    max-width: 100%;
    position: relative;
    z-index: 1;
    color: rgba(0, 0, 0, 0);
}
.base .art>.art_gallery .current_image img.art_preview
{
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 0;
}
.base .art>.art_gallery .current_image .text
{
    padding: 15px;
    background-color: hsl(217, 9%, 10%);
    border: 3px dashed hsl(217, 9%, 30%);
    text-align: center;
    word-break: break-word;
}
.base .art>.art_gallery .current_image .text .unknown_art_author
{
    font-style: italic;
    opacity: 0.5;
    line-height: 30px;
}
.base .art>.art_gallery .current_image .tags
{
    height: 50px;
    width: 100%;
}
.base .art>.art_gallery .current_image .tags a
{
    display: inline-block;
    padding: 15px;
}
.base .art>.art_gallery .current_image .tags a:hover
{
    padding: 12px;
    background-color: hsl(217, 9%, 20%);
    box-shadow: 0px 0px 10px hsla(0, 0%, 0%, 0.3);
    border: 3px dashed hsl(217, 9%, 30%);
    border-top: 0px;
    padding-top: 15px;
}
.base .art>.art_gallery .current_image iframe
{
    border: none;
    margin: auto;
    display: block;
    width: 100%;
    height: 630px;
}
#main.mobile .base .art>.art_gallery .current_image iframe
{
    border: none;
    margin: auto;
    display: block;
    width: 350px;
    height: 250px;
}

.base .art>.art_gallery .gallery_not_found
{
    line-height: 200px;
    text-align: center;
}

.base .art>.art_gallery .gallery_loading
{
    line-height: 100px;
    text-align: center;
    opacity: 0.3;
}

.expand_icon
{
    position: absolute;
    right: 0px;
    top: 0px;
    margin: 10px;
    padding: 5px;
    background-color: hsla(217, 9%, 5%, 0.5);
    border-radius: 5px;
    opacity: 0.5;
    cursor: pointer;
    z-index: 1;
}
.expand_icon>div
{
    width: 25px;
    height: 25px;
    background-image: url('images/editor/editor_icons.png');
    background-position: -96px -99px;
}
.expand_icon:hover
{
    opacity: 1;
    animation: gallery_expand_icon 0.1s ease-out;
    padding: 10px; border-radius: 15px;
    margin: 5px;
    background-color: hsla(217, 9%, 5%, 0.5);
}
@keyframes gallery_expand_icon {
    from {padding: 5px; border-radius: 5px; opacity: 0.5; margin: 10px; background-color: hsla(217, 9%, 5%, 0.5);}
    to {padding: 10px; border-radius: 15px; opacity: 1; margin: 5px; background-color: hsla(217, 9%, 5%, 0.5);}
}
.expand_icon
{
    background-color: hsla(217, 9%, 5%, 0);
}
.projects a.link.icon:active .image
{
}

/* Search input */
.articles>.art>.art_search
{
    padding: 0px;
}
.articles>.art>.art_search input
{
    display: block;
    width: 100px;
    height: 50px;
    line-height: 50px;
    margin: 0px;
    font-family: 'Open Sans';
    font-size: 1em;
    background-color: hsla(217, 6%, 15%, 0);
    padding: 0px 10px;
    color: white;
    -webkit-background-clip: padding-box;
    text-align: left;
    font-family: Cool, serif;
    font-size: 1em;
    border: none;
}
.articles>.art>.art_search input:focus
{
    background-color: hsl(217, 6%, 20%);
    border-radius: 2px;
    border: 1px solid rgba(255, 255, 255, .5);
    margin: 1px 0px;
    padding: 0px 9px;
    height: 46px;
}
.articles>.art>.art_search input::placeholder
{
    line-height: 50px;
}

/**************************
 **** Avarice Login *******
 **************************/

.base .login
{
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
    padding-top: 150px;
    padding-bottom: 150px;
    padding-left: 30px;
    padding-right: 30px;
    text-align: center;
}
.base .login>div
{
    line-height: 25px;
}

/**************************
 ******** Logout **********
 **************************/

/* Hide the logout button while not logged in. */
#main:not(.logged) .projects .logout.link,
#main:not(.wiki) .projects .logout.link
{
    display: none;
}

/**************************
 ********** Panel *********
 **************************/

.panelWindow
{
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}
body:not(.panelWindowOpened) .panelWindow { display: none; }
body.panelWindowOpened #main
{
    filter: blur(10px) brightness(0.5);
}
.panelWindow .panelContent
{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    background-color: #111111;
    padding: 20px 20px 20px 20px;
    border-radius: 10px;
    font-size: 1em;
    box-shadow: 0px 0px 50px rgba(0, 0, 0, 1);
    user-select: none;
    display: inline;
    overflow: hidden;
    white-space: nowrap;
}
.panelWindow .panelButtons
{
    margin-top: 25px;
}
.panelWindow .response
{
    text-align: center;
    background-color: hsl(0, 45%, 50%);
    cursor: pointer;
    user-select: none;
    border-radius: 5px;
    display: inline;
    padding: 5px 30px;
    margin: 0px 5px;
    cursor: pointer;
}
.panelWindow .response.cancel
{
    background-color: hsl(217, 6%, 15%);
}
.panelWindow .response.panel_hide_response
{
    display: none;
}
.panelWindow .response:hover { background-color: hsl(0, 55%, 55%); }
.panelWindow .response.cancel:hover { background-color: hsl(217, 10%, 20%); }

.panelWindow .panelCustom input
{
    display: block;
    width: calc(100% - 20px);
    margin: 10px;
    margin-top: 20px;
    font-family: 'Open Sans';
    font-size: 1em;
    background-color: hsl(217, 6%, 15%);
    padding: 5px;
    color: white;
    height: 25px;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, .5);
    -webkit-background-clip: padding-box;
    text-align: center;
}

.panelWindow .wiki_panel_upload_preview
{
    max-height: 250px;
    display: block;
    border: 3px dashed hsl(217, 9%, 15%);
    color: #bbbbbb;
    background-color: black;
    margin-top: 20px;
    padding: 5px;
}

/**************************
 ********* Mature *********
 **************************/

body.matureWarning.panelWindowOpened #panel { display: none; }
body:not(.matureWarning) #matureWarning.panelWindow { display: none; }
body.matureWarning #matureWarning.panelWindow { display: block; }
body.matureWarning #main
{
    filter: blur(10px) brightness(0.5);
}
#matureWarning.panelWindow .panelContent
{
    cursor: pointer;
}
#matureWarning.panelWindow .response
{
    padding: 5px 15px;
    margin: 0px;
}
#matureWarning.panelWindow .response:hover { background-color: hsl(0, 55%, 55%); }

/**************************
 ********* loading ********
 **************************/

#loading
{
    font-family: "Times New Roman", Times, serif;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    z-index: 1000000;
    background-color: hsl(225, 27%, 94%);
    color: hsl(207, 20%, 32%);
    font-size: 3em;
}

#loading span
{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Load fonts */
#load_fonts_open_sans { font-family: 'Open Sans'; }
#load_fonts_open_sans
{
    opacity: 0;
    position: absolute;
    left:-10000px;
    top: 0px;
}

/**************************
 **** Mobile Portrait *****
 **************************/

#main.portrait .projects a:not(.icon),
#main.portrait .articles a,
#main.portrait .articles .comic .slider
{
    padding: 0px 10px;
}
/* Not enough space to show those buttons */
#main.portrait .projects a.stream,
#main.portrait .projects a.logout,
#main.portrait .projects a.link.icon.picarto,
#main.portrait .projects a.link.icon.itchio,
#main.portrait .projects a.link.icon.newgrounds,
#main.portrait .articles a.play,
#main.portrait .articles a.faq
{
    display: none;
}
#main.mobile .base .wiki_root.summary td a p
{
    text-overflow: clip;
    padding: 5px 5px;
}
/* Keep the image height in the viewport */
/*#main.mobile:not(.portrait) .base>.art .current_image img
{
    max-height: 100vh;
}*/
#main.portrait .articles>.art>.art_search input
{
    width: 90px;
    padding-left: 10px;
    padding-right: 10px;
}
#main.portrait .articles>.art>.art_search
{
    padding: 0px 0px;
}

/**************************
 ********* Stream *********
 **************************/

#main .projects a.stream
{
    display: none;
}

#main.isStreaming:not(.portrait) .projects .stream
{
    /*box-shadow: 0px 0px 10px hsla(0, 45%, 50%, 1);*/
    background-color: hsl(0, 45%, 50%);
    display: block;
    /*z-index: 1000;*/
}
#main.isStreaming .projects a.stream:hover
{
    background-color: hsl(0, 55%, 55%);
}
#main.isStreaming .projects a.link.icon.picarto
{
    display: none;
}


/****************************
 ********* Dropdown *********
 ****************************/

/* Show a dropdown menu */
#dropdown
{
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 100;
    display: none;
}
#dropdown.show
{
    display: block;
}

/* Comics */
#dropdown>.dropdown_items
{
    white-space: nowrap;
    font-size: 0px; /* Needed to remove the bottom padding of the element */
}
#dropdown>.dropdown_items>.dropdown_item
{
    display: inline-block;
    cursor: pointer;
    position: relative;
}
#dropdown>.dropdown_items>.dropdown_item a
{
    background-color: hsl(0, 45%, 50%);
    box-shadow: 0px 0px 10px hsla(0, 0%, 0%, 1), 0px 0px 10px hsla(0, 0%, 0%, 0.5), 0px 0px 0px 2px hsl(0, 0%, 0%);
    height: 300px;
    width: 200px;
    display: block;
    position: relative;
    margin: 2px;
}
#dropdown>.dropdown_items>.dropdown_item:not(:last-of-type) a { margin-right: 1px; }
#dropdown>.dropdown_items>.dropdown_item:not(:first-of-type) a { margin-left: 1px; }
#dropdown>.dropdown_items>.dropdown_item:first-of-type a
{
    z-index: 1; /* First item on top (shadow) */
}
#dropdown>.dropdown_items>.dropdown_item:hover a,
#main.mobile>#dropdown>.dropdown_items:not(:hover)>.dropdown_item.current_dropdown_item a,
#main:not(.mobile)>#dropdown>.dropdown_items:not(:hover)>.dropdown_item.current_dropdown_item a
{
    box-shadow: 0px 0px 10px hsl(0, 45%, 50%), 0px 0px 10px hsl(0, 45%, 50%), 0px 0px 0px 2px hsl(0, 45%, 50%);
}
#dropdown>.dropdown_items>.dropdown_item:hover a,
#dropdown>.dropdown_items:not(:hover)>.dropdown_item.current_dropdown_item a
{
    z-index: 100; /* Selected item on top */
}

/*Highlight*/
#dropdown>.dropdown_items>.dropdown_item a>.dropdown_item_highlight
{
    height: 100%;
    width: 100%;
    mix-blend-mode: plus-lighter;
    opacity: 0;
    transition: opacity 0.5s ease-out;
}
#dropdown>.dropdown_items>.dropdown_item:hover a>.dropdown_item_highlight
{
    opacity: 0.25;
    transition: opacity 0.15s ease-in;
}

/* Change the color of the comic project while the dropdown is open */
#main>.projects>div>a.dropdown_hover,
#main>.projects>div>a.dropdown_hover
{
    background-color: hsl(0, 45%, 50%) !important;
}