/* too lazy to put info and stuff, note to self: add it later (or not) */
.mainpage-box {
    font-family: Rubik, sans-serif
}

.theme-fandomdesktop-light {
   --cc-text-color: #FFF;
   --cc-bg-color: rgba(100,100,100,.2);
   --cc-bg-color--hover: rgba(100,100,100,.4);
   --cc-bg-img: url(https://static.wikia.nocookie.net/central/images/b/b5/Site-background-light/revision/latest);
   --cc-staff-link: #000;
   --cc-staff-link--hover: #3d3d3d;
   --cc-faq-color: #9b004e;
   --cc-social-color: #9b004e
}

.theme-fandomdesktop-dark {
   --cc-text-color: #c3c3c3;
   --cc-bg-color: #300229;
   --cc-bg-img: url(https://static.wikia.nocookie.net/central/images/0/08/Site-background-dark/revision/latest);
   --cc-bg-color-2: #1f021a;
   --cc-bg-color--hover: #4d0442;
   --cc-staff-link: #FFF;
   --cc-staff-link--hover: #b8b8b8;
   --cc-faq-color: #300229;
   --cc-social-color: #300229
}

.mainpage-box .staff li, .mainpage-box .featured, .mainpage-box .not-featured {
    background: var(--cc-bg-color);
    border-radius: 5px
}

.mainpage-box .staff li:hover, .mainpage-box .featured:hover, .mainpage-box .not-featured:hover {
    background: var(--cc-bg-color--hover)
}

.blog {
    border-radius: 5px;
    overflow: hidden
}

.mainpage-blogs .blog-info, .mainpage-box .staff li {
    border: none
}

.mainpage-faq h4 {
    border-radius: 5px 5px 0 0;
    background-color: var(--cc-faq-color);
    color: var(--cc-text-color)
}

.mainpage-faq .faq-list {
    background-color: var(--cc-bg-color-2);
    border-bottom: 1px solid var(--cc-faq-color);
    border-left: 1px solid var(--cc-faq-color);
    border-right: 1px solid var(--cc-faq-color);
    border-radius: 0 0 5px 5px
}

.mainpage-social {
    background-color: var(--cc-social-color);
    color: var(--cc-text-color);
    border-radius: 5px
}

.mainpage-box .staff li {
    background-image: var(--cc-bg-img);
    background-size: cover;
    transition: .2s;
    border-radius: 5px
}

.mainpage-box .staff li:hover {
    background-image: var(--cc-bg-img);
    background-size: cover;
    background-position: center 10%
}

.mainpage-connect .staff .name a, .mainpage-connect .staff .name a:active, .mainpage-connect .staff .name a:visited {
     color: var(--cc-staff-link)
}

.mainpage-connect .staff .name a:hover {
     color: var(--cc-staff-link--hover)
}