/*
    Theme Name: Iconic One Dark
    Theme URI: https://themonic.com/iconic-one/
    Template: iconic-one
    Author: Nayu
    Author URI: https://nayulog.com
    Description: This is Iconic One Dark theme. (Original theme created by Themonic https://themonic.com)
    Version: 3.2.4
    Requires at least: 6.7
    Tested up to: 6.9
    Requires PHP: 7.2
    License: GNU General Public License v2 or later
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    Tags: blog, one-column, two-columns, right-sidebar, custom-background, custom-menu, custom-logo, full-width-template, rtl-language-support, theme-options, custom-colors, flexible-header, translation-ready, news, e-commerce, sticky-post, featured-images, threaded-comments
    Text Domain: iconic-one

    ©2023 Shashank Singh, Themonic.com
    ©2020 Nayu, nayulog.com
*/

:root {
    --main-blue: #0099ff;
}

@media (prefers-color-scheme: dark) {
    :root {
        --main-blue: #0a84ff;
    }
}

h1 {
    margin: 0 0 1.5em;
    padding: 0.5em;
    font-weight: bold;
    border: 2px solid var(--main-blue);
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4);
}

h2 {
    margin: 0 0 1.5em;
    padding: 0.7em;
    border: 2px solid var(--main-blue);
    font-size: 1.3em;
    font-weight: bold;
    border-radius: 10px;
}

h3 {
    border-left: 6px solid var(--main-blue);
    background: linear-gradient(transparent 70%, var(--main-blue) 85%);
    padding: 0.5em 0.7em 0em 0.7em;
}

h4 {
    position: relative;
    padding: 0.25em 1.5em 0.25em 0.5em;
}

h4:after {
    content: "";
    display: block;
    height: 4px;
    background: -webkit-linear-gradient(to right, var(--main-blue), transparent);
    background: linear-gradient(to right, var(--main-blue), transparent);
}

h5 {
    padding: 0.5em;
    padding-right: 2em;
    display: inline-block;
    line-height: 1.3;
    border: 3px solid var(--main-blue);
    vertical-align: middle;
    border-radius: 25px 0px 0px 25px;
}

h5:before {
    content: '●';
    color: var(--main-blue);
    margin-right: 8px;
}

h6 {
    border-top: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
    padding: 0.4em 0.5em;
}


/*--------------------------------------
ダークモード
--------------------------------------*/

@media (prefers-color-scheme: dark) {
    :root {
        --deep-black-color: #000000;
        --middle-black-color: #1c1c1e;
        --pale-black-color: #292929;
        --gray-color: #8d8d93;
        --white-color: #ffffff;
    }

    .io-title-description a {
        color: var(--white-color);
    }

    .themonic-nav ul.nav-menu,
    .themonic-nav div.nav-menu>ul {
        border-top: 1px solid var(--gray-color);
        background-color: var(--pale-black-color);
    }

    .themonic-nav li a {
        color: var(--gray-color);
    }

    .site-content {
        border-right: 1px solid var(--gray-color);
    }

    @media screen and (max-width: 768px) {
        .site-content {
            border: none !important;
        }
    }

    .site-content nav {
        border-top: 1px solid var(--gray-color);
        border-bottom: 1px solid var(--gray-color);
        border-left: 1px solid var(--gray-color);
        border-right: 1px solid var(--gray-color);
        background: var(--pale-black-color);
        color: var(--white-color);
    }

    .site-header {
        border-top: 1px solid var(--gray-color);
        border-bottom: 1px solid var(--gray-color);
        border-left: 1px solid var(--gray-color);
        border-right: 1px solid var(--gray-color);
    }

    .wrapper {
        border: 1px solid var(--gray-color);
    }

    @media screen and (max-width: 768px) {
        .wrapper {
            border: none !important;
        }
    }

    body {
        background-color: var(--deep-black-color);
        color: var(--white-color);
    }

    #main {
        background-color: var(--middle-black-color);
    }

    #page {
        background-color: var(--middle-black-color);
    }

    .navigation {
        background-color: var(--pale-black-color);
        color: var(--white-color);
    }

    .widget-title {
        background-color: var(--pale-black-color) !important;
        color: var(--white-color);
    }

    .widget-area .widget a {
        color: var(--white-color);
    }

    .entry-header .entry-title a {
        color: var(--white-color);
    }

    .widget-area .widget li,
    .widget-area .widget .textwidget {
        border-bottom: 1px solid var(--gray-color);
    }

    .widget-area #s {
        color: var(--gray-color);
    }

    .entry-meta>span a {
        color: var(--white-color);
    }

    .below-title-meta {
        background-color: var(--pale-black-color);
        color: var(--white-color);
    }

    .below-title-meta a {
        color: var(--gray-color);
    }

    .nav-previous a,
    .nav-next>a {
        color: var(--white-color) !important;
    }

    footer {
        background-color: var(--pale-black-color) !important;
        border-top: 1px solid var(--gray-color) !important;
        border-bottom: 1px solid var(--gray-color) !important;
    }

    footer.entry-meta {
        color: var(--gray-color);
    }

    .entry-content blockquote,
    .comment-content blockquote {
        background-color: var(--pale-black-color);
        border-left: 4px solid var(--gray-color);
        border-right: 4px solid var(--gray-color);
    }

    .entry-content td,
    .comment-content td {
        border: 1px solid var(--gray-color);
    }

    .entry-content table,
    .comment-content table {
        color: var(--white-color);
    }

    .entry-content th,
    .comment-content th {
        background-color: var(--gray-color);
        color: var(--deep-black-color);
    }

    del {
        color: var(--white-color);
    }

    #toc_container p.toc_title {
        color: var(--deep-black-color);
    }

    .entry-content pre,
    .comment-content pre {
        color: var(--white-color);
    }

    .enlighter-t-enlighter {
        background: var(--white-color);
    }

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

    .entry-header .entry-title a:hover {
        color: var(--gray-color);
    }

    .io-title-description a:hover {
        color: var(--gray-color);
    }

    .io-title-description .site-description:hover {
        color: var(--gray-color) ;
    }

    .enlighter-t-enlighter .enlighter-text:hover {
        color: var(--deep-black-color);
    }

    #toc_container a:hover {
        color: var(--deep-black-color);
    }
}