@import url('https://fonts.googleapis.com/css2?family=SUSE:wght@100..800&display=swap');

body {
    font-family: 'SUSE', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    display: flex;
    justify-content: space-between;
    padding: 24px;
    gap: 24px;
    flex-wrap: wrap;
}

.music-container {
    display: flex;
    justify-content: space-between;
}

.music-container img {
    width: 128px;
    height: 128px;
}

code {
    border-radius: 3px;
    font-family: courier, monospace;
    padding: 0 3px;
}

@media (prefers-color-scheme: light) {
    body {
        background-color: #fff;
        color: #000;
    }

    code {
        background-color: #eee;
    }

    a {
        color: #111;
    }
}

.giscus {
    width: 100%;
}

@media (prefers-color-scheme: dark) {
    body {
        background-color: #000;
        color: #fff;
    }

    code {
        background-color: #111;
        color: #888;
    }
    
    a {
        color: #eee;
    }
}

div.left {
    max-width: 800px;
    flex: 1 1 45%;
}

div.right {
    flex: 1 1 45%;
}

@media (max-width: 900px) {
    body {
        flex-direction: column;
    }

    div.left {
        width: 100%;
        max-width: 800px;
    }

    div.right {
        width: 100%;
        max-width: 100%;
    }
}

.muted {
    color: grey;
}

.strike {
    text-decoration: line-through;
}

#email::before {
    content: "mail@dainfloop.is-a.dev";
}

ul li, ol li {
    margin: 4px;
}

a:hover {
    cursor: pointer;
}

.header {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    vertical-align: middle;
    gap: 12px;
}

.header img {
    width: 48px;
    height: 48px;
}