/* generic minimal CSS reset
   inspiration: https://www.digitalocean.com/community/tutorials/css-minimal-css-reset */

:root {
    box-sizing: border-box;
    line-height: 1.4;
    /* https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/ */
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

/* *, *::before, *::after {
    box-sizing: inherit;
} */

body, h1, h2, h3, h4, h5, h6, p {
    margin: 0;
    padding: 0;
    font-weight: normal;
}

img {
    max-width:100%;
    height:auto;
}

/* custom style */

body {
    margin: 16px;
    font-family: sans-serif;
    color: #454545;
}

.main {
    font-size: 16px;
    column-width: 35em;
    line-height: 1.5;
}

.main>div:first-child {
    text-align: justify;
    font-size: 31px;
    font-weight: bold;
}

.main>div {
    padding-bottom: 24px;
    break-inside: avoid;
}

.main>div a {
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    text-decoration: none;
    width: 1em;
    height: 1em;
    vertical-align: text-top;
    padding-right: 4px;
    flex-shrink: 0;

    background-image: url("/icons/globe.svg");
}

.main>div a[href^="https://www.youtube.com/"] {
    /* background-image: url("https://www.youtube.com/s/desktop/c01ea7e3/img/logos/favicon_144x144.png"); */
    background-image: url("/icons/youtube.png");
    filter: none;
}

.main>div a[href^="https://www.nicovideo.jp/"], .main>div a[href^="https://live.nicovideo.jp/"] {
    /* background-image: url("https://resource.video.nimg.jp/uni/images/favicon/144.png"); */
    background-image: url("/icons/niconico.png");
}

.main>div a[href^="https://www.patreon.com/"] {
    /* background-image: url("https://c5.patreon.com/external/favicon/rebrand/favicon.svg"); */
    background-image: url("/icons/patreon.svg");
    filter: none;
}

.main>div a[href^="https://x.com/"] {
    /* background-image: url("https://abs.twimg.com/favicons/twitter.2.ico"); */
    background-image: url("/icons/twitter.png");
    filter: none;
}

.main>div a[href^="https://www.bilibili.com/"] {
    background-image: url("/icons/bilibili.ico");
    filter: none;
}

.main>div a[href^="https://open.spotify.com/"] {
    background-image: url("/icons/spotify.ico");
    filter: none;
}

.item {
    /* display: flex; */
    /* align-items: center; */
    /* border-bottom: 1px solid #EEEEEE; */
}

.divider {
    display: flex;
}

.divider::after {
    display: block;
    margin-block-start: 0.7em;
    margin-inline-start: auto;
    margin-inline-end: auto;
    unicode-bidi: isolate;
    overflow: hidden;
    border-style: inset;
    border-width: 1px;

    flex-grow: 1;
    height: 0;
    margin-left: 8px;

    content: "";
}

#logo {
    width: 16em;
    float: right;
}

@view-transition {
    navigation: auto;
}

@media (prefers-color-scheme: dark) {
    body {
        background: #1b1b1b;
        color: white;
    }

    #logo {
        filter: invert();
    }

    .main>div a {
        filter: invert();
    }
}