@import 'https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap';

* {
    box-sizing: border-box;
    font-family: Ubuntu
}

a {
    text-decoration: none
}

.meta {
    display: none
}

body {
    display: grid;
    grid-template-rows: 12% 79% 9%;
    grid-template-columns: 100%;
    height: 100vh;
    height: -webkit-fill-available;
    max-width: 1600px;
    min-height: 320px;
    margin: 0 auto;
    background: #121213
}

.header {
    grid-row: 1/2;
    grid-column: 1/2;
    background: #32393d;
    display: flex;
    align-items: center;
    width: 100%
}

.up {
    background: lime
}

.urlup {
    color: lime
}

.down {
    background: red
}

.urldown {
    color: red
}

.scrollbox {
    grid-row: 2/4;
    grid-column: 1/2;
    overflow-y: auto;
    color: #fff;
    background: #000
}

nav {
    min-height: 26px
}

.nav--bottom {
    grid-row: 3/4;
    grid-column: 1/2;
    margin: 10px 20px;
    border-radius: 16px;
    background: #2c2c35;
    z-index: 2
}

.nav--top {
    display: none
}

.nav {
    list-style-type: none;
    padding: 0;
    text-align: center;
    display: flex;
    justify-content: space-between;
    margin: 0;
    align-items: stretch;
    height: 100%
}

.nav--item {
    margin: auto
}

.nav--url:hover {
    color: #fff
}

.nav--url {
    color: #bdbdbd
}

.navXtra {
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    font-size: .8rem;
    margin: 0;
    padding: 4vh 0 0
}

.logo {
    width: 300px;
    max-width: 50vw;
    max-height: 11vh;
    padding: 1vh .9% .9vh 1.7em;
    object-fit: contain
}

.favBoard {
    margin: .5em
}

.favBoard--header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 1rem .4rem
}

.favBoard--title {
    margin: 0
}

.favBoard--url {
    font-size: 1.3rem;
    background: #bb85f0;
    padding: .3rem .6rem;
    border-radius: 20px;
    color: #222;
    white-space: nowrap
}

.postCollection {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(min(15rem, 100%), 1fr);
    overflow-x: auto;
    padding: 0;
    grid-gap: 1.3rem;
    margin-bottom: 3rem
}

.postEntry {
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.postEntry--title {
    color: #bdbdbd;
    padding: 0 .25rem .5rem .5rem;
    margin: 0;
    font-size: 1rem
}

.postEntry--img {
    width: 100%;
    border-radius: 20px
}

.postEntry--linksContainer {
    background: #32393d;
    display: inline-block;
    text-align: center;
    border-radius: 12px;
    min-width: 60%;
    white-space: nowrap
}

.postEntry--links,
.postEntry--visit {
    width: 40%;
    display: inline-block;
    padding: .3rem .4rem;
    margin: .5rem 5%;
    color: #55ffc7
}

.postEntry--visit {
    background: #55ffc7;
    border-radius: 12px;
    color: #222
}

.postEntry--entry {
    position: relative;
    height: 100%
}

.postEntry--published {
    position: absolute;
    right: 0;
    top: 9px;
    background: #222;
    color: #bdbdbd;
    padding: 1px 6px;
    border-radius: 5px 0 0 5px
}

.postEntry--status {
    display: inline-block;
    position: absolute;
    right: 0;
    top: 0;
    font-size: 2rem;
    width: 25px;
    height: 25px;
    border-radius: 0 20px 0 30px
}

.popular {
    margin: 0 1rem;
    display: flex;
    flex-direction: column
}

.popular--entry {
    color: #bb85f0;
    margin: 0 0 .7rem;
    font-size: 1.2rem
}

.popular--arrow {
    font-size: 1.5rem
}

.mainAndSidebar {
    display: flex;
    flex-wrap: wrap
}

.main {
    flex-basis: 0;
    flex-grow: 999;
    min-width: 50%
}

.sidebar {
    flex-basis: 400px;
    flex-grow: 1;
    max-width: 100%
}

.footer {
    height: 18vh;
    padding: 0 2rem;
    background: #32393d
}

.post {
    margin: 1em .5em
}

.post--header {
    text-align: center
}

.post--title {
    font-size: 2rem;
    text-align: left
}

.post--title a {
    color: #bb85f0
}

.post--image {
    max-width: 100%;
    border-radius: 8px
}

.post--aside {
    text-align: center;
    padding: 2em 0
}

.postInfo {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    white-space: nowrap;
    justify-content: space-between;
    margin-bottom: 1em;
    background: #515151;
    border-radius: 12px
}

.postInfo div {
    margin: .6em 1em;
    color: #bdbdbd
}

.postInfo--published,
.postInfo--updated,
.postInfo--category,
.postInfo--rating {
    display: inline;
    margin: 0 0 0 .4em;
    color: #fff
}

.details {
    margin: 3.6em 0
}

.details--title {
    font-size: 2rem;
    margin-bottom: .4em
}

.details--table {
    width: 100%;
    border-collapse: collapse;
    word-wrap: anywhere;
    text-align: left
}

.details--table td,
.details--table th {
    padding: .5em .2em
}

.details--table tr:nth-child(odd) {
    background: #515151
}

.category h2 {
    margin: 0 .1em;
    color: #bb85f0
}

.category p {
    margin: 0 .1em
}

.pagination {
    display: flex;
    justify-content: space-around
}

.pagination--button {
    background: #bb85f0;
    color: #222;
    border-radius: 20px;
    padding: .3rem .6rem
}

.pagination--text {
    margin: 0
}

.commentSection {
    margin: 1em .5em
}

.commentSection--form {
    display: grid;
    grid-template-columns: 63% 33%;
    grid-auto-rows: min-content;
    grid-gap: 1rem
}

.commentSection--status {
    color: #55ffc7;
    font-size: 2rem
}

.commentSection--title {
    grid-column: 1/3;
    font-size: 2rem;
    margin: .1em 0;
    line-height: 1.7rem
}

.commentSection--submit {
    border-radius: 20px;
    background: #515151;
    color: #55ffc7;
    line-height: 1.8rem;
    border: 0;
    cursor: pointer
}

.commentBox {
    grid-column: 1/3;
    display: flex;
    flex-direction: column;
    gap: .8em
}

.commentBox--author,
.commentBox--email,
.captchaBox--answer {
    width: 100%;
    border: none;
    border-radius: 3px;
    line-height: 1.8rem
}

.commentBox--comment {
    width: 100%;
    border: none;
    border-radius: 3px;
    min-height: 100px;
    flex: 1 1 auto
}

.captchaBox {
    grid-column: 1/3
}

.captchaBox--captcha {
    width: 100%
}

.ratingBox {
    grid-column: 1/3
}

.commentSection--submit {
    grid-column: 1/3
}

.comments {
    margin: 4em 0
}

.comments--title {
    font-size: 2rem;
    line-height: 1.7rem;
    margin: .1em 0
}

.comment--details {
    display: flex;
    justify-content: space-between;
    background: #515151;
    padding: .1em 2em;
    margin: 1em 0 0;
    border-radius: 10px
}

.comment--author,
.comment--rating,
.comment--date {
    margin: .6rem 0
}

.comment--body {
    padding: 0 2em 1.2em
}

.altUrls tr td:nth-child(2),
.altUrls tr th:nth-child(2),
.altUrls tr td:nth-child(3),
.altUrls tr th:nth-child(3) {
    white-space: nowrap;
    display: none
}

.searchForm {
    margin: auto;
    max-width: 205px
}

.searchForm--button {
    margin-left: .3em;
    border-radius: 10px;
    background: #bb85f0;
    color: #222;
    line-height: 2em;
    border: 0;
    cursor: pointer;
    padding: .01em .6em
}

.searchForm--field {
    line-height: 1.88em;
    border: none;
    border-radius: 3px;
    outline: none;
    max-width: 60%
}

.star-cb-group {
    font-size: 0;
    unicode-bidi: bidi-override;
    direction: rtl
}

.star-cb-group * {
    font-size: 2.2rem;
    line-height: .7em
}

.star-cb-group>input {
    display: none
}

.star-cb-group>input+label {
    display: inline-block;
    overflow: hidden;
    text-indent: 9999px;
    width: 1em;
    white-space: nowrap;
    cursor: pointer
}

.star-cb-group>input+label:before {
    display: inline-block;
    text-indent: -9999px;
    content: "☆";
    color: #888
}

.star-cb-group>input:checked~label:before,
.star-cb-group>input+label:hover~label:before,
.star-cb-group>input+label:hover:before {
    content: "★";
    color: #e52;
    text-shadow: 0 0 1px #333
}

.star-cb-group>.star-cb-clear+label {
    text-indent: -9999px;
    width: .5em;
    margin-left: -.5em
}

.star-cb-group>.star-cb-clear+label:before {
    width: .5em
}

.star-cb-group:hover>input+label:before {
    content: "☆";
    color: #888;
    text-shadow: none
}

.star-cb-group:hover>input+label:hover~label:before,
.star-cb-group:hover>input+label:hover:before {
    content: "★";
    color: #e52;
    text-shadow: 0 0 1px #333
}

@media(min-width:44em) {
    .nav--bottom {
        display: none
    }

    .nav--top {
        display: block;
        margin: auto
    }

    .nav {
        justify-content: left
    }

    .nav--item {
        margin: auto 1em
    }

    .nav--url {
        font-size: 150%
    }

    .favBoard {
        margin: 2em
    }

    .postCollection {
        grid-auto-flow: unset;
        grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr));
        grid-gap: 1.3rem
    }

    .postEntry--title {
        padding: .6rem .45rem;
        margin: 0;
        font-size: 1.2rem
    }

    .popular {
        margin: 0 2rem
    }

    .footer {
        height: 9vh
    }

    .post {
        margin: 2em
    }

    .postInfo {
        flex-direction: row
    }

    .altUrls tr td:nth-child(3),
    .altUrls tr th:nth-child(3) {
        display: table-cell
    }
}

@media(min-width:72em) {
    .star-cb-group * {
        font-size: 3rem
    }

    .commentSection {
        margin: 2em
    }

    .commentSection--form {
        grid-template-columns: 65% 35%
    }

    .commentBox {
        grid-column: 1/2
    }

    .captchaBox {
        grid-column: 2/3
    }

    .ratingBox {
        grid-column: 1/2
    }

    .commentSection--submit {
        grid-column: 2/3
    }

    .altUrls tr td:nth-child(2),
    .altUrls tr th:nth-child(2) {
        display: table-cell
    }
}

.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #000;
    color: #fff;
    padding: 8px;
    z-index: 100
}

.skip-link:focus {
    top: 0
}

article section {
    width: 100%
}

article img {
    max-width: 100%
}

article section p:first-child,
.intropar {
    text-align: center
}

article h2,
article h3,
article h4,
article h5,
article h6 {
    color: #01447f
}

.list {
    color: #494949
}

li {
    color: #494949
}