/*!
 *  @title          Keyakizaka46
 *  @description    An 8kun theme for the /k46/ board
 *  @author         ozekistyle
!*/

:root {
    --serif:
        Constantia,
        "Lucida Bright",
        Lucidabright,
        "Lucida Serif",
        Lucida,
        "DejaVu Serif",
        "Bitstream Vera Serif",
        "Liberation Serif",
        Georgia,
        serif
    ;
    --sans-serif:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        "Roboto",
        "Helvetica Neue",
        Arial,
        sans-serif,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol"
    ;
    --monospace:
        Consolas,
        "Andale Mono WT",
        "Andale Mono",
        "Lucida Console",
        "Lucida Sans Typewriter",
        "DejaVu Sans Mono",
        "Bitstream Vera Sans Mono",
        "Liberation Mono",
        "Nimbus Mono L",
        Monaco,
        "Courier New",
        Courier,
        monospace
    ;

    --blue_very-soft:           #98c7f3;
    --blue_soft:                #53a2eb;
    --cyan_soft:                #79e1da;
    --cyan_moderate:            #3ad3c9;
    --green_moderate:           #a0d368;
    --lime-green_light-grayish: #d8e7da;
    --lime-green_very-soft:     #a6ed94;
    --lime-green_soft:          #70e253;
    --lime-green_moderate:      #5eb954;
    --magenta_very-soft:        #d9a0eb;
    --magenta_soft:             #c061de;
    --magenta_dark:             #b264a2;
    --pink_light-grayish:       #eed9e0;
    --pink_very-soft:           #f58dc5;
    --pink_bright:              #ef47a1;
    --orange_very-soft:         #f8c68b;
    --orange_bright:            #f4a343;
    --red_soft:                 #fb8a8f;
    --red_bright:               #f84048;
    --yellow_soft:              #f5e674;
    --yellow_bright:            #f0d92d;
    --gray_very-light:          #f3f3f3;
    --gray_light:               #c9c9c9;
    --gray_dark:                #a3a3a3;
    --gray_darker:              #8d8d8d;
    --white_50:                 rgba(255, 255, 255, .5);
}

body {
    background-image:   none;
    background-color:   var(--gray_very-light);
    font-family:        var(--sans-serif);
    font-size:          .875rem;
}

.desktop-style div.boardlist:not(.bottom) {
    padding:                .5rem;
    border-bottom-width:    .1rem;
    border-color:           var(--gray_dark);
    box-shadow:             0 .3rem var(--gray_light);
    background-color:       var(--green_moderate);
    color:                  white;
}

.desktop-style div.boardlist:not(.bottom) a, .desktop-style div.boardlist:not(.bottom) a:visited {
    color:  white;
}

.desktop-style div.boardlist:not(.bottom) a:hover {
    color:  var(--gray_darker);
}

div.boardlist {
    font-size:  .875rem;
    color:      var(--gray_darker);
}

.desktop-style .sub {
    font-size:  .875rem;
}

div.pages {
    margin:                 .5rem;
    padding:                .5rem;
    border-bottom-width:    .1rem;
    border-color:           var(--gray_dark);
    box-shadow:             .3rem .3rem var(--gray_light);
    background-color:       var(--green_moderate);
    color:                  white;
}

div.pages a, div.pages a:visited, div.pages a.selected {
    color:  white;
}

div.pages a:hover {
    color:  var(--gray_darker)
}

header {
    margin:         4rem 0;
    font-family:    var(--serif);
    font-style:     italic;
}

header div.subtitle {
    font-size:  .75rem;
}

hr {
    margin:         1rem 0;
    border-width:   1.5rem 0 0 0;
    border-style:   dotted;
    border-color:   var(--pink_light-grayish);
}

h1 {
    font-size:      2rem;
    font-family:    var(--serif);
}

a, a:visited {
    color:  var(--magenta_dark);
}

a:hover {
    color:  var(--red_soft);
}

em {
    font-family:    var(--serif);
}

pre {
    font-size:      .75rem;
    font-family:    var(--monospace);
}

div.banner {
    margin-bottom:      4rem;
    padding:            1rem;
    border-width:       .1rem;
    border-style:       solid;
    border-color:       var(--lime-green_soft);
    background-image:   linear-gradient(
        90deg,
        var(--green_moderate),
        var(--magenta_dark)
    );
    background-color:   var(--green_moderate);
}

form table tr th {
    background-color:   var(--magenta_very-soft);
}

table tbody tr:nth-of-type(2n) {
    background-color:   var(--pink_very-soft);
}

.required-star {
    color:  var(--red_bright);
}

div.blotter {
    color:  var(--red_bright);
}

form[name="postcontrols"] {
    padding-top:        1rem;
    background-image:   linear-gradient(
        135deg,
        var(--lime-green_light-grayish) 10%,
        var(--gray_very-light) 10%,
        var(--gray_very-light) 80%,
        var(--pink_light-grayish) 80%
    );
    background-color:   var(--gray_very-light);
}

div.thread {
    max-width:          100rem;
    margin-right:       auto;
    margin-left:        auto;
    padding:            1rem;
    border-width:       .1rem;
    border-radius:      1rem;
    border-style:       solid;
    border-color:       var(--green_moderate);
    background-color:   var(--white_50);
}

div.post.reply {
    margin:             .5rem;
    padding:            1rem;
    border-width:       .1rem;
    border-radius:      .6rem;
    border-style:       solid;
    border-color:       var(--gray_dark);
    box-shadow:         .3rem .3rem var(--gray_light);
    background-color:   white;
}

div.post.reply.highlighted {
    background-color:   var(--pink_light-grayish);
}

div.post p {
    font-size:  .875rem;
}

p.fileinfo {
    margin: 0 0 .5rem 0;
}

.post-image {
    margin: 0 1rem 1rem 0;
}

div.post.op {
    margin: 0;
}

div.post_modified div.content-status:first-child {
    margin-top: 1.5rem;
    font-size:  .75rem;
}

.intro span.name {
    color:  var(--lime-green_moderate);
}

.intro span.capcode {
    color: var(--red_bright);
}

.intro span.subject {
    color: var(--blue_soft);
}

.quote {
    color:  var(--green_moderate);
}

.rquote {
    color:  var(--red_soft);
}

span.heading {
    color:  var(--red_bright);
}

span.pln {
    color:  var(--gray_darker);
}

.theme-catalog div.thread {
    padding:            .6rem;
    border-width:       .1rem;
    border-radius:      1rem;
    border-color:       var(--green_moderate);
    background-color:   var(--white_50);
    font-size:          .75rem;
}

.theme-catalog div.thread:hover {
    border-color:       var(--lime-green_soft);
    background-color:   var(--lime-green_light-grayish);
}

#favorite-star {
    font-style: normal;
}

#favorite-star[style^="color: grey;"] {
    color:  var(--gray_light) !important;
}

#favorite-star[style^="color: yellow;"] {
    color:  var(--yellow_bright) !important;
}