/* CS1 Background and text colours
-------------------------------------------------------------*/

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.5);
}

::-webkit-scrollbar-thumb {
    background-color: #00b0f0;
}

* {
    scrollbar-width: thin;
    scrollbar-color: #00b0f0 transparent;
}

body {
    background: url(https://i.imgur.com/4aGkUYB.jpg) center no-repeat #043557 !important;
    background-size: cover !important;
    background-attachment: fixed;
    color: #bdbdbd;
}

body> #pun, body > #pun_wrap {
    background: url(https://i.imgur.com/KVXLuf9.jpg) center no-repeat;
    background-size: cover;
    background-attachment: fixed;
    border: 1px solid #00b0f0;
}

/* CS1.1 */
.category table, .forum table {
    display: block;
}
.category thead, .forum thead {
    display: none;
}
tbody.hasicon {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}
tbody.hasicon > tr {
    width: 100%;
    background-color: rgba(14, 17, 27, 0.85);
    margin-bottom: 3px;
    border: 1px solid #00b0f0;
}
#pun-index tbody.hasicon > tr {
    position: relative;
    display: flex;
    width: calc(50% - 10px);
    flex: 1 1 auto;
    flex-direction: row;
    flex-wrap: wrap;
    overflow: hidden;
}
#pun-index tbody.hasicon > tr:nth-child(even) {
    margin-left: 10px;
}
#pun-searchtopics .main tbody.hasicon > tr, #pun-viewforum .main tbody.hasicon > tr {
    display: flex;
    min-height: 51px;
    padding-left: 50px;
}
tbody.hasicon > tr.inew {
    background-color: rgb(4 27 52 / 85%);
    border: 1px solid #ff358b;
}

tbody.hasicon > tr.inew a {
    color: #ff358b;
}

.punbb .main tbody.hasicon > tr.inew .tcr .user-avatar {
    border: 1px solid #ff358b;
}

#pun-index #pun-stats, #pun-index #pun-break3,
#pun-index #pun-break4, #pun-index #pun-crumbs2,
#pun-index #pun-about, #pun-index #html-footer {
    margin: 0 -30px;
    background: rgba(14, 17, 27, 0.85);
    padding-left: 40px;
    padding-right: 40px;
}

#pun-index #pun-stats {
    margin-top: 30px;
}

#pun-stats h2 {
    margin: 0 -40px;
    background: rgba(0, 0, 0, 0.5);
    border-width: 1px 0 1px 0;
    border-style: solid;
    border-color: #00b0f0;
    padding: 10px 40px;
    text-align: center;
    color: #00b0f0;
    font-weight: bold;
}

#pun-stats .statscon {
    padding-top: 20px;
}

.statscon .item1, .statscon .item2, .statscon .item3, .statscon .item4 {
    text-align: right;
}

#pun-about {
    padding-bottom: 40px;
}

/* CS1.3 */
.punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2 {
    background-color: transparent;
    color: #fff;
    text-align: right;
    font-weight: bold;
    font-size: 20px;
    text-shadow: 0 0 5px #00b0f0;
}

/* CS1.4 */
#pun-title, #pun-title .container, .punbb .modmenu .container {
    background-color: transparent;
}

/* CS1.5 */
.punbb legend span, #viewprofile h2 span, #profilenav h2 span, .punbb-admin #pun-admain legend span {
    background-color: transparent;
}

/* CS1.6 */
.punbb .post h3 span, .punbb th, #viewprofile li, #setmods dl {
    background-color: transparent;
}

/* CS1.7 */
.punbb .quote-box, .punbb .code-box {
    background-color: transparent;
}

/* CS1.8 */
#pun-navlinks .container {
    background-color: transparent;
}

.offline li.pa-online strong {
    font-weight: normal
}

#pun-stats .container {
    display: grid;
    grid-template-columns: 70% 30%;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    gap: 0px 0px;
    grid-template-areas:
        "online topics"
        "online messages"
        "activists registered"
        "activists lastregistered";
}
.statscon .onlinelist { grid-area: online; }
.statscon .users_24h { grid-area: activists; }
.statscon .item1 { grid-area: topics; }
.statscon .item2 { grid-area: messages; }
.statscon .item3 { grid-area: registered; }
.statscon .item4 { grid-area: lastregistered; }

#pun-live-rusff {
    display: none !important;
}

#html-footer {
    padding-bottom: 30px;
}

#design-copyright {
    position: fixed;
    bottom: 0;
    right: 31px;
    padding: 8px 1px;
    color: #f92672;
    user-select: none;
}

.usertable, .section.online-list {
    background-color: rgba(14, 17, 27, 0.85);
    border: 1px solid #00b0f0;
}

.punbb input[type="submit"], .punbb button,
#pun-admain input[type="submit"], #pun-admain button {
    font-weight: bold;
    color: #eee;
    font-size: 1.5em;
    cursor: pointer;
    transition: .5s;
}

input[type="submit"]:hover, button:hover {
    color: #00b0f0;
}

.scroll-arrows {
    position: fixed;
    width: 30px;
    height: 30px;
    bottom: calc(50% + 10px);
    transition: 1.5s;
    cursor: pointer;
    z-index: 16;
    right: 0;
    background: url(https://i.imgur.com/pwB2tSx.png);
    transform: rotateZ(-90deg);
}

.scroll-arrows.go-down {
    margin-bottom: -40px;
    transform: rotateZ(90deg);
}

.pa-avatar img, #pa-avatar img, .punbb img.avatardemo {
    border: 1px solid #00b0f0;
    box-shadow: 0 0 15px #00b0f0;
}

.online .pa-avatar img {
    border: 1px solid #f92672;
    box-shadow: 0 0 15px #b51e60;
}

body.redirect-page {
    background-image: url(https://i.imgur.com/4aGkUYB.jpg) !important;
    background-size: cover !important;
}

.redirect-page #pun {
    background-image: url(https://i.imgur.com/KVXLuf9.jpg) !important;
}

.redirect-page .punbb .info .container {
    background-color: rgba(14, 17, 27, 0.85);
    border: 1px solid #00b0f0;
    padding: 30px;
}

.mod-awards-list .fr {
    padding-left: 20px;
}

#profile-gifts {
    margin-left: 30%;
    padding: 20px 0;
}

#pun-announcement.be-void .announcement-logo {
    display: none;
}

#pun-announcement.be-void .container {
    height: auto;
}

.announcement-logo {
    height: 90%;
    width: 100%;
    background: url(https://forumstatic.ru/files/001b/81/44/31621.svg) no-repeat center;
    display: block;
}

.html-box {
    position: relative;
    height: 100%;
}

.punbb .custom_tag_header {
    text-align: center;
    font-size: 1.6em;
    font-weight: bold;
    padding: 0;
    margin-bottom: 20px;
    color: #eee;
    background: rgb(6 37 68 / 50%);
    border-radius: 20px;
}

#tags .container {
    border: 1px solid #00b0f0;
    background-color: rgba(14, 17, 27, 0.85);
}

.punbb .post-content .custom_tag_header > p {
    padding: 0px;
}

.nippon-font {
    color: #f3cd14;
}

/* CS3 Links
-------------------------------------------------------------*/

/* CS3.1 */
.punbb a, .punbb a:link, .punbb a:visited,
.punbb-admin #pun-admain a, .punbb-admin #pun-admain a:link, .punbb-admin #punbb-admain a:visited {
    color: #2aacdb;
    text-decoration: none;
    transition: .5s;
}

.punbb li.isactive a, .punbb li.isactive a:link, .punbb li.isactive a:visited {
    color: #f92672;
}

/* CS3.2 */
.punbb a:hover, .punbb a:focus, .punbb a:active, .punbb-admin #pun-admain .nodefault,
.punbb-admin #punbb-admain a:hover, .punbb-admin #punbb-admain a:focus, .punbb-admin #punbb-admain a:active {
    color: #f92672;
}

/* CS3.3 */
#pun-navlinks a {
    color: #eee;
    text-decoration: none;
}

#pun-ulinks li a {
    color: #00b0f0;
}

#pun-ulinks li a:hover {
    color: #f92672;
}

/* CS3.4 */
#pun-navlinks a:hover, #pun-navlinks a:focus, #pun-navlinks a:active {
    color: #fff;
}

#pun-pagelinks a:active, #pun-pagelinks a:focus {
    background-color: #333;
    color: #fff;
}

.modmenu a {
    background-color: rgba(14, 17, 27, 0.85);
    border: 1px solid #00b0f0;
    padding: 0 10px;
}

/* CS4 Post status icons
 -------------------------------------------------------------*/

div.icon {
    border-color: #E6E6E6 #DEDEDE #DADADA #E2E2E2
}

tr.iredirect div.icon {
    border-color: #F7F7F7 #F7F7F7 #F7F7F7 #f7f7f7
}

div.inew {
    border-color: #0080D7 #0065C0 #0058B3 #0072CA
}

#pun-main div.catleft, #pun-main div.catright {
    display: none
}

/* CS5 Falling starts, made according to lesson https://www.youtube.com/watch?v=xDTiPkQeR2M (c) Fumuse
 -------------------------------------------------------------*/

#fallingStar {
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    overflow: hidden;
}
#fallingStar span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 4px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1), 0 0 0 8px rgba(255, 255, 255, 0.1), 0 0 20px rgba(255, 255, 255, 1);
    animation: fallingStar 3s linear infinite;
    opacity: 0;
}
#fallingStar span:before {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 300px;
    height: 1px;
    background: linear-gradient(90deg, white, transparent);
}
@keyframes fallingStar {
    0% {
        transform: rotate(315deg) translateX(0);
        opacity: 1;
    }
    70% {
        opacity: 1;
    }
    100% {
        transform: rotate(315deg) translateX(-100vw);
        opacity: 0;
    }
}
#fallingStar span:nth-child(1) {
    top: 0;
    right: 0vw;
    left: initial;
    animation-delay: 0;
    animation-duration: 1s;
}
#fallingStar span:nth-child(2) {
    top: 0;
    left: initial;
    right: 8vw;
    animation-delay: 0.2s;
    animation-duration: 3s;
}
#fallingStar span:nth-child(3) {
    top: 80px;
    left: initial;
    right: 0vw;
    animation-delay: 0.4s;
    animation-duration: 2s;
}
#fallingStar span:nth-child(4) {
    top: 0px;
    left: initial;
    right: 18vw;
    animation-delay: 0.6s;
    animation-duration: 1.5s;
}
#fallingStar span:nth-child(5) {
    top: 0px;
    left: initial;
    right: 40vw;
    animation-delay: 0.8s;
    animation-duration: 2.5s;
}
#fallingStar span:nth-child(6) {
    top: 0px;
    left: initial;
    right: 60vw;
    animation-delay: 1s;
    animation-duration: 3s;
}
#fallingStar span:nth-child(7) {
    top: 300px;
    left: initial;
    right: 0px;
    animation-delay: 1.2s;
    animation-duration: 1.75s;
}
#fallingStar span:nth-child(8) {
    top: 0px;
    left: initial;
    right: 70vw;
    animation-delay: 1.4s;
    animation-duration: 1.25s;
}
#fallingStar span:nth-child(9) {
    top: 0px;
    left: initial;
    right: 100vw;
    animation-delay: 0.75s;
    animation-duration: 2.25s;
}
#fallingStar span:nth-child(10) {
    top: 0px;
    left: initial;
    right: 45vw;
    animation-delay: 2.75s;
    animation-duration: 2.25s;
}

/* CS6 Admin styles
 -------------------------------------------------------------*/

#pun-admain fieldset .handle, #pun-admain fieldset p {
    background-color: #102b3f !important;
    border-color: #20364c !important;
}

.adcontainer {
    border-color: #00b0f0 !important;
    border-style: solid !important;
    border-width: 1px !important;
    background-color: rgba(14, 17, 27, 0.85);
}

#pun-admain legend {
    padding: 0 !important;
    margin: 0 !important;
    font-size: 1.25em !important;
    color: #eee !important;
}

#pun-admain legend span {
    padding: 0 5px !important;
    margin: 0 -5px 0 !important;
}

.adformal h2, #pun-adnav h2 {
    border-style: none !important;
    border-width: 0 !important;
}