MediaWiki:Test.css

/* <pre> */
body.page-RuneRealm_Wiki .mw-parser-output {
    max-width: 75em;
    margin: 0 auto;
}

body.page-RuneRealm_Wiki.action-view .catlinks,
body.page-RuneRealm_Wiki.action-view #contentSub,
body.page-RuneRealm_Wiki.action-view #siteNotice {
    display: none;
}

body.page-RuneRealm_Wiki .line-break {
    display: none !important;
}

.mainpage-header {
    display: flex;
    margin: 2.6em 1.75em 1.5em;
}

.mainpage-header .header-intro {
    flex: 2;
}

.mainpage-header .header-intro h1 {
    font-size: 2.5em;
    font-weight: bold;
    border: none;
    margin: 0 0 0.15em;
}

.mainpage-header .header-intro p {
    font-size: 1.1em;
    line-height: 1.7em;
}

.mainpage-header .header-stats {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -1em;
}

.mainpage-body {
    display: grid;
    grid-template-areas: "update update update" "content content content" "left left right";
    gap: 0.9rem;
    grid-template-columns: repeat(3, 1fr);
}

.mainpage-body h2 a {
    color: var(--text-color);
}

.mainpage-body .tile {
    padding-left: 1.75em;
    padding-right: 1.75em;
    max-width: 100%;
}

.mainpage-body .tile-row {
    width: 100%;
    margin-bottom: 0;
}

.mainpage-body .tile-row {
    display: grid;
    gap: 0.9rem;
}

.mainpage-left {
    grid-area: left;
    flex: 2;
    display: flex;
    flex-flow: column wrap;
}

.mainpage-left > * {
    margin: 0 0 0.9rem;
}

.mainpage-right {
    grid-area: right;
    flex: 1;
    display: flex;
    flex-flow: column wrap;
}

.mainpage-right > * {
    margin: 0 0 0.9rem;
}

.arrow {
    background: url('/images/rss/White-chevron.svg') no-repeat;
    display: inline-block;
    height: 0.7rem;
    width: 0.45rem;
    vertical-align: middle;
}

.arrow.dark {
    filter: invert(80%);
}

.mainpage-recent-updates {
    grid-area: update;
    grid-template-columns: repeat(3, 1fr);
}

.mainpage-recent-updates .tile-halves {
    flex: 1;
    align-content: flex-start;
}

.mainpage-recent-updates .tile-halves:hover .tile-top img {
    transform: scale(1.04);
}

.mainpage-recent-updates .tile-bottom.link-button a {
    text-align: left;
    padding: 1rem 1.5rem 0.75rem;
}

.mainpage-recent-updates h2 {
    margin: -0.5em 0 0.3em;
}

.mainpage-recent-updates p:not(.byline) {
    font-size: 0.9em;
    line-height: 1.75em;
    color: var(--text-color);
}

.mainpage-contents {
    grid-area: content;
    grid-template-columns: repeat(6, 1fr);
}

.mainpage-contents .tile-halves {
    flex: 1;
}

.mainpage-contents .tile-top {
    position: relative;
}

.mainpage-contents h2 {
    margin: 0;
    padding: 0;
}

.mainpage-contents .tile-bottom.link-button a {
    padding: 0.75em 0.2em;
}

.mainpage-skills ul {
    columns: 3 9em;
    margin: 1em 0.7em 0.7em 1em;
}

.mainpage-skills li {
    display: flex;
    margin-bottom: 0.29em;
}

.mainpage-skills li a:first-child {
    border-radius: 2px;
    padding: 4px;
    width: 25px;
    height: 25px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mainpage-skills li a:last-child {
    flex: 1;
    display: flex;
    align-items: center;
    font-weight: bold;
    padding-left: 0.7em;
    text-decoration: none;
}

.mainpage-skills li:hover a:first-child {
    border-radius: 2px 0 0 2px;
}

.mainpage-skills li:hover a:last-child {
    color: rgba(255, 255, 255, 0.9);
    border-radius: 0 2px 2px 0;
}

.skill-agility a:first-child,
.skill-melee a:first-child {
    background: #bc483d;
}

.skill-agility:hover a:last-child,
.skill-melee:hover a:last-child {
    background: #932419;
}

.skill-ranged a:first-child {
    background: #748d36;
}

.skill-ranged:hover a:last-child {
    background: #4c6215;
}

.skill-magic a:first-child {
    background: #6274ab;
}

.skill-magic:hover a:last-child {
    background: #304791;
}

.skill-fishing a:first-child,
.skill-fletching a:first-child {
    background: #3e8e9a;
}

.skill-fishing:hover a:last-child,
.skill-fletching:hover a:last-child {
    background: #1a6671;
}

.skill-cooking a:first-child,
.skill-thieving a:first-child {
    background: #91689e;
}

.skill-cooking:hover a:last-child,
.skill-thieving:hover a:last-child {
    background: #713684;
}

.skill-farming a:first-child,
.skill-woodcutting a:first-child {
    background: #59924f;
}

.skill-farming:hover a:last-child,
.skill-woodcutting:hover a:last-child {
    background: #306f25;
}

.skill-mining a:first-child {
    background: #6385a8;
}

.skill-mining:hover a:last-child {
    background: #315f8d;
}

.skill-smithing a:first-child {
    background: #d2b244;
}

.skill-smithing:hover a:last-child {
    background: #b69213;
}

.popular-pages ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 0.6em;
    margin: 1em 0 0.7em 0;
}

.mp-popular-page-light {
    display: flex;
    align-items: center;
    background-color: var(--button-background);
    transition: 100ms;
}

.mp-popular-page-light a {
    flex: 1;
    display: block;
    color: #fff;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    padding: 0.7em 1em;
}

.mp-popular-page-light:hover {
    filter: brightness(115%);
    transition: 100ms;
}

.mainpage-discord {
    border: none;
    box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.3);
}

.mainpage-discord .tile-top {
    display: flex;
    align-items: center;
    background: #5865f2;
    padding: 1em 1.75em;
}

.mainpage-discord .tile-top a {
    flex: 1;
    position: relative;
    text-decoration: none;
}

.mainpage-discord .tile-top a:hover .arrow {
    transform: translateX(50%);
}

.mainpage-discord .tile-bottom {
    background: #525ee0;
    border: none;
    padding: 1em 1.75em;
}

.mainpage-discord .tile-bottom p {
    color: #fff;
    font-weight: bold;
    font-size: 0.9em;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0;
}

.mainpage-discord .partner-icon {
    margin-right: 0.75em;
}

.mainpage-discord .server-name {
    color: #fff;
    font-weight: bold;
    font-size: 1.25em;
    margin: 0.5em 0 -0.15em;
}

.mainpage-discord .server-tagline {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0.5em;
}

.mainpage-discord .arrow {
    position: absolute;
    top: calc(50% - .5em);
    right: 0;
    height: 1em;
    width: 0.7em;
    background-size: 0.7em 1em;
    transition: 0.3s ease-out;
}

.mainpage-twitter {
    border: none;
    box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.3);
}

.mainpage-twitter .tile-top {
    display: flex;
    align-items: center;
    background: #00aced;
    padding: 1em 1.75em;
}

.mainpage-twitter .tile-top a {
    flex: 1;
    position: relative;
    text-decoration: none;
}

.mainpage-twitter .tile-top a:hover .arrow {
    transform: translateX(50%);
}

.mainpage-twitter .tile-bottom {
    background: #0084b4;
    border: none;
    padding: 1em 1.75em;
}

.mainpage-twitter .tile-bottom p {
    color: #fff;
    font-weight: bold;
    font-size: 0.9em;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0;
}

.mainpage-twitter .twitter-logo {
    margin-right: 0.75em;
}

.mainpage-twitter .twitter-name {
    color: #fff;
    font-weight: bold;
    font-size: 1.25em;
    margin: 0.5em 0 -0.15em;
}

.mainpage-twitter .twitter-tagline {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0.5em;
}

.mainpage-twitter .arrow {
    position: absolute;
    top: calc(50% - .5em);
    right: 0;
    height: 1em;
    width: 0.7em;
    background-size: 0.7em 1em;
    transition: 0.3s ease-out;
}

.mainpage-editing {
    border: none;
    box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.3);
}

.mainpage-editing .tile-top {
    background: #438ab5;
}

.mainpage-editing .tile-bottom {
    background: #3980ab;
    border: none;
    padding: 0.8rem 1.5rem 0.4rem;
}

.mainpage-editing h2,
.mainpage-editing a {
    color: #fff;
}

.mainpage-editing p {
    color: rgba(255, 255, 255, 0.9);
}

.mainpage-editing ul {
    list-style-image: url('/images/rss/Transparent-chevron.svg');
}

.mainpage-poll .ajaxpoll {
    border: none;
    background: none;
    padding: 0;
    width: auto;
}

@media only screen and (max-width: 1200px) {
    .mainpage-contents {
          grid-template-columns: repeat(3, 1fr);
    }

}

@media only screen and (max-width: 1000px) {
    .mainpage-body {
          grid-template-areas: "update update update" "content content content" "left left left" "right right right";
    }

    .mainpage-recent-updates {
          grid-template-columns: repeat(2, 1fr);
    }

    .mainpage-recent-updates .tile-halves:last-child {
          display: none;
    }

    .mainpage-recent-updates .tile-halves:hover .tile-top img {
          transform: scale(1.04);
    }

    .mainpage-recent-updates .tile-top {
          height: 18vw;
          min-height: 9em;
    }

    .mainpage-header .header-stats {
          display: none;
    }

    .popular-pages ul {
          grid-template-columns: repeat(2, 1fr);
    }

}

@media only screen and (max-width: 720px) {
    .mainpage-recent-updates {
          grid-template-columns: none;
    }

    .mainpage-recent-updates .tile-halves:last-child {
          display: flex;
    }

}

@keyframes slide-up {
    from {
          opacity: 0;
          transform: translateY(1rem);
    }

    to {
          opacity: 1;
          transform: translateY(0);
    }

}

.mainpage-header {
    margin: 2em 1em 0;
}

@media only screen and (max-width: 1000px) {
    .mainpage-header .header-intro h1 {
          text-align: center;
          font-size: 1.8em;
    }

    .mainpage-header .header-intro p {
          font-size: 1em;
    }

}

.mainpage-body .tile-row {
    width: inherit;
}

.mainpage-left .tile {
    padding: 2.5em 1.75em 2em;
}

.mainpage-left .tile h2 {
    padding: 0;
    margin: 0.65em 0.5em;
}

.mainpage-left .tile-halves h2 {
    padding: 0;
    margin: 0.65em 0.5em;
}

.mainpage-recent-updates {
    padding: 1.5em 1em 2.5em;
}

.mainpage-recent-updates::before {
    content: 'Recent updates';
    display: block;
    margin-left: 1.5em;
    color: var(--byline-color);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    grid-column: 1 / 4;
}

.mainpage-recent-updates .tile-halves {
    display: inline-block;
    width: 100%;
    white-space: initial;
    flex: unset;
}

.mainpage-recent-updates .tile-halves:nth-child(1) {
    animation: 0.9s 0.2s both slide-up;
}

.mainpage-recent-updates .tile-halves:nth-child(2) {
    animation: 0.9s 0.4s both slide-up;
}

.mainpage-recent-updates .tile-halves:nth-child(3) {
    animation: 0.9s 0.6s both slide-up;
}

.mainpage-recent-updates .tile-top {
    height: 9em;
    overflow: hidden;
}

.mainpage-recent-updates .tile-bottom {
    padding-bottom: 0.5rem;
}

.mainpage-recent-updates .byline {
    margin: 0;
}

.mainpage-recent-updates .byline + h2 {
    margin: 0.025em 0 0;
    padding: 0;
}

@media only screen and (max-width: 720px) {
    .mainpage-recent-updates::before {
          text-align: center;
          margin: 0;
          grid-column: auto;
    }

}

.mainpage-contents {
    background: var(--body-mid);
    padding: 55px 1em 2em 2.5em;
    overflow-x: auto;
    grid-template-columns: repeat(6, 1fr) !important;
    position: relative;
    scroll-snap-align: center;
}

.mainpage-contents::before {
    content: 'Explore';
    margin: 1em;
    position: absolute;
    top: 0;
    color: inherit;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    grid-column: 1 / 6;
}

.mainpage-contents .tile-halves {
    border: none;
    background: none;
    box-shadow: none;
    width: 200px;
}

.mainpage-contents .tile-top {
    padding: 0;
    height: initial;
}

.mainpage-contents .tile-bottom {
    border: none;
}

.mainpage-contents h2 {
    width: 100%;
}

@media only screen and (min-width: 1000px) {
    .mainpage-skills .tile-top ul {
          margin: 0;
    }

}

.mainpage-wikinews::before {
    content: 'From the wiki';
    margin-left: 0.75em;
    color: var(--byline-color);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.mainpage-discord .tile-top {
    padding: 1em 2em;
    height: 70px;
}

.mainpage-discord .tile-top .partner-icon {
    margin-right: 1em;
}

.mainpage-discord .tile-top .server-name {
    margin: 0;
}

.mainpage-discord .tile-top .server-tagline {
    margin: 0;
}

.mainpage-twitter {
    margin-bottom: 0;
}

.mainpage-twitter .tile-top {
    padding: 1em 2em;
    height: 70px;
}

.mainpage-twitter .tile-top .twitter-logo {
    margin-right: 1em;
}

.mainpage-twitter .tile-top .twitter-name {
    margin: 0;
}

.mainpage-twitter .tile-top .twitter-tagline {
    margin: 0;
}