ghostchan_x

/* Heavily Inspired and Heavily Altered from the 8kun.top/cafe custom css */

body {
    background: url(https://i.imgur.com/wWjynkV.png), #000411;
    background: url(https://i.imgur.com/yTy9zAV.png) repeat-x 50% 0%, url(https://i.imgur.com/wWjynkV.png), #000411;
    background-position: center top;
    font-family: 'Verdana', sans-serif;
    color: #d0d0db;
}

body::before {
    content: "";
    display: block;
    position: fixed;
    left: 0;    top: 0;
    width: calc(100% + 32px);
    height: calc(100% + 32px);
    background-image: url("https://files.catbox.moe/h5d4um.png");
    background-position: 0 0;
    background-repeat: repeat;
    z-index: 10000000;
    animation: ScanlineAnimationLeft 2s linear infinite;
    pointer-events: none;
    opacity: 0.3
}

body::after {
    content: "";
    display: block;
    position: fixed;
    left: -32px;
    top: 0;
    width: calc(100% + 32px);
    height: calc(100% + 32px);
    background-image: url("https://files.catbox.moe/h5d4um.png");
    background-position: 0 0;
    background-repeat: repeat;
    z-index: 10000000;
    animation: ScanlineAnimationRight 0.4s linear infinite;
    pointer-events: none;
    opacity: 0.3
}

@keyframes ScanlineAnimationLeft {
    0% {
        transform: translateX(0px) translateY(0px);
    }

    100% {
        transform: translateX(-32px) translateY(-32px);
    }
}

@keyframes ScanlineAnimationRight {
    0% {
        transform: translateX(0px) translateY(0px);
    }

    100% {
        transform: translateX(32px) translateY(-32px);
    }
}

nav {
    position: fixed;
    background: #000411aa;
    border-bottom: 0px;
}

#favouriteButton:before {
    font-family: Icons;
    content: url("https://files.catbox.moe/tiybw1.png");
    margin-left: 0.2em;
    cursor: pointer;
    font-size: 22px;
    color: none;
    display: inline-block;
}

#favouriteButton {
    font-size: 0px;
}
#favouriteButton:hover, .checkedFavouriteButton::before {
    content: url("https://files.catbox.moe/tiybw1.png");
    animation: spin 2.5s linear infinite;
    margin-left:0.2em;
    display: inline-block;
}

@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

textarea {
    background: #000;
    box-shadow: 1px 0px 0px #5e5e5e, 0px 1px 0px #5e5e5e, -1px 0px 0px #5e5e5e, 0px -1px 0px #5e5e5e;
    margin-top: 10px;
    margin-right: -3px;
    color: #d0d0db;
}

input {
    background: #000;
    color: #d0d0db;
    box-shadow: 1px 0px 0px #5e5e5e, 0px 1px 0px #5e5e5e, -1px 0px 0px #5e5e5e, 0px -1px 0px #5e5e5e;
}

hr {
    color: #d0d0db;
}

#postingForm textarea:focus, #postingForm input:focus {
    box-shadow: 1px 0px #ff8d8d, 0px 1px #ff8d8d, -1px 0px #ff8d8d, 0px -1px #ff8d8d;
}

#postingForm th {
    background: #374466;
}

a, a:hover, .coloredIcon, .quoteLink, .labelSubject {
    color: #f9c1ff;
    text-shadow: none;
}

.linkQuote, .linkSelf, .linkQuote:hover, .linkSelf:hover {
 color: #d0d0db;
 font-weight: normal;
}

.labelSubject::before {
  content: "「 ";
}
.labelSubject::after {
  content: " 」";
}

.linkName, .linkName:hover {
    color: #00bc71;
    font-weight: bold;
}

.linkName:before {
    content: '🜏 ';
    font-weight: bold;
    font-size: 110%;
}

.boardHeader p#labelName, .boardHeader p#labelDescription {
    font-size: 0pt;
}

.boardHeader p#labelName:before {
    content: '/cafe/ - кафе ец';
    text-transform: lowercase;
    color: #ddd5ff;
    text-shadow: none;
    font-size: 30pt;
}

.boardHeader p#labelDescription:before {
    color: #ddd5ff;
    content: 'ваше удобное кафе';
    text-transform: lowercase;
    color: #ddd5ff;
    text-shadow: none;
    font-size: 16pt;
    font-weight: normal;
}

.uploadCell img:not(.imgExpanded) {
    max-width: 100px;
    max-height: 100px;
    object-fit: contain;
}

.multipleUploads .uploadCell:not(.expandedCell) {
    max-width: 150px;
    float: left;
}

.uploadCell img:not(.imgExpanded) {
    max-width: 150px;
    height: 150px;
    object-fit: contain;
}

.linkThumb img{
    max-height: 50px;
    max-width: 50px;
}

.uploadCell{
    margin: .25em 1em .25em .5em;
    float: none;
}

.uploadCell img, .multipleUploads>.innerOP .opUploadPanel,.multipleUploads>.panelUploads, .multipleUploads>.uploadCell {
    float: left;
}

.multipleUploads>.innerOP .divMessage,.multipleUploads>.innerPost .divMessage,.multipleUploads>.markedPost .divMessage{
    clear: both;
}

.innerPost, .sideCatalogCell, .catalogCell, #divLatestPosts .latestPostCell {
    background: #131b33;
    border-radius: 6px;
    box-shadow: 0px 2px #3d4959, 2px 0px #3d4959, 2px 2px #3d4959;
    margin-top: 2px;
    margin-right: 2px;
}

.markedPost, .sideCatalogMarkedCell {
    background: #372536;
    border-radius: 6px;
    box-shadow: 0px 2px #3d4959, 2px 0px #3d4959, 2px 2px #3d4959;
    margin-top: 2px;
    margin-right: 2px;
}

.greenText {
    color: #99b329;
}

 .orangeText {
  color: #ffa631;
}

.redText {
    font-family: "Times New Roman", Serif;
    color: #34345C;
    text-shadow: 1.5px 1px 0px #FFF;
    font-weight: bold;
    font-size: 1.15rem;
    text-transform: uppercase;
}

.redText strong {
    font-family: "Times New Roman", Serif;
  color: black;
  text-shadow: 0px 1px 0px #ccc, 0px -1px 0px #ccc, 1px 0px 0px #ccc, -1px 0px 0px #ccc;
  font-weight: bold;
  font-size: 1.15rem;
    text-transform: uppercase;
}

span.detected {
    background: #FFF;
    color: #1565C0;
    font-weight: bold;
}

span.spoiler {
    background: #474c57;
    color: #474c57;
}

span.spoiler:hover {
    background: transparent;
    color: #999;
}

@keyframes flicker {
    0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% {
        opacity: .99;
        text-shadow: -1px -1px 0 rgba(255, 255, 255, .4), 1px -1px 0 rgba(255, 255, 255, .4), -1px 1px 0 rgba(255, 255, 255, .4), 1px 1px 0 rgba(255, 255, 255, .4), 0 -2px 8px, 0 0 2px, 0 0 5px #ff7e00, 0 0 15px #ff4444, 0 0 2px #ff7e00, 0 2px 3px #000;
    }
    20%, 21.999%, 63%, 63.999%, 65%, 69.999% {
        opacity: 0.4;
        text-shadow: none;
    }
}

span.rainbow {
    color: #fff665;
    animation: flicker 3s infinite;
    font-size: 1.2rem;
    font-style: italic;
    margin-left: -4px;
}

@keyframes flicker2 {
    0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% {
        opacity: .99;
        text-shadow: -1px -1px 0 rgba(255, 255, 255, .4), 1px -1px 0 rgba(255, 255, 255, .4), -1px 1px 0 rgba(255, 255, 255, .4), 1px 1px 0 rgba(255, 255, 255, .4), 0 -2px 8px, 0 0 2px, 0 0 5px #dd008b, 0 0 15px #ff4498, 0 0 2px #dd008b, 0 2px 3px #000;
    }
    20%, 21.999%, 63%, 63.999%, 65%, 69.999% {
        opacity: 0.4;
        text-shadow: none;
    }
}

span.rainbow2 {
    color: #ffc2f0;
    animation: flicker2 1s infinite;
    font-size: 1.2rem;
    font-style: italic;
}

select {
    background: transparent;
    color: #f9c1ff;
    border: transparent;
}

input[type=button], input[type=submit], button, .dropzone, .selectedCell
{
    border: transparent;
    background: #374466;
    border-radius: 0px;
    font-family: "Arial", sans-serif;
    font-size: .85rem;
    color: #d0d0db;
}

a.rules {
    color: #aaa;
}

a.rules:after {
    color: #d2a7fa;
}

input[type=checkbox].postingCheckbox+label:before {
  color: #d2a7fa;
}

.labelRole {
  color: #6dabe4;
    font-size: .9rem;
    font: "Hack";
    text-transform: capitalize;
    padding-right: 4px;
}

.labelRole:before {
    content: '🜍';
    font-size: 1.2rem;
    display: inline-block;
    transform: rotate(90deg) translateX(4px);
    color: #358bda;
    padding-left: 2px;
    padding-right: 2px;
}

.labelRole:after {
    content: '🜍';
    font-size: 1.2rem;
    display: inline-block;
    transform: rotate(-90deg) translateX(-4px);
    color: #358bda;
    padding-left: 2px;
    padding-right: 2px;
}

 .labelYou {
    color: #00bc71;
    font-weight: normal;
    font-style: italic;
    padding: 0 3px;
}

 .quoteLink.you:after {
  content: " (You)" ;
  font-size: 100%;
  color: #f9c1ff;
}

floatingMenu,  #quick-reply table {
  background: #000411;
}

.originalNameLink{
    display:inline-block;
    vertical-align:top;
    white-space:nowrap;
    text-decoration: underline;
}

.title {
    color: #d0d0db;
    font-weight: normal;
}

.unhideButton,  .embedButton,  .hideFileButton {
    color: #eee;
}

 .panelBacklinks a {
    color: #f9c1ff;
    text-decoration: none;
}