:root {
    --main-color: #CE5151
}

/* Fonts */
@font-face {
    font-family: 'Josefin Sans';
    src: url("/font/JosefinSans-Regular.ttf");
    font-weight: normal;
    font-style: normal;
}

html, body { 
    padding: 0; 
    margin: 0; 
    overflow-x: clip; 
    overflow-y: auto; 
    font-family: Verdana, Geneva, Tahoma, sans-serif; 
    height: 100%; 
    display: flex;
    flex-direction: column;
}
h1, h2, h3, h4, h5, h6 { 
    font-family: 'Josefin Sans', Verdana, Geneva, Tahoma, Arial, sans-serif; 
    color: #CE5151;
    color: var(--main-color);
    font-weight: lighter;
    margin: 2px 0px;
}
p { 
    display: inline-block;
    color: #9D9D9D;
    margin: 2px;
    font-size: 8px;
    white-space: pre-wrap;
    word-break: break-word;
}
input:focus-visible, input:-webkit-autofill, input:-webkit-autofill:focus {
    outline: none;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
}
input[type="radio"] {
    border-radius: 10px;
    cursor: pointer;
    display: inline-block;
    margin: 0 2px -4px 0px;
    height: 15px;
    position: relative;
    width: 15px;
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid #ddd;
}
input[type="radio"]:after {
    background-color: #838383;
    border-radius: 25px;
    content: '';
    display: block;
    height: 7px;
    left: 3px;
    position: relative;
    top: 3px;
    width: 7px;
}
input[type="radio"]:checked:after {
    background-color: #f66;
    box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.4),
                inset 0 2px 2px hsla(0,0%,100%,.4),
                0 1px 1px hsla(0,0%,100%,.8),
                0 0 2px 2px hsla(0,70%,70%,.4);
}
a { color: #3399CC }
a:focus { color: #355F9F }
small { color: gray; font-size: 8px }
label { display: inline-grid }
blink {
	animation:blink 0.75s ease-in infinite alternate!important;
}
code {
    display: block;
    background: black;
    font-family: monospace;
}
#entry-body img, .blog-body img, .group img {
    max-width: 330px;
}
select {
    border: 1px solid #acacac;
    font-size: 8px;
}
fieldset {
    border: 1px solid #E1E1E1;
    padding: 2px 4px;
    margin: 0
}
@keyframes rainbow-flow {
    0% { background-position: 50% 0% }
  100% { background-position: -200%; }
}
@keyframes blink {
	0% { opacity:1 } 75% { opacity:1 } 76% { opacity:0 } 100% { opacity:0 }
}
#popup-window {
    width: 100%;
    height: 100%;
    position: absolute;
    background: #0000004d;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
}
iframe {
    border: none;
    min-width: 100%;
    min-height: 100%;
}
iframe#profile-viewer {
    width: 1000px;
    height: 100%;
}
iframe#profile-viewer::-webkit-scrollbar {
    width: 0;
    background: transparent;
}
iframe#profile-viewer::-webkit-scrollbar-thumb {
    background: #FF0000;
}
#dialog {
    position: relative;
    width: 1042px;
    height: 700px;
    background: white;
    overflow: auto;
    box-shadow: 0 0 5px #00000094;
    opacity: 0;
    transition : all .3s;
    -wekit-transition : all .3s;
    -moz-transition : all .3s;
}
.rainbow {
    color: rgba(0, 0, 0, 0.459);
    background: linear-gradient(to right,
            red, orange, yellow, green, blue, indigo, violet, indigo, blue, green, yellow, orange, red);
    background-size: 500%;
    animation: rainbow-flow infinite linear 36s;
    -webkit-background-clip: text;
    background-clip: text;
}
table.list td { 
    padding: 1px 0px;
    line-height: 14px;
    border-bottom: 1px dotted #9D9D9D;
}
table.list.noline td { 
    border: none !important;
    padding: 0px;
    line-height: 1.5;
}
table.list { 
    font-size: 9px; 
    width: 100%;
    color: #9D9D9D;
}
.column {
    display: flex;
    flex-direction: column
}
.theme img {
    margin: 5px 0;
}
.poll {
    overflow: hidden;
    overflow: clip;
    box-shadow: inset -1px 2px 2px -2px black;
}
.poll-buttons {
    display: flex;
    justify-content: center;
    margin-top: 11px;
}
.poll-buttons button {
    margin-left: 20px
}
.poll .tube {
    position: relative;
    background: repeating-linear-gradient(210deg, var(--main-color) 0 5%, RGB(179, 72, 72) 0 10%);
    right: 0%;
    height: 100%;
    transition: all 1s ease
}
#poll-options {
    width: 100%;
    margin-top: 5px;
}
nav#topbar {
    padding: 5px 0px 5px 11px;
    height: 12px;
    margin-bottom: 2px;
    color: white;
    background-color: #CE5151;
    background: var(--main-color);
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    z-index: 999999999;
    box-shadow: 0 0 5px #00000057;
}
nav#topbar #logo {
    margin-right: 36px;
    float: left;
    height: 11px;
    width: auto
}
ul#site-options, ul#user-options {
    list-style-type: none;
    margin: 0;
    font-family: 'Josefin Sans', Verdana, Geneva, Tahoma, Arial, sans-serif;
    font-size: 11px
}
ul#site-options li, ul#user-options li {
    display: inline-block;
    margin-right: 20px;
    color: white !important
}
ul#site-options { float: left } ul#user-options { float: right }
#main { 
    padding: 10px;
    height: 100%;
}
#page-nav {
    padding: 12px 0px 20px 0px;
    text-align: center;
}
#page-nav button.current {
    text-decoration: none;
    margin: 2px;
    font-weight: bold;
    background: white;
    border: none;
    color: #888;
}
#page-nav * {
    text-decoration: none;
    border: 1px solid #c8c8c8;
    padding: 3px 5px;
    margin: 2px;
    color: #c8c8c8;
    background: white;
}
#left { width: 640px }
.expand-x { width: 100% }
.group { margin-bottom: 10px }
.bottom { bottom: 0;position: absolute; }
.dropdown {
    position: absolute;
    width: 117px;
    background-color: #A44242;
    top: 16px;
    right: -22px;
    box-shadow: inset 0 2px 2px -2px #0000004f;
    z-index: 99
}
.dropdown ul { padding: 0; display: grid }
.dropdown ul a li { padding: 4px }
.dropdown ul a:hover { background-color: #CE5151 }
.dropdown ul a:hover { background: var(--main-color); }
.hidden { display: none !important; visibility: hidden }
.link { cursor: pointer }
.carousel { 
    display: flex; 
    align-items: center; 
    width: 100%;
}
.carousel-arrow { 
    background: url("/images/ui/carousel arrow.png");
    background-position-x: left;
    width: 12px;
    height: 20px;
}
.carousel-arrow.right { 
    background: url("/images/ui/carousel arrow.png");
    background-position-x: right;
    width: 12px;
    height: 20px;
}
.carousel-content {
    scroll-snap-type: x mandatory;
    overflow: auto;
    scroll-behavior: smooth;
    align-items: center;
    flex-grow: 1;
    display: flex;
    margin: 6px;
    width: 250px
}
.carousel-content::-webkit-scrollbar { display: none }
.carousel-content {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
    div {
        align-items: anchor-center
    }
}

/* Comments */
#comments-section { 
    margin-top: 20px; 
    max-width: 368px 
}
#comment-box {
    display: flex;
    flex-direction: column;
}
button {
    border-color: transparent;
    color: #888;
    font-size: 9px;
    cursor: pointer
}
button:hover, button#follow.followed {
    background-color: white !important;
    color: #ffc40c !important;
    border: 1px solid #ffc40c !important;
}
textarea {
    width: 100%;
    min-height: 60px;
    border: 1px solid #5b5b5b;
    border-style: dotted;
    font-size: 9px;
    outline: none;
    color: #828080;
    resize: none;
    margin-top: 10px;
}
.col1 { width: 83px }
.col2 { margin: 10px 6px; width: 275px }
.col3 { width: 350px; margin: 10px 6px 0 0 }
.col4 { width: 300px; margin: 13px 0 }
.comment { 
    display: flex;
    margin: 4px 0px 13px 0px;
    transition: all 1s ease;
    outline-offset: 0px;
    background: none
}
.comment img {
    max-width: 100%;
}
.comment.focus {
    background: #eee;
    outline: 1px solid #eee;
    outline-offset: 2px;
}
.post { 
    margin-left: 3px; 
    position: relative;
    width: 100%;
}
.post-pfp {
    object-fit: cover;
    border: 1px solid #CE5151;
    border: 1px solid var(--main-color);
    object-position: left;
    width: 47px;
    height: 47px;
    border-style: dotted;
}
.post-message p { margin: 0; width: 100%; }
#entry, #poll { width: 650px; margin: 10px 6px }
.entry-title, .poll-title { margin: 6px 0px 3px 0px }
#entry-date { color: #828282; font-size: 8px; display: inline }
#entry-date #last-modified, #view-count { float: right }
#entry-body {
    display: inline-block;
    color: #9D9D9D;
    font-size: 8px;
    margin-top: 7px;
    width: 100%
}
textarea#articleEdit {
    resize: vertical;
    height: 308px;
}

#music-player {
    margin-top: 5px;
    text-align: center;
    width: 100%;
}
#music-player table {
    padding: 2px 0px 4px 1px;
    background: #464646;
    width: 227px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

#music-player #seek-slider {
    left: 48px;
    top: 4px;
}

#music-player #toggle-btn {
    float: left;
    padding: 0 3px;
}

#music-player small { color: #979797 }
#music-player #progress-bar { background: #e1e1e1 }
#music-player #seek-bar { background: #9f9f9f }