Super Cute Theme Preview

+ Theme Code

:root {
    /* Color */
    --q-black: 55, 55, 55;
    --q-white: 252, 252, 252;
    --q-yellow: 254, 203, 52;
    --q-green: 52, 254, 145;
    --q-red: 254, 104, 52;
 
    /* palatte */
    --background-color: var(--q-yellow);
    --text-color: var(--q-black);
    --light-color-1: var(--q-white);
    --light-color-2: var(--q-white);
    --dark-color-1: var(--q-black);
    --dark-color-2: var(--q-white);
    --dark-color-3: var(--text-color);
    --general-medium-background-color: var(--dark-color-2);
    --general-medium-text-color: var(--text-color);
    --general-dark-background-color: var(--q-green);
    --general-dark-text-color: var(--text-color);
 
    /* Scrollbar */
    --scrollbar-color: var(--q-yellow);
    --scrollbar-background-color: 0, 0, 0, 0.2;
 
    /* Header */
    --header-background-top: 0, 0, 0, 0;
    --header-background-bottom: 0, 0, 0, 0;
    --header-extra-background-image: none;
    --header-text-color: var(--text-color);
    --header-text-shadow-color: 0, 0, 0, 0;
    --header-title-font-size: 2rem;
 
    /* Topb */
    --topbar-text-color: var(--text-color);
    --topbar-height-on-mobile: 4rem;
    --topbar-font-size-on-mobile: 0.8rem;
    --topbar-font-size: 1rem;
    --topbar-hover-background-color: var(--q-green);
    --topbar-hover-border-color: 0, 0, 0, 0;
    --topbar-height: 4rem;
    --topbar-drop-text-color: var(--q-black);
    --topbar-drop-hover-text-color: var(--q-black);
    --topbar-drop-background-color: var(--q-white);
    --topbar-drop-hover-background-color: var(--q-red);
    --topbar-drop-shadow-color: 0, 0, 0, 0;
    --topbar-drop-border-width: 0px;
 
    /* User */
    --account-drop-text-color: var(--q-black);
    --account-drop-hover-text-color: var(--q-black);
    --account-drop-background-color: var(--q-white);
    --account-drop-hover-background-color: var(--q-red);
 
    /* Search */
    --search-button-background-color: var(--q-white);
    --search-button-hover-background-color: var(--q-green);
 
    /* Tag */
    --page-tag-background-color: var(--q-yellow), 0.6;
 
    /* Footer */
    --footer-text-color: var(--q-black);
    --footer-background-color: var(--q-white);
    --license-background-color: var(--q-white);
    --license-text-color: var(--q-black);
    --license-link-color: var(--q-black);
 
    /* Popup */
    --popup-fader-color: 0, 0, 0, 0.7;
    --popup-title-background-color: var(--q-yellow);
    --popup-title-text-color: var(--q-black);
    --popup-tip-color: var(--q-white);
    --popup-loading-color: var(--q-yellow);
 
    /* tab */
    --tabview-button-background-color: 0, 0, 0, 0;
    --tabview-button-text-color: var(--q-black);
    --tabview-hover-button-background-color: var(--q-red);
    --tabview-hover-button-text-color: var(--q-black);
    --tabview-selected-button-background-color: var(--q-green);
    --tabview-selected-button-text-color: var(--q-black);
    --tabview-horizon-color: 0, 0, 0, 0;
    --tabview-content-background-color: var(--q-white);
    --tabview-border-width: 0px;
 
    /* footnote */
    --footnote-block-background-color: var(--q-white);
 
    /* Sidebar */
    --sidebar-handle-text-color: var(--q-white);
    --sidebar-handle-background-color: var(--q-black);
    --sidebar-media-background-color: var(--q-green);
    --sidebar-media-icon-color: var(--text-color);
    --sidebar-title-background-color: var(--q-yellow);
    --sidebar-title-shadow-color: 0, 0, 0, 0;
    --sidebar-hover-background-color: var(--q-red);
 
    /* Sturc */
    --body-width: 50rem;
    --sidebar-width: 20rem;
    --sidebar-width-on-mobile: 18rem;
    --header-subtitle-font-size-on-mobile: 0.8rem;
 
    /* Other Things */
    --general-transition-time-slow: 0s;
    --logo-image: url(https://github.backroomswiki.cn/Super_Liminal/images/black_logo.svg);
}
 
/* Body */
#skrollr-body {
    background-image:  radial-gradient(circle, rgba(0, 0, 0, 0.05) 15%, transparent 0);
    background-size: 2rem 2rem;
}
 
/* Header */
#header h1 a {
    display: flex;
    align-items: center;
    width: fit-content;
}
 
#header h1 a::before {
    content: "";
    display: block;
    flex: none;
    background-color: rgba(var(--q-white));
    background-image: var(--logo-image);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 4rem;
    height: 4rem;
    box-sizing: border-box;
    border: 0.2rem solid rgba(var(--text-color));
    border-radius: 50%;
}
 
#header h1 a:is(:hover, :active, :focus, :focus-within)::before {
    background-color: rgba(var(--q-green));
}
 
#header h1 a span {
    align-items: flex-start;
    padding: 0;
    margin-left: 1rem;
    transition: margin-left 0.2s;
}
 
#header h1 a:is(:hover, :active, :focus, :focus-within) span {
    margin-left: 1.4rem;
}
 
#header h2 {
    display: none;
}
 
/* User Info */
#login-status {
    font-size: 0;
    top: calc(var(--main-header-height) / 2 - 2rem);
    right: var(--header-margin);
}
 
#login-status .printuser {
    gap: 0;
}
 
#login-status .printuser > a:first-child img {
    background-image: none !important;
    padding: 0;
    width: 4rem;
    height: 4rem;
    box-sizing: border-box;
    border: 0.2rem solid rgba(var(--text-color));
    border-radius: 50%;
    object-fit: cover;
}
 
#login-status a:is(.login-status-create-account,.login-status-sign-in) {
    display: flex;
    width: 4rem;
    text-align: center;
    text-decoration: none;
    justify-content: center;
    align-items: center;
    background: rgba(var(--q-white));
    color: rgba(var(--q-black));
    font-size: 0.8rem;
    box-sizing: border-box;
    border: 0.2rem solid rgba(var(--text-color));
    border-radius: 10rem;
    padding: 0.2rem 0;
    position: relative;
    top: -0.2rem;
}
 
#login-status a:is(.login-status-create-account,.login-status-sign-in):is(:hover, :active, :focus, :focus-within) {
    background: rgba(var(--q-green));
}
 
#login-status a.login-status-create-account {
    font-size: 0;
    margin-bottom: 0.5rem;
}
 
#login-status a.login-status-create-account::before {
    content: "Sign up";
    font-size: 0.8rem;
}
 
a#account-topbutton {
    display: none;
}
 
#account-options {
    font-size: 0.8rem;
    padding-top: 0.6rem;
    background: rgba(0, 0, 0, 0);
    border: none;
    width: 10rem;
}
 
#login-status:is(:hover, :active, :focus, :focus-within) #account-options {
    pointer-events: auto;
    opacity: 1;
}
 
#account-options ul {
    display: block;
    border: 0.2rem solid rgba(var(--text-color));
    box-shadow: inset 0 -0.5rem 0 rgba(0, 0, 0, 0.15);
    border-radius: 0.6rem;
    background: rgba(var(--account-drop-background-color));
    overflow: hidden;
    padding-bottom: 0.5rem;
}
 
#account-options li a {
    height: 2rem;
    padding: 0 1rem;
    justify-content: space-between;
}
 
#account-options li:last-of-type a {
    border-radius: 0 0 0.4rem 0.4rem;
}
 
#account-options li a::after {
    content: "›";
    font-weight: 900;
    font-family: var(--mono-font);
    font-size: 1.25em;
}
 
#login-status > a[href*='account/messages'] {
    position: absolute;
    top: 0;
    right: 0;
    width: 1.2rem;
    height: 1.2rem;
    font-size: 0;
    z-index: 2;
    background: rgb(var(--q-red));
    border-radius: 50%;
    border: 0.2rem solid rgba(var(--text-color));
}
 
/* Search */
#search-top-box {
    right: calc(var(--header-margin) + 4rem + 1rem);
    top: calc(var(--main-header-height) / 2 - 1.6rem);
}
 
#search-top-box-form .button {
    height: 3.2rem;
    width: 4rem;
    font-size: 0;
    border: 0.2rem solid rgba(var(--text-color));
    box-shadow: inset 0 -0.5rem 0 rgba(0, 0, 0, 0.15);
    border-radius: 0.6rem;
    padding: 0 0 0.5rem;
}
 
#search-top-box::after {
    content: "";
    width: 100%;
    height: calc(100% - 0.5rem);
    position: absolute;
    left: 0;
    top: 0;
    -webkit-mask-image: var(--search-icon-mask);
    mask-image: var(--search-icon-mask);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 27.5%;
    mask-size: 27.5%;
    background-color: rgb(var(--text-color));
    pointer-events: none;
}
 
/* Top Bar */
#top-bar div[class*=top-bar] > ul {
    grid-gap: 0.5rem;
}
 
#top-bar div[class*=top-bar] > ul > li {
    border-radius: 0.6rem;
    border: 0.2rem solid rgba(0, 0, 0, 0);
    transition: 0s;
    box-sizing: border-box;
    padding-bottom: 0.5rem
}
 
#top-bar .mobile-top-bar .open-menu {
    flex: none;
    margin-right: 0.5rem;
}
 
#top-bar .mobile-top-bar .open-menu a {
    border-radius: 0.6rem;
    border: 0.2rem solid rgba(var(--q-black));
    transition: 0s;
    box-sizing: border-box;
    padding-bottom: 0.5rem;
    background: rgba(var(--q-red));
    box-shadow: inset 0 -0.5rem 0 rgba(0, 0, 0, 0.15);
}
 
#top-bar .mobile-top-bar .open-menu a::before {
    -webkit-mask-size: 80%;
    mask-size: 80%;
}
 
#top-bar div[class*=top-bar] > ul > li:is(:hover, :active, :focus, :focus-within, .sfhover),
#top-bar .mobile-top-bar .open-menu a:is(:hover, :active, :focus, :focus-within) {
    background: rgba(var(--topbar-hover-background-color));
    border: 0.2rem solid rgba(var(--text-color));
    box-shadow: inset 0 -0.5rem 0 rgba(0, 0, 0, 0.15);
}
 
#top-bar div[class*=top-bar] > ul > li > a {
    padding-bottom: 1.5rem;
}
 
#top-bar div[class*=top-bar] > ul > li > ul {
    border: 0.2rem solid rgba(var(--text-color));
    box-shadow: inset 0 -0.5rem 0 rgba(0, 0, 0, 0.15);
    border-radius: 0.6rem;
    left: -0.2rem;
    min-width: calc(100% + 0.4rem);
    padding-bottom: 0.5rem;
    overflow: hidden;
    transition: 0s;
}
 
#top-bar div[class*=top-bar] > ul > li:last-of-type > ul {
    right: -0.2rem;
    left: auto;
}
 
#top-bar div[class*=top-bar] > ul > li > ul > li {
    overflow: hidden;
}
 
#top-bar div[class*=top-bar] > ul > li > ul > li:last-of-type {
    border-radius: 0 0 0.4rem 0.4rem;
}
 
#top-bar div[class*=top-bar] > ul > li > ul > li > a {
    font-weight: 500;
    justify-content: space-between;
}
 
#top-bar div[class*=top-bar] > ul > li > ul > li > a::after {
    content: "›";
    font-weight: 900;
    font-family: var(--mono-font);
    font-size: 1.25em;
    padding-left: 0.5rem;
}
 
/* Content */
#page-title, .meta-title {
    text-align: center;
    border: none;
    padding: 0;
}
 
/* Rating Module */
div.rate-box-with-credit-button,
div.page-rate-widget-box,
div.creditButtonStandalone {
    border: 0.2rem solid rgba(var(--text-color));
    border-radius: 10rem;
    overflow: hidden;
    padding-right: 0.5rem;
}
 
div.page-rate-widget-box .rate-points {
    padding-left: 0.8rem;
}
 
div.creditBottomRate div.page-rate-widget-box {
    border-bottom: 0.2rem solid rgba(var(--text-color));
}
 
/* Blockquote */
blockquote, .blockquote, .lightblock {
    margin: 1rem 0;
    border-radius: 1rem;
    border: 0.2rem solid rgba(var(--text-color));
    padding: 0.5rem 1rem 1rem;
    box-shadow: inset 0 -0.5rem 0 rgba(0, 0, 0, 0.15);
}
 
/* Page Tags */
.page-tags {
    border-radius: 1rem;
    border: 0.2rem solid rgba(var(--text-color));
    background: rgba(var(--q-white));
    flex-direction: row;
    box-shadow: inset 0 -0.5rem 0 rgba(0, 0, 0, 0.15);
    overflow: hidden;
    padding: 0.5rem 0.5rem 1rem;
}
 
.page-tags::before {
    content: "";
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiAkJCQvR2VuZXJhbFN0ci8xOTY9QWRvYmUgSWxsdXN0cmF0b3IgMjcuNi4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IuWbvuWxgl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDEwNS43IDg3LjMiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDEwNS43IDg3LjM7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOm5vbmU7c3Ryb2tlOiMwMDAwMDA7c3Ryb2tlLXdpZHRoOjM7c3Ryb2tlLW1pdGVybGltaXQ6MTA7fQ0KPC9zdHlsZT4NCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0yMy4zLDI3LjhsNC42LDIxLjFjMC40LDEuOCwxLjQsMy40LDMsNC40bDQ1LjIsMzEuMmMzLjMsMi4zLDcuOCwxLjQsMTAuMS0xLjlsMTYuOC0yNC40DQoJYzIuMy0zLjMsMS40LTcuOC0xLjktMTAuMUw1NS44LDE3LjFjLTEuNS0xLTMuNC0xLjUtNS4yLTEuMmwtMjEuMywzLjJDMjUuMiwxOS43LDIyLjQsMjMuNywyMy4zLDI3Ljh6Ii8+DQo8Y2lyY2xlIGNsYXNzPSJzdDAiIGN4PSI0MSIgY3k9IjMzLjYiIHI9IjciLz4NCjxsaW5lIGNsYXNzPSJzdDAiIHgxPSI2MS4yIiB5MT0iMzcuNyIgeDI9IjkyLjUiIHkyPSI1OS4zIi8+DQo8bGluZSBjbGFzcz0ic3QwIiB4MT0iNTYuNiIgeTE9IjQ0LjMiIHgyPSI3OC45IiB5Mj0iNTkuNiIvPg0KPGxpbmUgY2xhc3M9InN0MCIgeDE9IjUyLjEiIHkxPSI1MC45IiB4Mj0iNzkuNyIgeTI9IjY5LjkiLz4NCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0zMy43LDM3LjFjMCwwLDM2LjYtMTIuOS0zLjYtMzMuMkMyMS42LTAuNSwxMS4zLDEuMyw0LjUsOHYwQy03LjgsMjAuNCwyMS44LDM3LjQsMjUuMiwzNy40Ii8+DQo8L3N2Zz4NCg==");
    width: 4rem;
    height: 4rem;
    border: 0.2rem solid rgba(var(--text-color));
    border-radius: 50%;
    padding: 0;
    background-color: rgba(var(--q-yellow));
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    flex: none;
}
 
.page-tags span {
    border: none;
    padding: 0.5rem 0 0.5rem 1rem;
}
 
.page-tags span a {
    padding: 0.2rem 0.5rem;
    height: fit-content;
    font-weight: 500;
    transition: 0s;
}
 
/* Page Info */
#page-info, .page-watch-options {
    font-weight: 500;
    font-size: 0.8rem;
}
 
/* Buttons, i mean, seriously, buttonS */
div[id*=page-options-bottom] > a,
#edit-page-form div.buttons input,
div.buttons input,
.page-options-bottom a,
.owindow .button-bar > a:not([onclick*=cleanAll]),
.owindow div[style*=margin-top] a,
a.action-area-close,
#view-diff-div > p > a {
    border: 0.2rem solid rgba(var(--text-color));
    box-shadow: inset 0 -0.5rem 0 rgba(0, 0, 0, 0.15);
    border-radius: 0.6rem;
    padding: 0.5rem 0.5rem 1rem;
    line-height: 1.5;
    height: fit-content;
    background: rgba(var(--q-white));
    color: rgba(var(--q-black));
    font-weight: 500;
    font-size: 0.8rem;
}
 
#delete-button,
a.action-area-close,
#view-diff-div > p > a {
    background: rgba(var(--q-red));
}
 
a.action-area-close,
#view-diff-div > p > a {
    font-size: 0;
    height: 3rem;
    width: 3rem;
    box-sizing: border-box;
}
 
div[id*=page-options-bottom] > a:is(:hover, :active, :focus, :focus-within),
#edit-page-form div.buttons input:is(:hover, :active, :focus, :focus-within),
div.buttons input:is(:hover, :active, :focus, :focus-within),
.page-options-bottom a:is(:hover, :active, :focus, :focus-within),
.owindow .button-bar > a:not([onclick*=cleanAll]):is(:hover, :active, :focus, :focus-within),
.owindow div[style*=margin-top] a:is(:hover, :active, :focus, :focus-within),
a.action-area-close:is(:hover, :active, :focus, :focus-within),
#view-diff-div > p > a:is(:hover, :active, :focus, :focus-within) {
    background: rgba(var(--q-green));
    color: rgba(var(--q-black));
}
 
#delete-button:is(:hover, :active, :focus, :focus-within):before,
#delete-button:is(:hover, :active, :focus, :focus-within):after {
    content: "!";
    font-weight: 700;
    padding: 0 0.25rem;
}
 
div[id*=page-options-bottom] > a {
    flex-basis: 7.5rem;
    flex-grow: 0;
}
 
div[id*=page-options-bottom] {
    justify-content: center;
    margin: 0.25rem 0;
}
 
/* Footer */
#footer {
    border-top: 0.2rem solid rgba(var(--text-color));
    padding: 1rem 0;
}
 
/* Popup */
.owindow, div.modalbox, div.infobox {
    border: 0.2rem solid rgba(var(--text-color));
    box-shadow: inset 0 -0.5rem 0 rgba(0, 0, 0, 0.15);
    border-radius: 1rem;
    padding: 0 0 0.5rem 0;
}
 
.owindow .title,
div.modalbox > div:first-child,
div.infobox-title {
    border-radius: 0.8rem 0.8rem 0 0;
    border-bottom: 0.2rem solid rgba(var(--text-color));
}
 
.owindow.owait,
.owindow.osuccess {
    padding: 0.6rem 2rem 1.2rem;
}
 
/* Action */
#action-area > h1 {
    padding: 0.5rem 0;
}
 
#who-rated-page-area > div,
.page-source {
    border: 0.2rem solid rgba(var(--text-color));
    box-shadow: inset 0 -0.5rem 0 rgba(0, 0, 0, 0.15);
    border-radius: 1rem;
    padding: 1rem 1rem 1.5rem;
    background: rgba(var(--q-white));
    color: rgba(var(--q-black));
}
 
/* Image Block */
.scp-image-block {
    border: none;
    gap: 0.5rem;
}
 
.scp-image-block img {
    width: auto !important;
}
 
.scp-image-block img,
.scp-image-caption {
    border: 0.2rem solid rgba(var(--text-color));
    border-radius: 0.6rem;
}
 
.scp-image-caption {
    box-shadow: inset 0 -0.5rem 0 rgba(0, 0, 0, 0.15);
    padding: 0.3rem 0.5rem 0.8rem;
}
 
/* Tabview */
.yui-navset .yui-nav {
    justify-content: center;
    gap: 0.5rem;
}
 
.yui-navset .yui-nav li,
.yui-navset .yui-nav li.selected {
    transition: none;
    flex: none;
    border-radius: 0.6rem;
    padding: 0.5rem 1.5rem 1rem;
    border: 0.2rem solid rgba(0, 0, 0, 0);
    font-weight: 700;
}
 
.yui-navset .yui-nav li.selected,
.yui-navset .yui-nav li:is(:hover, :active, :focus, :focus-within) {
    border: 0.2rem solid rgba(var(--text-color));
    box-shadow: inset 0 -0.5rem 0 rgba(0, 0, 0, 0.15);
}
 
.yui-navset .yui-nav li a,
.yui-navset .yui-nav li.selected a {
    transition: none;
    color: rgba(var(--q-black));
}
 
.yui-navset .yui-nav li a em,
.yui-navset .yui-nav li.selected a em {
    padding: 0;
}
 
.yui-navset .yui-content {
    margin: 1rem 0;
    border-radius: 1rem;
    border: 0.2rem solid rgba(var(--text-color));
    padding: 0.5rem 1rem 1rem;
    box-shadow: inset 0 -0.5rem 0 rgba(0, 0, 0, 0.15);
    background: rgba(var(--q-white));
}
 
/* Code */
.code {
    border-radius: 1rem;
}
 
/* Custom DIVs */
.darkblock {
    border-radius: 1rem;
    border: 0.2rem solid rgba(var(--text-color));
    padding: 0.5rem 1rem 1rem;
    box-shadow: inset 0 -0.5rem 0 rgba(0, 0, 0, 0.15);
    background: rgba(var(--q-yellow));
    color: rgba(var(--q-black));
}
 
.styled-quote {
    border-radius: 1rem;
    border: 0.2rem solid rgba(var(--text-color));
    padding: 0.5rem 1rem 1rem;
    box-shadow: inset 0 -0.5rem 0 rgba(0, 0, 0, 0.15);
    background: rgba(var(--q-green));
    color: rgba(var(--q-black));
}
 
.dark-styled-quote {
    border-radius: 1rem;
    border: 0.2rem solid rgba(var(--text-color));
    padding: 0.5rem 1rem 1rem;
    box-shadow: inset 0 -0.5rem 0 rgba(0, 0, 0, 0.15);
    background: rgba(var(--q-red));
    color: rgba(var(--q-black));
}
 
/* Footnote */
.footnotes-footer, .bibitems {
    border-radius: 1rem;
    border: 0.2rem solid rgba(var(--text-color));
    padding: 0.5rem 1rem 1rem;
    box-shadow: inset 0 -0.5rem 0 rgba(0, 0, 0, 0.15);
    margin: 1rem;
}
 
.footnotes-footer .title {
    font-size: 1.5em;
}
 
.footnote-footer {
    font-size: 85%;
}
 
/* Sidebar */
#side-bar {
    scrollbar-width: none;
    padding-left: 1rem;
    background: rgba(0, 0, 0, 0);
    border: none;
}
 
#side-bar .side-block {
    border-radius: 0.6rem;
    border: 0.2rem solid rgba(var(--text-color));
    box-shadow: inset 0 -0.5rem 0 rgba(0, 0, 0, 0.15);
    background: rgba(var(--q-white));
    color: rgba(var(--q-black));
    margin: 1rem 0;
    padding-bottom: 0.5rem;
}
 
#side-bar .side-block.media {
    padding: 0.5rem 0 1rem !important;
}
 
#side-bar .side-block.languages {
    display: none; /* Temp set */
}
 
#side-bar .heading,
#side-bar .collapsible-block-unfolded-link a,
#side-bar .collapsible-block-folded a {
    border-radius: 0.4rem 0.4rem 0 0;
    padding: 0.2rem 0;
}
 
#side-bar .side-block > *:last-child {
    border-bottom: none;
    border-radius: 0 0 0.4rem 0.4rem;
}
 
#side-bar .heading:last-child {
    border-radius: 0.4rem;
}
 
#side-bar .menu-item {
    overflow: hidden;
}
 
#side-bar .menu-item a {
    padding-right: 0.6em;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
 
#side-bar .menu-item a::after {
    content: "›";
    font-weight: 900;
    font-family: var(--mono-font);
    font-size: 1.25em;
}
 
#side-bar .menu-item a:first-of-type {
    border-left: none;
}
 
/* MOBILE */
@media only screen and (max-width: 1024px) {
    #header {
        background-color: rgba(var(--q-yellow));
        background-image:  radial-gradient(circle, rgba(0, 0, 0, 0.05) 15%, transparent 0);
        background-size: 2rem 2rem;
    }
 
    #header h1 a::before {
        display: none;
    }
 
    #header h1 a {
        height: calc(100% - 2rem);
        margin: 1rem 0;
    }
 
    #login-status {
        right: 1rem;
    }
 
    #search-top-box {
        width: auto;
        height: auto;
        right: calc(var(--header-margin) + 4rem + 2rem);
        top: calc(var(--main-header-height) / 2 - 1.5rem);
    }
 
    #search-top-box-form .button {
        mask-image: none;
        -webkit-mask-image: none;
        width: 3rem;
        height: 3rem;
    }
 
    #search-top-box::after {
        mask-size: 35%;
        -webkit-mask-size: 35%;
    }
 
    #top-bar {
        padding: 0.5rem 1rem;
    }
 
    #top-bar div[class*=top-bar] > ul > li > a {
        padding-bottom: 1rem;
    }
 
    #top-bar div[class*=top-bar] > ul > li > ul {
        min-width: 100%;
        left: 0;
    }
 
    #top-bar div[class*=top-bar] > ul > li:last-of-type > ul {
        right: 0;
        left: auto;
    }
 
    #top-bar div[class*=top-bar] > ul > li > ul > li:nth-child(2n):nth-last-child(1) {
        border-bottom-left-radius: 0;
    }
 
    #top-bar div[class*=top-bar] > ul > li > ul > li:nth-child(2n+1):nth-last-child(1) {
        border-bottom-right-radius: 0;
    }
 
    #top-bar div[class*=top-bar] > ul > li > ul > li:nth-child(2n+1):nth-last-child(2) {
        border-bottom-left-radius: 0.4rem;
    }
 
    #side-bar:target .close-menu {
        width: 100%;
    }
 
}
 
/* SUPER CUTE!! */
.with-bai {
    margin-top: 13rem;
    padding-top: 5rem;
    position: relative;
}
 
.with-bai::before {
    content: "";
    display: block;
    height: 20rem;
    width: 12rem;
    background: url(http://backrooms-wiki.wikidot.com/local--files/theme:super-cute/bai.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: absolute;
    top: -14rem;
    right: 2rem;
}
 
.with-bai.no-padding {
    padding-top: 0.5rem;
    min-height: 6rem;
}
 
.with-bai::after {
    content: "";
    display: block;
    height: 8rem;
    width: 10rem;
    background: url(http://backrooms-wiki.wikidot.com/local--files/theme:super-cute/cans.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: absolute;
    top: -7.04rem;
    left: 1rem;
}
 
.with-shina {
    margin-top: 15rem;
    padding-top: 3rem;
    position: relative;
}
 
.with-shina.no-padding {
    padding-top: 0.5rem;
    min-height: 4rem;
}
 
.with-shina::before {
    content: "";
    display: block;
    height: 22rem;
    width: 19rem;
    background: url(http://backrooms-wiki.wikidot.com/local--files/theme:super-cute/shina.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: absolute;
    top: -17.8rem;
    left: 0;
}
 
.with-shina::after {
    content: "";
    display: block;
    height: 10rem;
    width: 10rem;
    background: url(http://backrooms-wiki.wikidot.com/local--files/theme:super-cute/manstria.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: absolute;
    top: -8.69rem;
    right: 0;
}
 
.with-tess {
    margin-top: 18rem;
    padding-top: 1.5rem;
    position: relative;
}
 
.with-tess.no-padding {
    padding-top: 0.5rem;
    min-height: 1rem;
}
 
.with-tess::before {
    content: "";
    display: block;
    height: 20rem;
    width: 23rem;
    background: url(http://backrooms-wiki.wikidot.com/local--files/theme:super-cute/tess.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: absolute;
    top: -18.06rem;
    right: 2rem;
}
 
.with-tess::after {
    content: "";
    display: block;
    height: 6rem;
    width: 10rem;
    background: url(http://backrooms-wiki.wikidot.com/local--files/theme:super-cute/boat.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: absolute;
    top: -4rem;
    left: 1rem;
}
 
@media only screen and (max-width: 590px) {
    .with-tess::after {
        display: none;
    }
}
 
@media only screen and (max-width: 520px) {
    .with-bai::after,
    .with-shina::after {
        display: none;
    }
}
 
@media only screen and (max-width: 520px) {
    .with-tess::before {
        right: 0.5rem;
    }
}