@font-face {
    font-family: Symbols;
    src: url("MiiverseSymbols-Regular.woff");
}

:root {
    --common-text-color: rgb(50, 50, 50);
    --common-button-bg: rgb(245, 245, 245);
    --common-button-border: rgb(220, 220, 220);
    --common-disabled-text-color: rgb(130, 130, 130);

    --nav-bar-bg: rgb(255, 255, 255);
    --nav-bar-border-bottom: rgb(230, 230, 230);
    --nav-bar-actions-border: rgb(200, 200, 200);
    --nav-bar-actions-text-color: rgb(110, 110, 110);
    --nav-bar-active-color: #de3e3e;
    --nav-bar-settings-bg: rgb(255, 255, 255);

    --gutter-bg: rgb(250, 250, 250);

    --footer-bg: rgb(235, 235, 235);
    --footer-text: rgb(145, 145, 145);
    --footer-text-hover: rgb(115, 115, 115);
    --footer-text-size: 13px;
    --footer-border-top: rgb(215, 215, 215);

    --login-bg: rgb(255, 255, 255);
    --login-border: rgb(222, 222, 222);
    --login-slogan-text-color: rgb(150, 150, 150);
    --login-error-text-color: rgb(232, 49, 67);

    --aquamarine-text-color: #de3e3e;

    --about-actions-text-color: rgb(255, 255, 255);
    --about-actions-signin-bg: #de3e3e;
    --about-actions-installation-bg: rgb(79, 202, 67);

    --about-actions-signin-bg-hover: #c23636;
    --about-actions-installation-bg-hover: rgb(70, 182, 60);

    --search-bar-background: rgb(255, 255, 255);
    --search-bar-border: rgb(215, 215, 215);

    --small-post-community-bg: rgb(250, 250, 250);

    --community-favorites-bg: rgb(255, 255, 255);
    --community-favorites-border: rgb(222, 222, 222);
    --community-favorites-empty-bg: rgb(225, 225, 225);
    --community-favorites-arrow-bg: rgb(238, 238, 238);
    --community-favorites-arrow-text-color: rgb(170, 170, 170);
    --community-favorites-arrow-bg-hover: rgb(220, 220, 220);

    --community-header-text-color: rgb(160, 160, 160);

    --community-name-text-color: rgb(0, 0, 0);
    --community-hover-bg: rgb(245, 245, 245);

    --community-info-bg: rgb(255, 255, 255);
    --community-info-border-color: rgb(222, 222, 222);
    --community-app-name-color: rgb(150, 150, 150);
    --community-description-bg: rgb(242, 242, 242);
    --community-description-text-color: rgb(90, 90, 90);
    --community-type-badge-bg: #de3e3e;
    --community-type-color: rgb(255, 255, 255);
    --community-content-bg: rgb(255, 255, 255);
    --community-favorite-color: rgb(247, 188, 38);

    --community-normal-color: #de3e3e;
    --community-journal-color: #de3e3e;
    --community-ingame-color: #de3e3e;
    --community-paintings-color: rgb(235, 198, 48);
    --community-popular-color: rgb(234, 51, 109);

    --community-no-posts-text-color: rgb(90, 90, 90);
    --community-header-text-color: rgb(111, 111, 111);

    --community-post-hover-bg: rgb(245, 245, 245);

    --community-header-border-bottom-color: rgb(241, 241, 241);

    --feeling-selector-selected-text-color: #de3e3e;
    --add-new-post-file-bg: rgb(235, 235, 235);
    --file-allowed-text-color: rgb(100, 100, 100);

    --post-timestamp: rgb(110, 110, 110);
    --post-actions-text-color: rgb(160, 160, 160);

    --empathy-button-bg: rgb(255, 255, 255);
    --empathy-button-disabled-text-color: rgb(185, 185, 185);
    --empathy-button-boxshadow-color: rgb(210, 210, 210);

    --topic_tag_color: #de3e3e;

    --user-stats-background-color: rgb(246, 246, 246);

    --rules-header-text-color: rgb(255, 255, 255);
    --rules-header-opening: rgb(246, 164, 50);
    --rules-header-num2: rgb(251, 121, 134);
    --rules-header-num3: rgb(241, 77, 175);
    --rules-header-num4: rgb(62, 78, 248);

    --popular-posts-selector: rgb(245, 245, 245);
    --popular-posts-selector-bottom: rgb(237, 237, 237);
    --wiiu-software-bg: rgb(216, 242, 252);
    --wiiu-software-color: rgb(17, 147, 196);
    --n3ds-software-bg: rgb(252, 233, 233);
    --n3ds-software-color: rgb(206, 24, 30);
    --vc-software-bg: rgb(236, 236, 236);
    --vc-software-color: rgb(120, 120, 120);

    --settings-input-border: rgb(170, 170, 170);
    --settings-input-background: rgb(253, 253, 253);
}

.trigger {
    cursor: pointer;
}

.none {
    display: none !important;
}

.loading {
    margin: 0 auto;
    margin-top: 15px;
    margin-bottom: 15px;

    background-image: url("/img/loading.gif");
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    content: "";

    width: 28px;
    height: 28px;
}

.trigger:hover:not(.no-bg) {
    background-color: var(--community-hover-bg) !important;

    transition: background-color 0.1s;
}

a.trigger:hover,
span.trigger:hover {
    text-decoration: underline;
}

@keyframes transition {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

button {
    font-family: Arial, Helvetica, sans-serif;
}

.black-button {
    background: -webkit-linear-gradient(top, #646464 0%, #434343 96%, #323232 100%);
    min-width: 135px;
    padding: 9px 10px 7px;
    margin: 0;
    border: 1px solid #444;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
    vertical-align: middle;
    min-height: 40px;
    border-radius: 5px;
}

.black-button:disabled {
    border-color: #c4c4c4;
    color: #919191;
    text-shadow: 0 1px 0 #fff;
    cursor: default !important;
    background: -webkit-linear-gradient(top, #ddd 0%, #ddd 96%, #d0d0d0 100%);
}

html,
body {
    margin: 0;

    font-family: Arial, Helvetica, sans-serif;

    background-color: #f9ecec;
    background-repeat: repeat;
    background-attachment: fixed;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAArUlEQVQoFYWQuwrCQBBFd42FlaYQRMRCO3vBNpA/8HNtBbt04gcItnaKoLKegRnYTRYzcLjzuLNh4kMILooh+SeqO6kYJOawhzE0cIBsDLRboRPwsIUFZMMWTM1UWNJWMx4ZPHV4Rq9to9U+OlpeHcHDhjmNF3LzHc01yBdPEOwvkXdiQ6fW7gp9QWM3aD+RWVI5N5X638KF+VuXvqjUru+GEs8SbnCH3gXxJPEDtBsiPW8IwCQAAAAASUVORK5CYII=");
}

body {
    width: 100%;
    height: fit-content;
    min-height: 1000px;

    position: relative;
}

menu {
    display: flex;

    width: 950px;
    height: 50px;

    margin: 0;

    margin-right: 25px;
    margin-left: 25px;

    padding: 0;

    justify-content: right;
    align-items: center;
}

menu .logo {
    margin-right: auto;
}

menu .logo img {
    align-self: center;
}

menu li {
    padding: 0;
    list-style: none;

    margin-left: 20px;

    height: 100%;
    padding-left: 5px;
    padding-right: 5px;

    position: relative;
}

menu li:hover {
    box-shadow: inset 0 -4px 0 -1px var(--nav-bar-active-color);

    transition: 0.2s box-shadow;
}

menu li a {
    display: flex;

    width: 100%;
    height: 100%;

    text-decoration: none;
    color: var(--nav-bar-actions-text-color);

    font-weight: bold;
    font-size: 14px;
}

menu li a span {
    width: fit-content;
    height: fit-content;

    align-self: center;

    margin-left: 8px;

    height: 100%;

    vertical-align: middle;
    text-align: center;

    line-height: 50px;
}

.user-image {
    width: 35px;
    height: 35px;

    border-radius: 5px;

    border: 1px solid var(--nav-bar-actions-border);

    align-self: center;
}

menu li.messages a::before {
    font-family: Symbols;
    content: "m";

    font-size: 30px;

    line-height: 49px;

    font-weight: normal;
}

menu li.communities a::before {
    font-family: Symbols;
    content: "c";

    font-size: 30px;

    line-height: 49px;

    font-weight: normal;
}

menu li.activity-feed a::before {
    font-family: Symbols;
    content: "a";

    font-size: 30px;

    line-height: 49px;

    font-weight: normal;
}

menu li.settings {
    padding: 0;
}

menu li.settings > a {
    justify-content: center;

    align-items: center;
    padding-left: 5px;
    padding-right: 5px;
}

menu li.settings a span {
    font-family: Symbols;
    font-size: 26px;
    text-align: center;

    margin: 0;
    font-weight: normal;
}

menu li.settings > a::after {
    font-family: Symbols;
    font-size: 12px;
    content: "V";
    margin-left: 8px;

    align-self: center;

    display: inline;
    vertical-align: middle;
}

menu li.settings:hover {
    background-color: transparent !important;

    box-shadow: none;
}

menu li.settings > a:hover {
    background-color: transparent !important;

    box-shadow: inset 0 -4px 0 -1px var(--nav-bar-active-color);

    transition: 0.2s box-shadow;

    cursor: pointer;
}

menu li.settings .settings-menu {
    position: absolute;
    top: 65px;
    right: -3px;

    width: 238px;

    background-color: var(--nav-bar-settings-bg);
    border: 2px solid var(--nav-bar-border-bottom);
    border-bottom: 3px solid var(--nav-bar-border-bottom);
    border-radius: 5px;

    box-shadow: 0px 0px 2px rgb(175, 175, 175);

    padding: 10px;

    opacity: 1;

    transition: opacity 0.05s;
}

menu li.settings .settings-menu::before,
menu li.settings .settings-menu::after {
    bottom: 100.1%;
    right: 12%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;

    border-color: transparent;
    border-bottom-color: transparent;
    border-bottom-color: #ddd;
    border-width: 13px;
    margin-right: -13px;
}

menu li.settings .settings-menu::after {
    border-color: transparent;
    border-bottom-color: #fff;
    border-width: 9px;
    margin-right: -9px;
}

menu li.settings .settings-menu a {
    color: var(--common-text-color);

    height: 25px;

    align-items: center;
    margin-bottom: 5px;
}

menu li.settings .settings-menu a:last-child {
    margin: 0;
}

menu li.settings .settings-menu span {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: normal;
    height: fit-content;
    width: 100%;
    text-align: left;
}

.settings-menu a::before {
    font-family: Symbols;
    font-size: 18px;

    margin-right: 10px;
    text-decoration: none;

    color: var(--aquamarine-text-color);

    font-weight: normal;
}

.settings-menu a.logout::before {
    content: "b";
}

.settings-menu a.code-of-conduct::before {
    content: "g";
}

footer {
    position: absolute;
    bottom: 0;
    left: 0;

    width: 100%;
    height: 65px;

    background-color: var(--footer-bg);
    border-top: var(--footer-border-top);
}

footer .footer-wrapper {
    max-width: 600px;
    height: 50px;

    padding-top: 12px;
    padding-bottom: 2px;

    padding-left: 50px;
    padding-right: 50px;

    margin: 0 auto;
}

footer .footer-wrapper div {
    display: flex;
    justify-content: center;
}

footer .footer-wrapper div a {
    padding: 15px;
    text-decoration: none;

    color: var(--footer-text);
    font-size: var(--footer-text-size);
}

footer .footer-wrapper div a:hover {
    color: var(--footer-text-hover);
    text-decoration: underline;
}

.upper-body {
    position: fixed;
    top: 0;

    z-index: 99;

    display: flex;
    justify-content: center;

    height: 50px;
    width: 100%;

    background-color: var(--nav-bar-bg);
    border-bottom: 2px solid var(--nav-bar-border-bottom);
}

.wrapper {
    display: block;

    width: 100%;

    padding-top: 50px;
    padding-bottom: 85px;
}

.main-column {
    width: 625px;
    margin-top: 15px;
    box-sizing: border-box;
}

.main-column.fill {
    background-color: var(--community-info-bg);
    border: 1px solid var(--community-info-border-color);
    border-bottom: 2px solid var(--community-info-border-color);
    border-radius: 5px;
}

.center {
    display: flex;
    justify-content: center;
}

.login-wrapper {
    width: 640px;
    height: fit-content;

    margin-top: 35px;

    border-radius: 5px;
    border: 1px solid var(--login-border);
    border-bottom: 2px solid var(--login-border);

    background-color: var(--login-bg);

    display: flex;
    align-items: center;
    flex-direction: column;

    margin-bottom: 250px;

    padding-bottom: 25px;
}

.login-wrapper img {
    margin-top: 30px;
    margin-bottom: 20px;

    width: 350px;
}

.login-wrapper span {
    color: var(--login-slogan-text-color);

    margin-bottom: 10px;
}

.login-wrapper input[type="submit"],
.login-wrapper button {
    margin-top: 15px;
    cursor: pointer;
}

.login-wrapper input:not([type="submit"]) {
    width: 325px;
    height: 35px;

    font-size: 20px;

    border: 2px solid var(--login-border);
    margin-bottom: 2px;

    border-radius: 3px;

    font-family: Arial, Helvetica, sans-serif;
    text-indent: 2px;
}

.login-wrapper form {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.login-wrapper .question {
    margin: 0;
    margin-top: 22px;
}

.login-wrapper span.error-text {
    margin-bottom: 10px;
}

span.error-text {
    color: var(--login-error-text-color);
    font-weight: bold;
    font-size: 14px;
}

span.error-text.transition {
    opacity: 1;
    animation: transition;
    animation-duration: 2s;
}

span.error-text::before {
    font-family: Symbols;
    content: "U";
    font-size: 15px;
    font-weight: normal;
    vertical-align: middle;
    margin-right: 5px;
    position: relative;
    bottom: 1px;
}

.login-wrapper input[type="checkbox"] {
    width: 15px;
    height: 15px;
    margin-right: 5px;
}

.login-wrapper label {
    font-weight: bold;
    color: var(--login-slogan-text-color);
}

.login-wrapper > div {
    display: flex;
    align-items: center;
    margin-top: 5px;
    margin-bottom: 5p;
}

.error-wrapper {
    width: 640px;
    height: fit-content;

    margin-top: 35px;

    border-radius: 5px;
    border: 1px solid var(--login-border);
    border-bottom: 2px solid var(--login-border);

    background-color: var(--login-bg);

    display: flex;
    align-items: center;
    flex-direction: column;

    margin-bottom: 250px;

    padding: 50px;
}

.error-wrapper span {
    text-align: center;
}

.about-aquamarine {
    background-color: var(--gutter-bg);

    height: fit-content;
    width: 100%;

    padding-top: 15px;

    border-bottom: 1px solid var(--nav-bar-border-bottom);
}

.about-wrapper {
    display: flex;
    justify-content: space-between;

    margin: 0 auto;
    height: 100%;

    max-width: 960px;
}

.about-paragraph {
    display: flex;
    flex-direction: column;

    width: 400px;
    height: 100%;

    padding-right: 25px;
}

.about-paragraph h1 {
    text-align: center;
    font-size: 22px;

    margin-bottom: 5px;

    color: var(--aquamarine-text-color);
}

.about-aquamarine p {
    line-height: 1.5;
    font-size: 15px;

    margin-top: 15px;
}

.about-image img {
    border-radius: 5px;
    width: 500px;
}

.about-actions-wrapper {
    display: flex;
    flex-direction: column;

    justify-content: center;
}

.about-actions-wrapper a {
    display: block;

    width: fit-content;

    margin: 0 auto;

    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 25px;
    padding-right: 35px;

    text-align: center;

    color: var(--about-actions-text-color);
    text-decoration: none;

    border-radius: 15px;

    margin-bottom: 8px;
    position: relative;
    font-size: 15px;
}

.about-actions-wrapper a:after {
    font-family: Symbols;
    font-size: 10px;
    content: "A";
    color: #fff;
    position: absolute;
    right: 13px;
    top: 16px;
    margin-top: -9px;
}

.about-actions-wrapper a:nth-child(1) {
    background-color: var(--about-actions-signin-bg);
}

.about-actions-wrapper a:nth-child(2) {
    background-color: var(--about-actions-installation-bg);
}

.about-actions-wrapper a:nth-child(1):hover {
    background-color: var(--about-actions-signin-bg-hover);

    transition: 0.1s background-color;
}

.about-actions-wrapper a:nth-child(2):hover {
    background-color: var(--about-actions-installation-bg-hover);

    transition: 0.1s background-color;
}

.index-communities-wrapper {
    margin: 0 auto;
    width: 960px;

    display: flex;
    flex-direction: column;

    justify-content: space-between;
}

.index-communities-wrapper .community-favorites {
    display: flex;
    justify-content: left;
    flex-direction: row;
    align-items: center;

    flex-wrap: wrap;
    height: fit-content;

    padding: 10px;

    align-self: center;

    margin-top: 15px;

    background-color: var(--community-favorites-bg);

    border-radius: 5px;
    border: 1px solid var(--community-favorites-border);
    border-bottom: 2px solid var(--community-favorites-border);
    box-sizing: border-box;
}

.community-favorites .favorite {
    width: 58px;
    height: 58px;

    margin-left: 10px;
}

.community-favorites .favorite:nth-child(1) {
    margin-left: 0px;
}

.community-favorites .favorite img {
    width: 60px;
    height: 60px;
    border-radius: 5px;

    border: 1px solid var(--community-favorites-border);
}

.community-favorites .next-arrow {
    width: 50px;
    min-width: 50px;

    height: 50px;

    margin-left: 14px;

    font-size: 20px;
    font-family: Symbols;

    text-align: center;
    align-self: center;

    line-height: 2.5;
    letter-spacing: -3px;

    border-radius: 100%;

    background-color: var(--community-favorites-arrow-bg);
    color: var(--community-favorites-arrow-text-color);

    text-decoration: none;
}

.community-favorites .next-arrow:hover {
    background-color: var(--community-favorites-arrow-bg-hover);

    transition: background-color 0.2s;
}

.favorite.empty {
    background: var(--community-favorites-empty-bg);
    border-radius: 5px;
}

.index-communities-wrapper .communities {
    width: 620px;

    display: flex;
    flex-direction: column;
}

.communities > div:not(.user-menu) {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    width: 620px;
}

.communities > .user-menu span {
    margin-left: 15px;
}

.communities > .user-menu a {
    height: 42px;
}

.communities > .user-menu {
    width: 100%;
    box-sizing: border-box;
    margin-top: 15px;
}

.communities > h1,
.extra-content > h1 {
    font-size: 16px;

    margin-top: 15px;
    margin-left: 2px;
    margin-right: auto;

    color: var(--community-header-text-color);

    width: fit-content;
}

.index-communities-wrapper .newest-communities {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    width: 620px;
}

.newest-communities .community {
    margin-bottom: 6px;
}

.index-communities-wrapper {
    flex-direction: row;
    flex-wrap: wrap;

    display: flex;
}

.extra-content {
    padding-top: 15px;

    width: 320px;

    display: flex;
    flex-direction: column;
}

form.search {
    border: 3px solid var(--search-bar-border);

    background-color: var(--search-bar-background);

    border-radius: 2px;

    width: 314px;
    max-width: 314px;

    display: flex;
    justify-content: space-between;
}

form.search input[type="search"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    border: none;

    padding-left: 6px;
    padding-top: 7px;
    padding-bottom: 7px;

    font-size: 16px;

    width: 90%;

    background-color: transparent;

    font-family: Arial, Helvetica, sans-serif;
}

form.search input[type="submit"] {
    width: 34px;
    height: 34px;

    align-self: center;

    border: none;
    background-color: transparent;

    font-size: 16px;
    font-family: Symbols;
    color: var(--community-app-name-color);
    text-align: center;

    cursor: pointer;
}

.extra-content .small-posts {
    display: flex;
    flex-direction: column;

    width: 100%;
    height: fit-content;
}

.small-posts .small-post-wrapper {
    display: flex;

    width: 100%;
    height: fit-content;
}

.small-post-wrapper a:has(.user-icon),
.small-post-wrapper a:has(.user-icon) .user-icon {
    display: block;
    width: 36px;
    height: 36px;

    background-color: var(--community-info-bg);
    border-radius: 5px;
}

.small-post-wrapper a:has(.user-icon) {
    border: 1px solid var(--community-info-border-color);
    border-bottom: 2px solid var(--community-info-border-color);

    align-self: baseline;
}

.small-post {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    max-width: 86%;
    margin-left: 6px;
    margin-bottom: 15px;
    min-height: 100px;
    height: fit-content;
    background-color: var(--community-info-bg);
    border: 1px solid var(--community-info-border-color);
    border-bottom: 0px;
    border-radius: 5px;
    position: relative;
}

.small-post:before {
    content: "";
    position: absolute;
    top: 20px;
    display: block;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-color: transparent #ddd transparent transparent;
    border-width: 5px;
    margin-top: -5px;
    left: -10px;
}

.small-post:after {
    content: "";
    position: absolute;
    top: 20px;
    display: block;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-color: transparent #fff transparent transparent;
    border-width: 4px;
    margin-top: -4px;
    left: -7px;
}

.small-post .content-wrapper {
    padding: 10px;
    padding-bottom: 0;
}

.small-post .content-wrapper p {
    font-size: 14px;
    display: -webkit-box;
    max-height: 500px;
    line-height: 1.4;
    margin: 0;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}

.small-post .content-wrapper img {
    max-width: 250px;
    min-width: 150px;
    width: 100%;
    margin: 0 auto;
    display: block;
}

.small-post:has(.content-wrapper img) .post-actions {
    display: none;
}

.small-post .post-actions {
    display: flex;
    justify-content: right;

    height: 20px;
    padding: 5px;
    padding-right: 8px;

    color: var(--post-actions-text-color);

    margin-top: auto;
}

.small-post .post-actions span {
    color: var(--post-actions-text-color);
    font-size: 13px;
}

.small-post .small-community-wrapper {
    display: flex;
    align-items: center;

    border-top: 1px solid var(--community-info-border-color);
    border-bottom: 2px solid var(--community-info-border-color);
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;

    background-color: var(--small-post-community-bg);

    height: 29px;

    padding-left: 6px;
    padding-right: 6px;
}

.small-post .small-community-wrapper img {
    width: 20px;
    height: 20px;

    border-radius: 2px;

    display: block;
}

.small-post .small-community-wrapper a:has(img) {
    height: 20px;
    width: 20px;

    display: block;
}

.small-post .small-community-wrapper .community_name {
    font-size: 12px;
    color: var(--community-app-name-color);
    margin-left: 6px;

    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.small-post .small-community-wrapper .community_name:hover {
    text-decoration: underline;
    color: var(--community-description-text-color);
    transition: color 0.1s;
}

.communities div .community {
    margin-right: 6px;
    margin-bottom: 8px;

    width: 307px;

    height: fit-content;
}

div > .community:nth-child(even) {
    margin-right: 0px;
}

.community a {
    max-width: 515px;
    width: 100%;

    display: flex;
}

.community a img.banner {
    min-width: 304px;
    display: block;

    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border: 1px solid var(--community-info-border-color);
    border-bottom: none;

    clear: both;
    box-sizing: border-box;
}

.community:has(img.banner) .community-info {
    border-radius: 0px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}

.community .community-info {
    min-height: 75px;
    min-width: 304px;
    display: flex;
    background-color: var(--community-info-bg);
    border: 1px solid var(--community-info-border-color);
    border-bottom: 2px solid var(--community-info-border-color);
    border-radius: 3px;
    box-sizing: border-box;
}

.community-info .icon-wrapper {
    align-self: center;
    padding-left: 10px;
}

.community-info .icon {
    width: 56px;

    border-radius: 3px;

    border: 1px solid var(--community-info-border-color);

    display: block;
}

.community-info-wrapper .user-menu {
    margin-left: -15px;
    margin-right: -15px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-bottom: 10px;
}

.community-info-wrapper:has(.user-menu) {
    padding-bottom: 0;
    border-bottom: none;
}

.community-meta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: center;
    width: 220px;
    margin-left: 7px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.community-meta .name {
    font-weight: bold;
    color: var(--community-name-text-color);

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    width: fit-content;
}

.community-meta .platform {
    color: var(--community-app-name-color);

    display: -webkit-box;
    -webkit-box-orient: vertical;
    white-space: nowrap;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    width: fit-content;
    max-width: 100%;

    font-size: 13px;

    vertical-align: middle;

    margin-top: 3px;
}

.platform::before {
    display: inline-block;

    background-repeat: no-repeat;
    background-size: contain;
    content: "";

    width: 58px;
    height: 12px;

    position: relative;
    top: 2px;
}

.platform.wiiu::before {
    background-image: url("/img/platform/platform-tag-wiiu.png");
}

.platform.\33 ds::before {
    background-image: url("/img/platform/platform-tag-3ds.png");
}

.platform.topic::before {
    background-image: url("/img/platform/platform-tag-general.png");
}

.platform.both::before {
    background-image: url("/img/platform/platform-tag-both.png");
}

.platform.vc::before {
    width: 0px;
}

.community-wrapper {
    display: flex;

    max-width: 960px;

    margin: 0 auto;
    margin-top: 15px;

    height: fit-content;

    justify-content: center;
}

.community-sidebar {
    display: block;

    width: 318px;

    min-height: 179px;
    max-height: 900px;

    margin-right: 15px;
    margin-bottom: 15px !important;
}

.community-info-wrapper {
    padding: 14px;

    background-color: var(--community-info-bg);
    border: 1px solid var(--community-info-border-color);

    border-radius: 6px;

    border-bottom: 2px solid var(--community-info-border-color);
}

.community-banner {
    display: flex;
}

.community-banner img {
    width: 100%;
    border: 1px solid var(--community-info-border-color);
    border-bottom: none;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.community-sidebar:has(.community-banner) .community-info-wrapper {
    border-radius: 0px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

.community-info-wrapper .icon {
    border-radius: 4px;
    border: 1px solid var(--community-info-border-color);

    margin-right: 10px;

    align-self: baseline;
}

.community-info {
    display: flex;
    flex-direction: row;
}

.community-name {
    font-weight: bold;

    display: block;

    font-size: 16px;
    margin-top: 6px;
}

.community-app-name {
    color: var(--community-app-name-color);

    font-size: 14px;
}

.community-description-wrapper {
    background-color: var(--community-description-bg);

    margin-top: 10px;
    padding: 12px;

    border-radius: 5px;
}

.community-description-wrapper span {
    font-size: 13px;
    line-height: 1.5;
    color: var(--community-description-text-color);
}

.community-type {
    display: block;

    font-size: 10px;

    padding-top: 2px;
    padding-bottom: 2px;

    padding-left: 4px;
    padding-right: 4px;

    border-radius: 3px;

    margin-bottom: 3px;

    width: fit-content;

    color: var(--community-type-color);
    background-color: var(--community-type-badge-bg);
}

.community-actions {
    width: 100%;

    margin-top: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.community-actions .error-text {
    justify-self: center;
    align-self: center;

    margin-bottom: 5px;
}

.community-actions .favorite-button,
.common-button {
    display: block;
    height: 43px;

    border: 1px solid var(--common-button-border);
    border-radius: 5px;

    background-color: var(--common-button-bg);
    text-decoration: none;
}

.favorite-button {
    width: 100%;
}

.favorite-button:disabled span {
    color: var(--common-disabled-text-color);
}

.favorite-button:not(:disabled):hover,
.common-button:hover {
    cursor: pointer;
    box-shadow: 0px 1px 5px rgb(209, 209, 209);
    transition: box-shadow 0.1s;
}

.favorite-button span,
.common-button span {
    color: var(--common-text-color);
    vertical-align: middle;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
}

.favorite-button span::before {
    content: "P";
    margin-right: 7px;
    font-family: Symbols;
    font-size: 25px;
    vertical-align: middle;
    color: var(--community-favorite-color);
    position: relative;
    bottom: 2px;
}

.favorite-button.selected span::before {
    content: "s";
}

.common-button {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 400px;
    width: 100%;
    margin: 0 auto;
    margin-bottom: 15px;
    border: 1px solid var(--common-button-border);
    border-bottom: 2px solid var(--common-button-border);
    border-radius: 5px;

    background-color: var(--common-button-bg);
    text-decoration: none;
}

.see-more,
.recent-posts {
    margin-bottom: 25px;
}

.recent-posts span::before {
    content: "p";
    font-family: Symbols;
    display: inline-block;
    vertical-align: middle;
    font-size: 20px;
    margin-right: 5px;
}

.share-platforms {
    width: 100%;

    display: flex;
    flex-wrap: wrap;
    margin-top: 5px;
}

.share-platforms a {
    width: 49%;
    height: 30px;
    margin-right: auto;
    box-sizing: border-box;

    padding-left: 10px;
    padding-right: 10px;
    padding-top: 7px;
    padding-bottom: 7px;
    color: #fff;
    border-radius: 3px;
    font-size: 12px;
    text-align: center;

    text-decoration: none;
}

.share-platforms a:nth-child(2) {
    margin-right: 0;
}

.share-platforms .x-platform {
    background-color: rgb(30, 30, 30);
}

.share-platforms .facebook-platform {
    background-color: rgb(59, 89, 152);
}

.share-platforms .whatsapp-platform {
    background-color: rgb(37, 211, 102);
    border: 1px solid rgb(41, 200, 99);
    width: 30px;
    height: 30px;
    padding: 5px;
    margin-top: 5px;
    margin-right: 5px;
}

.share-platforms .tumbler-platform {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(2, 26, 53);
    width: 30px;
    height: 30px;
    padding: 5px;
    margin-top: 5px;
    border: 1px solid rgb(1, 11, 23);
}

.share-platforms .whatsapp-platform::before {
    margin-right: 0;
    width: 90%;
    height: 90%;
    background-position: 50% 50%;
    background-image: url("data:image/svg+xml,%3Csvg fill='%23FFFFFF' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50' width='50px' height='50px'%3E%3Cpath d='M25 2C12.318 2 2 12.318 2 25c0 3.96 1.023 7.854 2.963 11.29L2.037 46.73c-0.096 0.343-0.003 0.711 0.245 0.966 C2.473 47.893 2.733 48 3 48c0.08 0 0.161-0.01 0.24-0.029l10.896-2.699C17.463 47.058 21.21 48 25 48c12.682 0 23-10.318 23-23 S37.682 2 25 2z M36.57 33.116c-0.492 1.362-2.852 2.605-3.986 2.772c-1.018 0.149-2.306 0.213-3.72-0.231 c-0.857-0.27-1.957-0.628-3.366-1.229c-5.923-2.526-9.791-8.415-10.087-8.804C15.116 25.235 13 22.463 13 19.594 s1.525-4.28 2.067-4.864c0.542-0.584 1.181-0.73 1.575-0.73s0.787 0.005 1.132 0.021c0.363 0.018 0.85-0.137 1.329 1.001 c0.492 1.168 1.673 4.037 1.819 4.33c0.148 0.292 0.246 0.633 0.05 1.022c-0.196 0.389-0.294 0.632-0.59 0.973 s-0.62 0.76-0.886 1.022c-0.296 0.291-0.603 0.606-0.259 1.19c0.344 0.584 1.529 2.493 3.285 4.039 c2.255 1.986 4.158 2.602 4.748 2.894c0.59 0.292 0.935 0.243 1.279-0.146c0.344-0.39 1.476-1.703 1.869-2.286 s0.787-0.487 1.329-0.292c0.542 0.194 3.445 1.604 4.035 1.896c0.59 0.292 0.984 0.438 1.132 0.681 C37.062 30.587 37.062 31.755 36.57 33.116z'/%3E%3C/svg%3E");
}

.share-platforms .tumbler-platform::before {
    margin-right: 0;
    width: 80%;
    height: 80%;
    background-position: 50% 50%;
    background-image: url('data:image/svg+xml,<svg fill="%23ffffff" height="200px" width="200px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 260 260" xml:space="preserve" stroke="%23ffffff"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M210.857,197.545c-1.616-0.872-3.584-0.787-5.119,0.223c-11.62,7.638-23.4,11.511-35.016,11.511 c-6.242,0-11.605-1.394-16.416-4.275c-3.27-1.936-6.308-5.321-7.397-8.263c-1.057-2.797-1.045-10.327-1.029-20.748l0.005-63.543 h52.795c2.762,0,5-2.239,5-5V62.802c0-2.761-2.238-5-5-5h-52.795V5c0-2.761-2.238-5-5-5h-35.566c-2.528,0-4.658,1.887-4.964,4.397 c-1.486,12.229-4.258,22.383-8.247,30.196c-3.89,7.7-9.153,14.401-15.651,19.925c-5.206,4.44-14.118,8.736-26.49,12.769 c-2.058,0.671-3.45,2.589-3.45,4.754v35.41c0,2.761,2.238,5,5,5h28.953v82.666c0,12.181,1.292,21.347,3.952,28.026 c2.71,6.785,7.521,13.174,14.303,18.993c6.671,5.716,14.79,10.187,24.158,13.298c9.082,2.962,16.315,4.567,28.511,4.567 c10.31,0,20.137-1.069,29.213-3.179c8.921-2.082,19.017-5.761,30.008-10.934c1.753-0.825,2.871-2.587,2.871-4.524v-39.417 C213.484,200.108,212.476,198.418,210.857,197.545z"></path></g></svg>');
}

.share-platforms .facebook-platform::before {
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(242deg) brightness(107%) contrast(104%);
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="%23000000" height="800px" width="800px" version="1.1" id="Layer_1" viewBox="0 0 310 310" xml:space="preserve"><g id="XMLID_834_"><path id="XMLID_835_" d="M81.703,165.106h33.981V305c0,2.762,2.238,5,5,5h57.616c2.762,0,5-2.238,5-5V165.765h39.064 c2.54,0,4.677-1.906,4.967-4.429l5.933-51.502c0.163-1.417-0.286-2.836-1.234-3.899c-0.949-1.064-2.307-1.673-3.732-1.673h-44.996 V71.978c0-9.732,5.24-14.667,15.576-14.667c1.473,0,29.42,0,29.42,0c2.762,0,5-2.239,5-5V5.037c0-2.762-2.238-5-5-5h-40.545 C187.467,0.023,186.832,0,185.896,0c-7.035,0-31.488,1.381-50.804,19.151c-21.402,19.692-18.427,43.27-17.716,47.358v37.752H81.703 c-2.762,0-5,2.238-5,5v50.844C76.703,162.867,78.941,165.106,81.703,165.106z"/></g></svg>');
}

.share-platforms .x-platform::before {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='32' height='32' fill='none'/%3E%3Cpath d='M17.9686 14.1623L26.7065 4H24.6358L17.0488 12.8238L10.9891 4H4L13.1634 17.3432L4 28H6.07069L14.0827 18.6817L20.4822 28H27.4714L17.9681 14.1623H17.9686ZM15.1326 17.4607L14.2041 16.132L6.81679 5.55961H9.99723L15.9589 14.0919L16.8873 15.4206L24.6368 26.5113H21.4564L15.1326 17.4612V17.4607Z' fill='white'/%3E%3C/svg%3E%0A");
}

.share-platforms a span {
    vertical-align: middle;
}

.share-platforms a::before {
    margin-right: 5px;
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 14px;
    height: 14px;

    background-repeat: no-repeat;
    background-size: contain;
}

.community-add-post {
    margin-top: 15px;

    border: 1px solid var(--community-info-border-color);
    border-bottom: 2px solid var(--community-info-border-color);
    border-radius: 5px;

    height: 200px;

    background-color: var(--community-info-bg);
}

.community-content {
    width: 625px;
    max-width: 625px;

    height: fit-content;

    border: 1px solid var(--community-info-border-color);
    border-bottom: 2px solid var(--community-info-border-color);
    border-radius: 8px;

    background-color: var(--community-content-bg);
    box-sizing: border-box;
}

.community-content:has(.community-post-list.guest) {
    background-color: transparent;
    border: none;
}

.community-post-list.guest {
    background-color: var(--community-content-bg);

    margin-bottom: 12px;
    border-radius: 5px;
    border: 1px solid var(--community-info-border-color);
    border-bottom: 2px solid var(--community-info-border-color);
}

.community-content > .header {
    padding: 10px;

    font-weight: bold;

    font-size: 13.5px;

    background: -webkit-linear-gradient(rgb(255, 255, 255), rgb(245, 245, 245));
    color: var(--community-header-text-color);

    border-bottom: 1px solid var(--community-header-border-bottom-color);
}

.header {
    padding: 13px;
    padding-top: 10px;
    padding-bottom: 8px;
}

.normal .header,
.header.guide,
.header.users,
.header.communities {
    border-bottom: 3px solid var(--community-normal-color);

    color: var(--community-normal-color);
}

.journal .header {
    border-bottom: 3px solid var(--community-journal-color);

    color: var(--community-journal-color);
}

.ingame .header {
    border-bottom: 3px solid var(--community-ingame-color);

    color: var(--community-ingame-color);
}

.paintings .header {
    border-bottom: 3px solid var(--community-paintings-color);

    color: var(--community-paintings-color);
}

.hot .header {
    border-bottom: 3px solid var(--community-popular-color);

    color: var(--community-popular-color);
}

.recent .header {
    border-bottom: 3px solid var(--aquamarine-text-color);

    color: var(--aquamarine-text-color);
}

.normal .header span::before {
    content: "p";
}

.paintings .header span::before {
    content: "M";
}

.header span::before {
    font-size: 22px;
    vertical-align: middle;

    font-family: Symbols;
    margin-right: 8px;
}

.ingame .header span::before {
    content: "&";
}

.journal .header span::before {
    content: "%";
}

.hot .header span::before {
    content: "W";
}

.no-posts {
    padding: 50px;
    display: block;
    text-align: center;
    color: var(--community-no-posts-text-color);
    width: 100%;
    box-sizing: border-box;
}

.add-new-post {
    min-height: 100px;
    max-height: 250px;

    padding: 15px;

    border-bottom: 1px solid var(--community-info-border-color);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.feeling-selector {
    display: flex;
    justify-content: space-evenly;
    align-items: center;

    height: 60px;
    width: 100%;
    margin-bottom: 15px;

    border-radius: 4px;
    background: linear-gradient(rgb(110, 110, 110), rgb(160, 160, 160));
}

.feeling-selector input {
    appearance: none;
    -webkit-appearance: none;

    font-family: Symbols;

    color: #fff;
    font-size: 43px;

    cursor: pointer;

    text-shadow: 0px 0px 8px #060606;
    text-align: center;
    margin: 0;

    border-radius: 0px;

    width: 50px;
    height: fit-content;
}

.feeling-selector input.selected {
    color: var(--feeling-selector-selected-text-color);
}

.feeling-selector input[value="0"]::before {
    content: "C";
}

.feeling-selector input[value="1"]::before {
    content: "H";
}

.feeling-selector input[value="2"]::before {
    content: "L";
}

.feeling-selector input[value="3"]::before {
    content: "O";
}

.feeling-selector input[value="4"]::before {
    content: "G";
}

.feeling-selector input[value="5"]::before {
    content: "U";
}

.add-new-post .textarea-wrapper {
    width: 100%;
    display: flex;
    flex-direction: row;
}

.add-new-post textarea {
    resize: vertical;

    max-height: 200px;
    min-height: 100px;

    width: 100%;

    padding: 10px;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;

    border-radius: 5px;

    border: 1px solid var(--community-info-border-color);
    box-shadow: inset 0px 1px 4px rgb(220, 220, 220);

    line-height: 1.4;
}

.add-new-post .file-wrapper {
    width: 100%;
    margin-top: 15px;

    display: flex;
    flex-direction: row;
}

.file-wrapper .file {
    width: 100%;
    height: fit-content;
    padding: 10px;
    background-color: var(--add-new-post-file-bg);
    border-radius: 4px;

    display: flex;
    flex-direction: column;
}

.file input {
    width: fit-content;
    margin-top: 5px;
}

.file span {
    font-size: 12px;
    color: var(--file-allowed-text-color);
}

.file b {
    font-size: 14px;
    color: var(--file-allowed-text-color);
}

.add-new-post:has(#post-expandable:not(.none)) {
    max-height: 500px;
}

.add-new-post .post-button {
    width: 125px;
    height: 40px;

    margin-top: 15px;

    font-weight: bold;
    font-size: 15px;
    font-family: Arial, Helvetica, sans-serif;
}

.list.drawing {
    display: flex;
    flex-wrap: wrap;
}

.list .drawing {
    width: 50%;
    padding: 5px;
    box-sizing: border-box;
}

.drawing a {
    display: block;
    height: fit-content;
}

.drawing a .painting {
    width: 100%;
    margin: 0 auto;
    display: block;
}

.drawing .user-icon {
    width: 36px;
    height: 36px;
    border: 1px solid var(--community-info-border-color);
    border-radius: 4px;
    background-color: var(--community-info-bg);
}

.drawing .post-info {
    display: flex;
    align-items: center;
    margin-top: 5px;
    height: 42px;
}

.drawing .post-info .username {
    font-weight: bold;
    color: var(--common-text-color);
    text-decoration: none;
    font-size: 14px;
    text-wrap: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.drawing .post-info .username:hover {
    text-decoration: underline;
}

.drawing .post-info div:has(.username) {
    height: 35px;
    margin-left: 5px;
}

.drawing .post-info div div:has(.empathy-count) {
    color: var(--post-actions-text-color);
    font-size: 12px;
    margin-top: 3px;
}

.drawing .post-info div div:has(.empathy-count) .empathy-count::before {
    margin-right: 3px;
    font-weight: normal;
}

.drawing .post-info div div:has(.empathy-count) .reply-count::before {
    margin-left: 4px;
    margin-right: 4px;
    font-weight: normal;
}

.drawing.ingame .post-info div div:has(.empathy-count) .reply-count::after {
    content: "D";
    font-family: Symbols;
    margin-left: 6px;
}

.drawing .post-info .screenshot {
    height: 100%;
    margin-left: auto;
    border-radius: 5px;
}

.list .post {
    display: flex;
    flex-direction: column;

    min-height: 80px;

    border-bottom: 1px solid var(--community-info-border-color);
}

.list .post:last-child {
    border-bottom: none;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}

.list .post.transition,
.list .reply.transition {
    opacity: 1;
    animation: transition;
    animation-duration: 2s;
}

.list .post:hover {
    background-color: var(--community-post-hover-bg);

    transition: background-color 0.2s;
}

.post img {
    width: 285px;
}

.post .post-content-wrapper > .user-info {
    display: flex;

    padding-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
}

.post > .journal-wrapper {
    display: flex;
    width: 100%;
    max-width: 100%;
}

.post > .journal-wrapper .screenshot {
    margin-left: 15px;
    margin-top: 15px;
    width: 75%;
    max-width: 75%;
    align-self: baseline;
}

.post > .journal-wrapper .post-content-wrapper {
    width: 100%;
}

.post .post-content-wrapper > .user-info img {
    border-radius: 5px;
    border: 1px solid var(--community-info-border-color);

    width: 42px;
    height: 42px;
}

.user-info .user-info-text {
    margin-top: 4px;
    margin-left: 6px;
}

.user-info-text .name {
    display: block;
    width: fit-content;

    color: var(--common-text-color);
    text-decoration: none;

    font-weight: bold;

    font-size: 15px;
    margin-bottom: 4px;
}

.user-info-text .timestamp {
    display: block;

    font-size: 13px;

    color: var(--post-timestamp);
}

.user-info-text .name:hover {
    text-decoration: underline;
}

.post .content {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 10px;
    margin-bottom: 15px;
    line-height: 1.4;
    padding-left: 15px;
    padding-right: 15px;

    color: var(--common-text-color);
}

.post .community-wrapper {
    margin-top: 0;
    height: 32px;
    width: 100%;
    background-color: var(--small-post-community-bg);
    border-bottom: 1px solid var(--community-info-border-color);

    display: flex;
    justify-content: left;
    align-items: center;
}

.post .community-wrapper img {
    width: 22px;
    height: 22px;
    border-radius: 3px;
    border: 1px solid var(--community-info-border-color);
    margin-left: 10px;
    margin-right: 6px;
}

.post .community-wrapper a {
    color: var(--community-app-name-color);
    font-size: 12px;

    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;

    text-decoration: none;
}

.post .community-wrapper a:hover {
    text-decoration: underline;
}

.post-content-wrapper {
    display: flex;
    flex-direction: column;
}

.post .screenshot {
    border-radius: 6px;
    max-width: 100%;

    margin: 0 auto;
    margin-bottom: 15px;
}

.post .content img {
    display: block;

    margin: 0 auto;
    max-width: 100%;

    align-self: normal;
}

.content > .topic_tag + img {
    margin-top: 15px;
}

.post .post-actions {
    display: flex;

    justify-content: right;

    color: var(--post-actions-text-color) !important;

    margin-top: auto;

    justify-self: end;

    z-index: 9;

    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
}

.post .post-actions span {
    display: block;
}

button.empathy {
    margin-right: auto;
    background-color: var(--empathy-button-bg);
    padding: 5px;
    padding-top: 2px;
    padding-bottom: 3px;
    border-radius: 5px;
    border: 1px solid var(--community-info-border-color);
    font-size: 12px;
    max-width: 200px;
    z-index: 9;
}

button.empathy:hover {
    cursor: pointer;

    box-shadow: 0px 1px 1px 0px var(--empathy-button-boxshadow-color);
}

button.empathy:disabled span {
    color: var(--empathy-button-disabled-text-color);
}

button.empathy:disabled:hover {
    cursor: auto;

    box-shadow: none;
}

.empathies {
    display: flex;
    flex-wrap: wrap;

    border: 1px solid var(--community-info-border-color);
    border-radius: 5px;
    background-color: var(--gutter-bg);
    padding: 6px 8px;
    margin-top: 10px;
}

.empathies.none {
    display: none;
}

.empathies a {
    display: block;
    width: 46px;
    height: 46px;
    margin: 2px;
}

.empathies a img {
    width: 100%;
    height: 100%;

    object-fit: contain;
    background-color: #fff;
    border: 1px solid var(--community-info-border-color);
    border-radius: 5px;
}

button.empathy span::before {
    font-family: Symbols;
    content: "E";

    margin-right: 3px;
    font-size: 15px;
    vertical-align: -1.5px;

    color: var(--post-actions-text-color);
}

.empathy-count::before {
    content: "e";
    font-family: Symbols;

    margin-right: 5px;
}

.reply-count::before {
    content: "r";
    font-family: Symbols;

    margin-right: 5px;
    margin-left: 10px;

    position: relative;
    top: 1px;
}

.post.ingame .post-actions .reply-count::after {
    content: "D";
    font-family: Symbols;

    margin-left: 10px;
}

.topic_tag {
    font-weight: bold;
    color: var(--topic_tag_color);

    display: block;
    width: auto;

    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topic_tag::before {
    font-family: Symbols;
    content: "t";
    font-weight: normal;

    margin-right: 5px;
}

.user-wrapper {
    display: flex;
    justify-content: center;

    min-width: 960px;
    width: 95%;
    height: fit-content;

    margin: 0 auto;
    align-items: start;
}

.user-info-wrapper {
    width: 320px;
    margin-top: 15px;

    display: flex;
    flex-direction: column;

    background-color: var(--community-info-bg);
    border: 1px solid var(--community-info-border-color);
    border-bottom: 2px solid var(--community-info-border-color);
    border-radius: 5px;

    align-self: flex-start;
    box-sizing: border-box;
}

.user-info-wrapper .user-info {
    width: 100%;

    display: flex;
    flex-direction: column;
}

.user-info > div:nth-child(1) {
    display: flex;
    flex-direction: row;

    padding: 15px;
    padding-bottom: 0px;
}

.user-info img {
    width: 72px;
    height: 72px;

    border: 1px solid var(--community-info-border-color);
    border-radius: 5px;
}

.user-info .user-meta {
    margin-left: 10px;
    height: 60px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: baseline;
}

.user-meta.signin {
    align-self: center;
}

.user-meta .mii_name {
    font-weight: bold;
    color: var(--common-text-color);
    font-size: 18px;

    text-decoration: none;
}

.user-meta .nnid {
    font-size: 15px;
    color: var(--community-app-name-color);
}

.guide-wrapper {
    max-width: 650px;
    min-width: 200px;
    width: 620px;

    margin-top: 15px;

    align-self: baseline;

    background-color: var(--community-info-bg);
    border: 1px solid var(--community-info-border-color);
    border-bottom: 2px solid var(--community-info-border-color);
    border-radius: 5px;
    box-sizing: border-box;
}

.main-column.guide .spacer {
    padding: 15px;
    padding-top: 15px;
}

.main-column.guide h1.opening {
    font-size: 15px;
    margin-top: 0;
    margin-bottom: 0;

    padding: 5px;
    padding-left: 10px;
    border-radius: 5px;

    background-color: var(--rules-header-opening);
    font-weight: normal;
    color: var(--rules-header-text-color);
}

.main-column.guide h2:nth-child(2) {
    margin-top: 10px;
}

.main-column.guide h2 {
    font-size: 15px;
    margin-top: 0;
    margin-bottom: 0;

    padding: 5px;

    font-weight: normal;
}

.main-column.guide h2.num1 {
    color: var(--rules-header-opening);
    border-bottom: 2px solid var(--rules-header-opening);
}

.main-column.guide h2.num2 {
    color: var(--rules-header-num2);
    border-bottom: 2px solid var(--rules-header-num2);
}

.main-column.guide h2.num3 {
    color: var(--rules-header-num3);
    border-bottom: 2px solid var(--rules-header-num3);
}

.main-column.guide h2.num4 {
    color: var(--rules-header-num4);
    border-bottom: 2px solid var(--rules-header-num4);
}

.main-column.guide p,
.main-column.guide code {
    padding: 5px;
    margin-top: 5px;
    font-size: 14px;
    line-height: 1.5;
}

.main-column.guide code {
    display: block;

    border-radius: 5px;
    margin-top: 0;
    margin-bottom: 5px;

    padding-left: 0;
    padding-right: 0;
    text-indent: 5px;

    background-color: var(--community-description-bg);
    text-wrap: wrap;
    word-break: break-all;
}

.main-column.guide p:last-child {
    margin-bottom: 0;
}

.main-column.guide img {
    display: block;
    width: 100%;
    border-radius: 5px;
    border: 1px solid var(--community-info-border-color);
    border-bottom: 2px solid var(--community-info-border-color);
    margin: 0 auto;
}

.main-column.guide ul {
    list-style: square;
    font-size: 14px;
}

.main-column.guide ul li {
    margin-bottom: 5px;
}

.search-wrapper {
    width: 95%;
    height: 100%;

    margin: 0 auto;
    margin-top: 20px;

    display: flex;
    justify-content: center;
}

.search-sidebar {
    width: 320px;
}

.users-wrapper,
.communities-wrapper,
.posts-wrapper {
    display: flex;
    flex-direction: column;

    width: 318px;
    min-height: 100px;
    background-color: var(--community-info-bg);
    border: 1px solid var(--community-info-border-color);
    border-bottom: 2px solid var(--community-info-border-color);

    margin-top: 15px;
    border-radius: 5px;
}

.users-wrapper .searched-users,
.communities-wrapper .searched-communities {
    display: flex;
    flex-direction: column;
}

.searched-users .user {
    display: flex;

    height: 75px;
    padding: 15px;

    border-bottom: 1px solid var(--community-info-border-color);
}

.user .user-icon {
    background-color: var(--community-info-bg);

    width: 57px;
    height: 57px;

    align-self: baseline;

    border: 1px solid var(--community-info-border-color);
    border-radius: 5px;
}

.user .user-meta .nnid {
    display: block;
    font-size: 14px;
}

.user .user-meta .mii_name {
    display: block;
    font-size: 17px;
    margin-bottom: 1px;
}

.user .user-meta .bio {
    font-size: 14px;

    align-self: flex-end;
    display: block;

    margin-top: 5px;
    margin-bottom: 10px;

    color: var(--community-app-name-color);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 225px;
}

.user .user-meta {
    display: flex;
    flex-direction: column;

    margin-left: 8px;
    margin-top: 5px;
    height: 100%;
    align-self: flex-start;
}

.searched-communities .community a .banner {
    width: 100%;
    display: block;
    border: none;
    border-radius: 0;
}

.searched-communities .community a {
    display: block;
    border-bottom: 1px solid var(--community-info-border-color);
}

.searched-communities .community .community-info {
    border-radius: 0;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border: none;
    border-bottom: 1px solid var(--community-info-border-color);
}

.searched-communities .community .community-info img {
    width: 57px;
    height: 57px;

    align-self: center;
    margin-left: 10px;

    border-radius: 3px;
    border: 1px solid var(--community-info-border-color);
}

.searched-communities .community .community-info .community-meta .name {
    color: var(--common-text-color);
    font-size: 15px;
}

.searched-communities .community .community-info .community-meta .app-name {
    color: var(--community-app-name-color);
    font-size: 14px;

    max-height: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-wrapper .search-main {
    width: 625px;
    margin-left: 15px;

    align-self: baseline;
}

.search-main .posts-wrapper {
    width: 625px;
    margin-top: 0;

    display: flex;
    flex-direction: column;
}

.user-main-wrapper {
    width: 620px;
    max-width: 650px;
    margin-top: 15px;
}

.user-posts {
    display: flex;
    flex-direction: column;

    background-color: var(--community-info-bg);
    border: 1px solid var(--community-info-border-color);
    border-radius: 2px solid var(--community-info-border-color);

    border-radius: 5px;
}

.main-column.fill .user-posts {
    border: none;
    border-radius: 0;
    background-color: transparent;
}

.user-info .user-stats {
    display: flex;
    background-color: var(--user-stats-background-color);
    margin-top: 15px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}

.user-stats a {
    width: 100%;

    padding-top: 5px;
    padding-bottom: 10px;

    display: flex;
    justify-content: center;
    align-items: center;

    text-decoration: none;
}

.user-stats a:hover > span {
    text-decoration: underline;
}

.user-stats a:first-child > span {
    border-left: none;
}

.user-stats a > span {
    border-left: 1px solid var(--community-info-border-color);
}

.user-stats a span .number {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 20px;
    margin-bottom: 5px;
    margin-top: 7px;

    color: var(--common-text-color);
}

.user-stats a > span {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 11px;

    color: var(--community-app-name-color);
}

.user-info .profile-settings {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 290px;
    height: 43px;
    border: 1px solid var(--common-button-border);
    border-radius: 5px;
    background-color: var(--common-button-bg);
    margin: 0 auto;
    margin-top: 10px;

    color: var(--common-text-color);
    font-size: 14px;
    text-decoration: none;
}

.user-info .profile-settings::before {
    display: block;
    width: fit-content;
    content: "Z";
    font-family: Symbols;
    font-size: 18px;
    margin-right: 6px;
    color: var(--common-text-color);
}

.user-info .profile-settings:hover {
    cursor: pointer;
    box-shadow: 0px 1px 5px rgb(209, 209, 209);
    transition: box-shadow 0.1s;
}

.user-info > div:has(.user-meta.signin) {
    padding-bottom: 15px;
}

.user-sidebar .user-menu {
    width: 320px;
}

.user-menu {
    display: flex;
    flex-direction: column;

    margin-top: 15px;

    height: fit-content;

    background-color: var(--community-info-bg);
    border-radius: 5px;

    border: 1px solid var(--community-info-border-color);
    border-bottom: 2px solid var(--community-info-border-color);
}

.user-menu > a {
    display: flex;
    align-items: center;
    text-decoration: none;
    height: 45px;
    width: 100%;
    border-bottom: 1px solid var(--community-info-border-color);
}

.user-menu > a.trigger:hover {
    text-decoration: none;
}

.user-menu > a:first-child {
    border-top-left-radius: 3.5px;
    border-top-right-radius: 3.5px;
}

.user-menu > a:last-child {
    border-bottom: none;
    border-bottom-left-radius: 3.5px;
    border-bottom-right-radius: 3.5px;
}

.user-menu > a.selected {
    background-color: var(--community-hover-bg);
}

.user-menu > a.selected span:not(.number) {
    font-weight: bold;
}

.user-menu > a span {
    display: block;
    width: fit-content;
    font-size: 14px;
    text-decoration: none;
    color: var(--common-text-color);
}

.user-menu > a.no-class span {
    margin-left: 15px;
}

.user-menu > a .number {
    display: block;
    margin-left: auto;

    padding: 2px;
    padding-left: 18px;
    padding-right: 18px;
    font-size: 12px;
    border-radius: 3px;

    margin-right: 6px;

    background-color: var(--user-stats-background-color);
    color: var(--community-app-name-color);
}

.user-menu > a::after {
    display: block;
    content: "A";
    margin-left: auto;
    margin-right: 15px;
    font-family: Symbols;
    font-size: 14px;
    color: var(--community-app-name-color);
}

.user-menu > a:has(.number)::after {
    margin-left: 0;
}

.user-menu > a::before {
    display: block;
    height: fit-content;
    width: 27px;
    margin-left: 10px;
    margin-right: 5px;
    font-family: Symbols;
    font-size: 20px;
    text-align: center;
}

.user-menu a.all-posts::before {
    content: "p";
    color: var(--aquamarine-text-color);
}

.user-menu a.empathies::before {
    content: "e";
    color: var(--aquamarine-text-color);
}

.user-menu a.journal::before {
    content: "%";
    color: var(--community-journal-color);
}

.user-menu a.drawings::before {
    content: "M";
    color: var(--community-paintings-color);
}

.user-menu a.popular::before {
    content: "W";
    font-size: 22px;
    color: var(--community-popular-color);
}

.user-menu a.ingame::before {
    content: "&";
    color: var(--community-ingame-color);
}

.user-menu a.favorites::before {
    content: "s";
    color: var(--community-favorite-color);
}

a.all-posts span,
a.empathies span {
    margin-left: 0;
}

.user-sidebar,
.sidebar {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 320px;
    max-width: 650px;
    margin-right: 15px;
}

.user-info-wrapper:has(p.bio) {
    justify-content: center;
    flex-direction: row;
}

.user-info-wrapper p.bio {
    margin: 15px;
    padding: 10px;
    background-color: var(--community-description-bg);
    color: var(--community-description-text-color);

    font-size: 14px;
    border-radius: 5px;
    line-height: 1.5;

    width: 290px;
}

.wrapper .post-wrapper {
    width: 625px;
    margin: 0 auto;
    margin-top: 15px;
}

.post .community {
    height: 37px;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--community-info-border-color);
    background-color: var(--small-post-community-bg);

    border-top-left-radius: 5px;
    border-top-right-radius: 5px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.post .community .type {
    display: block;
    width: fit-content;
    height: fit-content;
    max-height: 39px;

    margin-left: auto;
    font-size: 12px;
    font-weight: bold;

    padding-top: 11px;
    padding-bottom: 11px;
    padding-right: 10px;
    padding-left: 10px;
    color: var(--community-app-name-color);
}

.post .community .type::before {
    display: inline-block;
    margin-right: 5px;
    font-family: Symbols;
    font-weight: normal;
}

.post .community .ingame {
    border-bottom: 2px solid var(--community-ingame-color);
}

.post .community .drawings {
    border-bottom: 2px solid var(--community-paintings-color);
}

.post .community .journal {
    border-bottom: 2px solid var(--community-journal-color);
}

.post .community .drawings::before {
    content: "M";
}

.post .community .ingame::before {
    content: "&";
}

.post .community .journal::before {
    content: "%";
}

.post .community img {
    width: 26px;
    border-radius: 4px;
    margin-left: 8px;

    display: inline;
    vertical-align: middle;
}

.post .community a {
    text-decoration: none;
    display: flex;
    align-items: center;
    width: fit-content;
}

.post .community a span {
    height: fit-content;
    font-weight: bold;
    text-decoration: none;
    color: var(--common-text-color);
    margin-left: 6px;
    display: block;
    font-size: 15.5px;

    max-width: 500px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.post-wrapper .post .content {
    margin: 0;
    background-color: var(--community-info-bg);
    border: 1px solid var(--community-info-border-color);
    border-bottom: 0px;
    border-top: 0px;
    min-height: 50px;
    padding: 15px;
}

.post-wrapper .post .content .user-meta {
    height: 58px;
    display: flex;
    align-items: center;
}

.post-wrapper .post .content .user-meta a:has(.user-icon) {
    height: 58px;
    width: 58px;
    display: block;
    margin-right: 9px;
}

.post-wrapper .post .content .user-meta img {
    width: 56px;
    border: 1px solid var(--community-info-border-color);
    border-radius: 5px;
    margin: 0;
}

.user-meta .username {
    height: fit-content;
    width: fit-content;
    max-width: 400px;
}

.user-meta .username .name {
    text-decoration: none;
    color: var(--common-text-color);
    font-weight: bold;
    display: inline-block;
}

.user-meta .username .name:hover {
    text-decoration: underline;
}

.user-meta .username .username {
    font-size: 15px;
    text-decoration: none;
    color: var(--community-app-name-color);
    display: inline-block;
}

.user-meta .username .timestamp {
    display: block;
    margin-top: 3px;
    color: var(--community-app-name-color);
    font-size: 14px;
}

.post .content .post-content {
    margin-top: 10px;
    font-size: 18px;
}

.post .content .post-content .topic_tag {
    font-size: 16px;
    margin-bottom: 5px;
    margin-top: 7px;
}

.post .content .post-content p {
    margin-top: 5px;
    margin-bottom: 5px;
    line-height: 25px;
}

.post .content .screenshot {
    min-height: 285px;
    width: auto;
}

.post .content .painting {
    width: auto;
    margin-bottom: 20px;
    margin-top: 20px;
}

.post .content .post-actions {
    padding: 0;
    margin-top: 15px;
}

.post .post-header {
    padding-top: 5px;
    padding-bottom: 5px;

    background-color: var(--topic_tag_color);
    font-size: 14px;
    color: #fff;
    border: 1px solid var(--community-info-border-color);
    border-bottom: 0;
    border-top: 0;
}

.post .post-header span {
    margin-left: 8px;
}

.replies.list .reply {
    background-color: var(--community-content-bg);
    padding: 15px;
    border: 1px solid var(--community-info-border-color);
    border-top: none;
}

.replies.list .reply:first-child {
    border-top: var(--community-info-border-color);
}

.replies.list .reply.self {
    background-color: var(--aquamarine-text-color);
}

.reply .reply-content-wrapper {
    display: flex;
}

.reply .reply-content-wrapper a:has(.user-icon) {
    width: 50px;
    height: 50px;
    border: 1px solid var(--community-info-border-color);
    border-radius: 5px;
    align-self: baseline;
}

.reply .reply-content-wrapper a:has(.user-icon) .user-icon {
    width: 50px;
    height: 50px;
    display: block;
}

.reply .reply-content-wrapper .content {
    display: block;
    border: none;
    padding: 0;
    margin-left: 10px;
    width: 100%;
}

.reply .reply-content-wrapper .content p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-top: 5px;
    margin-bottom: 10px;
}

.reply .reply-content-wrapper .content .user-info-text a {
    display: inline;
}

.reply .reply-content-wrapper .content .user-info-text span {
    display: inline;
}

.reply .reply-content-wrapper .content .reply-actions {
    width: 100%;
    display: flex;
    align-items: center;
    margin-top: auto;
    color: var(--post-actions-text-color);
}

.popular-date-selector {
    border-bottom: 1px solid var(--community-info-border-color);
    padding: 20px;

    display: flex;
    justify-content: center;
}

.popular-date-selector .current-date {
    display: inline-block;
    width: 55%;
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: center;
    font-size: 14px;
    text-decoration: none;
    color: var(--common-text-color);
    background: -webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0.6, var(--popular-posts-selector)),
        color-stop(0.95, var(--popular-posts-selector-bottom))
    );
    border-bottom: 1px solid var(--community-info-border-color);
}

.popular-date-selector .current-date:hover {
    cursor: pointer;
    box-shadow: 0px 1px 5px rgb(209, 209, 209);
    transition: box-shadow 0.1s;
}

.popular-date-selector .next-date,
.popular-date-selector .last-date {
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 23px;
    padding-right: 23px;
    border-left: 1px solid var(--community-info-border-color);
    background: -webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0.6, var(--popular-posts-selector)),
        color-stop(0.95, var(--popular-posts-selector-bottom))
    );
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    text-decoration: none;
    color: var(--common-text-color);
    border-bottom: 1px solid var(--community-info-border-color);
}

.popular-date-selector .last-date {
    border-radius: 0;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border-right: 1px solid var(--community-info-border-color);
    border-left: none;
}

.popular-date-selector .next-date:hover,
.popular-date-selector .last-date:hover {
    cursor: pointer;
    box-shadow: 0px 1px 5px rgb(209, 209, 209);
    transition: box-shadow 0.1s;
}

.popular-date-selector .next-date::before {
    font-family: Symbols;
    content: "R";
    color: var(--common-text-color);
    text-decoration: none;
    color: var(--common-text-color);
}

.popular-date-selector .last-date::before {
    font-family: Symbols;
    content: "I";
    color: var(--common-text-color);
    text-decoration: none;
    color: var(--common-text-color);
}

.post .content .empathies {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    margin-top: 13px;
    border: 1px solid var(--community-info-border-color);
    padding: 7px;
    padding-bottom: 5px;
    border-radius: 5px;
    background-color: #f9f9f9;
}

.post .content .empathies:before {
    content: "";
    position: absolute;
    display: block;
    width: 10px;
    height: 7px;
    left: 22px;
    top: -6px;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAHCAQAAACbpRToAAAASUlEQVR4AVXIRQGAABAF0V8cp9NKFzTBXnB3mbk93GmsMf6Jly3ZIt6H2EuXvXRh70fN9sPsnlRvX+wi62+6Oesxl43VnxubyxXATVk1l6uL8AAAAABJRU5ErkJggg==");
}

.post .content .empathies a {
    margin: 2px;
    border-radius: 5px;
    border: 1px solid var(--community-info-border-color);
    background-color: var(--community-info-bg);
}

.post .content .empathies img {
    width: 46px;
    margin: 0;
}

.replies.list .no-posts {
    background-color: var(--community-content-bg);
    border: 1px solid var(--community-info-border-color);
    color: var(--community-app-name-color);
    border-top: none;
    border-bottom: 0;
    padding: 32px;
    font-size: 15px;
}

.post .notice {
    padding: 6px;
    padding-left: 15px;
    padding-right: 15px;
    background-color: var(--community-info-bg);
    color: var(--community-app-name-color);
    font-size: 14px;
    line-height: 1.4;
    border-left: 1px solid var(--community-info-border-color);
    border-right: 1px solid var(--community-info-border-color);
}

.post .notice a {
    color: var(--community-description-text-color);
    font-weight: bold;
    text-decoration: none;
}

.post .user-menu {
    margin-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.post .user-menu span {
    margin-left: 15px;
}

.post .add-post-wrapper {
    background-color: var(--community-info-bg);
    border-left: 1px solid var(--community-info-border-color);
    border-right: 1px solid var(--community-info-border-color);
    border-bottom: 2px solid var(--community-info-border-color);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.reply .reply-content-wrapper .content .screenshot {
    width: 70%;
    min-height: auto;
    align-self: baseline;
    margin-bottom: 25px;
}

.post b.share-heading {
    display: block;
    font-size: 12px;
    margin-top: 10px;

    color: var(--file-allowed-text-color);
}

.post .share-platforms {
    margin-top: 4px;
}

.post .share-platforms .x-platform,
.post .share-platforms .facebook-platform {
    width: 95px;
    margin-right: 6px;
}

.post .share-platforms .whatsapp-platform,
.post .share-platforms .tumbler-platform {
    margin-top: 0;
}

.post .community a span:hover {
    text-decoration: underline;
}

.full-post .content {
    display: block;
}

.full-post .content img.screenshot {
    align-self: baseline;
    min-height: 0;
}

.main-column.communities {
    background-color: var(--community-info-bg);
    border: 1px solid var(--community-info-border-color);
    border-bottom: 2px solid var(--community-info-border-color);
    border-radius: 5px;
}

.main-column .header {
    box-sizing: border-box;
    width: 100% !important;
    position: relative;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 15px;
    align-items: center;
}

.main-column > .header.wiiu::after {
    display: block;
    background-image: url("/img/platform/wiiu-logo.png");
    background-repeat: no-repeat;
    width: 121px;
    height: 21px;
    content: "";
    background-size: contain;
    margin-left: auto;
}

.main-column > .header.vc::after {
    display: block;
    background-image: url("/img/platform/vc-logo.png");
    background-repeat: no-repeat;
    width: 167px;
    height: 21px;
    content: "";
    background-size: contain;
    margin-left: auto;
}

.main-column > .header.n3ds::after {
    display: block;
    background-image: url("/img/platform/3ds-logo.png");
    background-repeat: no-repeat;
    width: 120px;
    height: 21px;
    content: "";
    background-size: contain;
    margin-left: auto;
}

.main-column.communities > .header span::before {
    display: none;
}

.main-column.communities > .software-header {
    width: 100%;
    height: 35px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    border-bottom: 1px solid var(--community-info-border-color);
}

.main-column.communities > .list {
    flex-wrap: nowrap;
    flex-direction: column;
    width: 100%;
}

.main-column.communities > .list > div {
    width: 100%;
    margin: 0;
    border: none;
    border-bottom: 1px solid var(--community-info-border-color);
}

.main-column.communities > .list > div:last-child {
    border-bottom: 0;
}

.main-column.communities > .list > div:last-child .community-info {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.main-column.communities > .list > div > .community-info {
    border: none;
    border-radius: 0;
}

.main-column.communities > .list > div > .community-info > .community-meta .name,
.main-column.communities > .list > div > .community-info > .community-meta {
    width: 100%;
}

.main-column.communities > .software-header.wiiu {
    background-color: var(--wiiu-software-bg);
    color: var(--wiiu-software-color);
}

.main-column.communities > .software-header.n3ds {
    background-color: var(--n3ds-software-bg);
    color: var(--n3ds-software-color);
}

.main-column.communities > .software-header.vc {
    background-color: var(--vc-software-bg);
    color: var(--vc-software-color);
}

.main-column.communities > .software-header > span {
    font-weight: bold;
    font-size: 14px;
    display: block;
    width: 100%;
    height: fit-content;
    padding-left: 15px;
    box-sizing: border-box;
}

.main-column > .settings-wrapper {
    padding: 15px;
}

.main-column > .settings-wrapper div {
    width: 100%;
    height: fit-content;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--community-info-border-color);
}

.main-column > .settings-wrapper div label {
    display: block;
    font-size: 14px;
    margin-bottom: 5px;
    margin-top: 12px;
}

.main-column > .settings-wrapper form > div:first-child label {
    margin-top: 0;
}

.main-column > .settings-wrapper div input:not([type="file"]),
.main-column > .settings-wrapper div textarea {
    display: block;
    width: 100%;
    height: 35px;
    font-size: 18px;
    box-sizing: border-box;
    background-color: var(--settings-input-background);
    border: 1px solid var(--settings-input-border);
    border-radius: 3px;
    padding-left: 5px;
}

.main-column > .settings-wrapper div textarea {
    resize: vertical;
    font-family: Arial, Helvetica, sans-serif;
    min-height: 120px;
    max-height: 300px;
    padding: 10px;
    font-size: 16px;
}

.main-column > .settings-wrapper div p {
    display: block;
    width: 100%;
    margin-top: 6px;
    margin-bottom: 0;
    font-size: 13px;
    color: var(--community-app-name-color);
    line-height: 1.4;
}

.main-column > .settings-wrapper div select {
    width: 300px;
    height: 25px;
    font-size: 15px;
    border-radius: 3px;
    background-color: var(--settings-input-background);
    border: 1px solid var(--settings-input-border);
    margin-left: auto;
    display: block;
    word-spacing: -1px;
}

.main-column > .settings-wrapper .black-button {
    margin: 0 auto;
    margin-top: 15px;
    margin-bottom: 5px;
    display: block;
}

.user-menu .favorites-wrapper > div {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: fit-content;
    padding: 5px;
    padding-top: 8px;
    padding-bottom: 8px;
    box-sizing: border-box;
}

.user-menu .favorites-wrapper a {
    width: 18%;
    min-width: 9%;
    height: fit-content;
    margin-left: 3px;
    margin-right: 3px;
}

.user-menu .favorites-wrapper img.icon {
    width: 100%;
    border-radius: 5px;
    border: 1px solid var(--community-info-border-color);
    box-sizing: border-box;
}

.favorites-wrapper .platform {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    margin-bottom: 3px;
    margin-top: -1px;
}

.favorites-wrapper .platform.wiiu {
    content: url("/img/platform/platform-tag-wiiu.png");
}

.favorites-wrapper .platform.\33 ds {
    content: url("/img/platform/platform-tag-3ds.png");
}

.favorites-wrapper .platform.topic {
    content: url("/img/platform/platform-tag-general.png");
}

.favorites-wrapper .platform.both {
    content: url("/img/platform/platform-tag-both.png");
}

.favorites-wrapper span.no-posts {
    padding: 25px;
    font-size: 15px;
}

@media (max-width: 660px) {
    .communities > div:not(.community-favorites) {
        flex-direction: column;
        align-items: center;

        width: 100%;
    }

    .main-column > .header {
        flex-direction: row !important;
        justify-content: left !important;
    }

    .index-communities-wrapper .communities {
        width: 100%;
        margin: 0 auto;
    }

    .extra-content {
        width: 100% !important;
        margin: 0 auto;
    }

    .extra-content .small-posts {
        display: none;
    }

    .community {
        width: 100% !important;

        margin-right: 0 !important;
    }

    .community a img.banner {
        width: 100%;
    }

    div:not(.full-post) > .community > a,
    div:not(.full-post) > .community > div {
        margin: 0 auto;
        max-width: none;
    }

    .list .drawing {
        width: 100%;
    }

    .journal-wrapper > img.screenshot {
        display: none;
    }

    .wrapper .post-wrapper {
        width: 95%;
    }

    .full-post .content .post-content {
        font-size: 16px;
    }

    .full-post .content .empathies img {
        width: 36px;
    }

    .full-post .community a span {
        font-size: 15px;
    }

    .common-button span {
        font-size: 14px;
    }

    .common-button {
        max-width: 400px;
        width: 85%;
    }

    .user-menu .favorites-wrapper > div {
        margin: 0 auto;
        max-width: 305px;
        min-width: 272px;
        width: 98%;
        padding: 0;
        padding-bottom: 15px;
        padding-top: 15px;
    }

    .user-menu .favorites-wrapper a {
        width: 17% !important;
        min-width: 44px !important;
    }
}

@media (max-width: 970px) {
    menu {
        justify-content: space-around;
    }

    menu li {
        min-width: 0;

        margin-left: 0;
    }

    menu li a span:not(li.settings a span) {
        display: none;
    }

    menu li.logo:not(:only-child) {
        display: none;
    }

    .main-column {
        width: 100%;
        margin: 0 auto;
        max-width: 650px;
        margin-top: 15px;
    }

    .login-wrapper {
        width: 90%;

        min-width: 347px;
    }

    .login-wrapper img {
        width: 300px;
    }

    .login-wrapper input:not([type="submit"]):not([type="checkbox"]) {
        width: 300px;
    }

    .login-wrapper span {
        display: block;
        width: 90%;
        text-align: center;
    }

    .error-wrapper {
        width: 90%;
        max-width: 347px;
    }

    .about-image {
        width: 90%;

        margin: 0 auto;

        margin-top: 15px;
    }

    .about-image img {
        width: 100%;
    }

    .about-wrapper {
        flex-direction: column;
    }

    .about-paragraph {
        padding-right: 0px;
        width: 90%;

        margin: 0 auto;
    }

    .communities > div:not(.header) {
        justify-content: center;
    }

    .community-favorites {
        display: none !important;
    }

    .favorite {
        margin-left: 0 !important;
    }

    .extra-content {
        width: 620px;

        margin: 0 auto;

        display: flex;
    }

    .extra-content .small-posts {
        display: none;
    }

    .extra-content form {
        width: 100%;
        max-width: none;
    }

    #small_featured_drawings,
    #small_featured_posts {
        display: none;
    }

    .index-communities-wrapper .communities {
        flex-direction: column;
        align-items: center;
        justify-content: center;

        margin: 0 auto;
    }

    form.search {
        max-width: none;
        width: auto;
    }

    .index-communities-wrapper {
        width: 95%;

        flex-direction: column-reverse;
    }

    .index-communities-wrapper > .communities > div > div:not(.favorite) {
        justify-content: center;
        align-items: center;
    }

    .community {
        margin-right: 5px;
    }

    .community-wrapper {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .community-wrapper .community-sidebar {
        min-width: 200px;
        width: 95%;

        margin: 0 auto;
    }

    .community-banner a img {
        width: 100%;
        height: auto;

        display: block;
    }

    .community-banner a {
        top: 0px;
    }

    .community-add-post {
        margin-bottom: 15px;
    }

    .community-content {
        min-width: 200px !important;
        max-width: none;
        width: 95%;

        margin: 0 auto;
    }

    .feeling-selector input {
        font-size: 40px;
    }

    .post > img {
        width: 135px;
    }

    .post .reply-count::after {
        display: none;
    }

    .user-wrapper {
        flex-direction: column;
        justify-content: center;
        min-width: 0;
    }

    .user-info-wrapper {
        width: auto;
        margin-right: 0;
        align-self: auto;
    }

    .post .community-wrapper {
        margin: 0;
        flex-direction: row;
    }

    .search-wrapper {
        flex-direction: column;
    }

    .search-wrapper .search-sidebar {
        width: 100%;
    }

    .search-sidebar form.search {
        width: auto;
        max-width: 100%;
    }

    .users-wrapper,
    .communities-wrapper,
    .posts-wrapper {
        width: auto;
    }

    .search-sidebar .communities-wrapper .searched-communities .community {
        margin: 0;
    }

    .search-sidebar .communities-wrapper .searched-communities .community a {
        max-width: none;
    }

    .search-wrapper .search-main {
        margin: 0;
        width: 100%;
    }

    .search-main .posts-wrapper {
        width: 100%;

        margin-top: 15px;
    }

    .user-menu {
        margin-right: 0;
    }

    .user-sidebar,
    .sidebar {
        width: 100%;
        margin: 0 auto;
    }

    .user-info-wrapper p.bio {
        width: 100%;
    }

    .user-main-wrapper {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .guide-wrapper {
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }

    .user-menu.extend {
        flex-direction: row;
        border-radius: 5px;
    }

    .user-menu.extend a {
        width: 100%;
        height: 75px;
        padding-top: 5px;
        padding-bottom: 5px;
        flex-direction: column;
        justify-content: center;
        border-right: 1px solid var(--community-info-border-color);
        border-bottom: none;
    }

    .user-menu.extend a:first-child {
        border-radius: 0;
        border-bottom-left-radius: 3.5px;
    }

    .user-menu.extend a:last-child {
        border-radius: 0;
        border-bottom-right-radius: 3.5px;
        border-right: none;
    }

    .user-menu.extend a::after {
        display: none;
    }

    .user-menu.extend a span {
        margin: 0;
        width: 100%;
        text-align: center;
        font-size: 12px;
        margin-bottom: 5px;
        margin-top: 5px;
    }

    .user-menu.extend a::before {
        margin: 0;
        font-size: 20px;
    }

    .user-menu.extend a span.number {
        padding: 0;
        box-sizing: border-box;
        width: 90%;
        margin-top: 0;
    }

    .user-sidebar .user-menu {
        width: auto;
    }

    .user-menu .favorites-wrapper {
        flex-flow: row;
    }

    .user-menu .favorites-wrapper a {
        width: 9%;
    }

    .user-menu .favorites-wrapper > div {
        justify-content: center;
    }
}