* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
cursor: url("../img/cursor/curs.png"), auto;
}
body {
min-height: 100vh;
overflow-x: hidden;
line-height: 16px;
background: black;
font-family: "MS UI Gothic", "Times New Roman", Times, serif;
font-size: 12px;
color: white;
text-shadow: -1px -1px 0 black, 0px -1px 0 black, 1px -1px 0 black, -1px 0px 0 black, 1px 0px 0 black, -1px 1px 0 black, 0px 1px 0 black, 1px 1px 0 black;
display: flex;
justify-content: center;
padding:0px;
}
a, a:hover, a:active {
cursor: url("../img/cursor/pointer.png"), pointer !important;
}
a {
color: var(--link);
text-decoration: underline dotted #666;
}
a:hover {
background: rgba(90,90,90,0.55);
text-decoration: underline dotted #999;
}
a:active {
color: #e8e8e8;
}
::selection {
background: rgba(255,255,255,0.15);
color: white;
}
.home {
color:#f3f3f3;
text-shadow:
-1px -1px 0 black,
0px -1px 0 black,
1px -1px 0 black,
-1px  0px 0 black,
1px  0px 0 black,
-1px  1px 0 black,
0px  1px 0 black,
1px  1px 0 black;
text-decoration: underline dotted #999;
}
.container {
width: 100%;
max-width: 530px;
margin-top:30px;
margin-bottom:30px;
}
.main {
position: relative;
overflow: hidden;
}
.content {
position: relative;
min-height: 1200px;
backdrop-filter: blur(1px);
}
.content::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
}
.comments-shell {
position: relative;
z-index: 2;
}
.comments-head {
}
.title {
font-size: 48px;
font-family: "Times New Roman", Times;
font-style: italic;
margin-top: 10px;
margin-bottom:10px;
align-self: flex-start;
color:white;
text-shadow: -1px -1px 0 black, 0 -1px 0 black, 1px -1px 0 black, -1px 0 0 black, 1px 0 0 black, -1px 1px 0 black, 0 1px 0 black, 1px 1px 0 black, 0 0 5px rgba(0, 0, 0, 1), 0 0 10px rgba(0, 0, 0, 1);
}
.comments-errors {
margin-bottom: 15px;
padding: 12px;
background: rgba(0,0,0,0.7);
border: 1px solid black;
outline: 1px solid rgba(0,0,0,1);
outline-offset: -3px;
color: #d8b3b3;
}
.comments-errors p + p {
margin-top: 5px;
}
.comments-form {
padding: 15px;
background: linear-gradient(to bottom, #08080f, rgba(0, 0, 0, 1));
outline: 1px solid #0c0c17;
border: 1px solid black;
outline-offset: -2px;
}
.comments-row {
display: flex;
gap: 10px;
margin-bottom: 10px;
}
.comments-input {
background: rgba(0,0,0,0.65);
border: 1px solid black;
color: white;
font-family: inherit;
font-size: 12px;
padding: 8px;
outline: none;
}
.comments-textarea {
width: 100%;
background: rgba(0,0,0,0.65);
border: 1px solid black;
color: #c3c3c3;
font-family: inherit;
font-size: 12px;
padding: 8px;
line-height:16px;
outline: none;
}
.comments-input:focus, .comments-textarea:focus {
}
.comments-input::placeholder, .comments-textarea::placeholder {
}
.comments-textarea {
resize: none;
}
.comments-form-footer {
margin-top: 10px;
display: flex;
justify-content: flex-end;
}
.comments-submit, .comments-pagination-btn {
color: #c3c3c3;
background: linear-gradient(to bottom, #08080f, rgba(0, 0, 0, 1));
outline: 1px solid #0c0c17;
border: 1px solid black;
outline-offset: -2px;
padding: 7px 14px;
font-family: inherit;
font-size: 12px;
cursor: url("../img/cursor/pointer.png"), pointer;
transition: transform 0.08s ease, filter 0.15s ease;
}
.comments-submit:hover, .comments-pagination-btn:hover:not(:disabled) {
background: linear-gradient(to top, #08080f, rgba(0, 0, 0, 1));

}
.comments-submit:active, .comments-pagination-btn:active:not(:disabled) {
transform: translateY(1px);
}
.comments-pagination-btn:disabled {
opacity: 0.4;
cursor: default;
}
.comments-list {
display: flex;
flex-direction: column;
gap: 18px;
}
.comment-thread {
display: flex;
flex-direction: column;
gap: 10px;
}
.comment-card, .comment-reply-card {
position: relative;
padding: 14px;
outline-offset: -3px;
background: linear-gradient(to bottom, #08080f, rgba(0, 0, 0, 1));
outline: 1px solid #0c0c17;
border: 1px solid black;
outline-offset: -2px;
overflow: hidden;
}
.comment-card::before, .comment-reply-card::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
}
.comment-replies {
margin-left: 35px;
margin-top:10px;
padding-left: 10px;
display: flex;
flex-direction: column;
gap: 10px;
}
.comment-meta {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.comment-author-wrap {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.comment-author {
font-size: 16px;
color: white;
font-family: "Times New Roman", Times, serif;
font-weight: normal;
}
.comment-time {
color: #b4b4b4;
white-space: nowrap;
}
.comment-website {
display: flex;
align-items: center;
gap: 6px;
text-decoration:none;
font-size: 12px;
color: #cfcfcf;
}
.website-label {
color: #8d8d8d;
pointer-events:none;
user-select:none;
}
.website-url {
color: #dcdcdc;
text-decoration: none;
padding-left: 8px;
border-left: 1px dotted #444;
margin-top: 10px;
}
.comment-website:hover .website-url {
}
.comment-body {
color: #c3c3c3;
white-space: pre-wrap;
overflow-wrap: break-word;
margin-top:10px;
}
.comment-admin-flag {
color: white;
opacity: 0.8;
}
.is-admin-comment {
background: linear-gradient(to bottom, #270008, rgba(0, 0, 0, 1));
outline: 1px solid #2f010b;
border: 1px solid black;
outline-offset: -2px;
}
.comments-pagination {
display: flex;
justify-content: center;
gap: 10px;
}
.parallax {
position: fixed;
right: 0;
bottom: 0;
pointer-events: none;
will-change: transform;
}
.parallax {
position: fixed;
right: 0;
bottom: 0;
pointer-events: none;
will-change: transform;
width: auto;
height: auto;
zoom: 0.7;
}
.left-flower {
left: 0;
right: auto !important;
zoom: 0.75;
}
@media (max-width: 700px) {
body {
margin: 0;
padding: 15px;
overflow-x: hidden;
margin-left:0;
}
.content {
backdrop-filter: blur(0px);
}
.container {
width: 100%;
max-width: 100%;
}
.main {
width: 100%;
}
}
.parallax {
transform-origin: bottom right;
}
.comments-pagination{
padding:15px;
display:flex;
justify-content:space-between;
align-items:flex-start;
width:100%;
gap:10px;
}
.pagination-info{
color:#aaa;
text-align:left;
white-space:nowrap;
}
.pagination-links{
display:flex;
justify-content:flex-end;
gap:10px;
flex-wrap:wrap;
max-width: 70%;
}
.pagination-links a{
color:#ddd;
text-decoration:none;
padding: 0px 2px;
}
.pagination-links a:hover{
}
.pagination-links .current{
color:#fff;
font-weight:bold;
}
.text {
margin:10px;margin-bottom:15px;color:#c3c3c3
}
.comments-form-footer {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
}

.format-toolbar {
display: flex;
gap: 2px;
}

.format-toolbar button {
    color: #c3c3c3;
    background: linear-gradient(to bottom, #08080f, rgba(0, 0, 0, 1));
    outline: 1px solid #0c0c17;
    border: 1px solid black;
    outline-offset: -2px;
    padding: 7px 8px;
    cursor: pointer;
    font-size: 12px;
    font-family: MS UI Gothic;
}

.format-toolbar button:hover {
background: linear-gradient(to top, #08080f, rgba(0, 0, 0, 1));
}

.emote {
height: 17px;
     image-rendering:pixelated;
    padding: 0px 3px;
    margin-top: -1px;
}
.emote-picker {
    position: relative;
}

.emote-panel {
    display: none;
    position: absolute;
    top: 0px;
    left: 58px;
    height: 28px;
    width: 279px;
    background: linear-gradient(to bottom, #08080f, rgba(0, 0, 0, 1));
    outline: 1px solid #0c0c17;
    border: 1px solid black;
    outline-offset: -2px;
    padding: 7px 8px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2px;

    z-index: 999;
}

.emote-panel.hidden {
    display: none;
}

.emote-panel img {
    width: 14px;
    height: 14px;
}

.emote-panel img:hover {
    transform: scale(1.15);
}