/*
Theme Name: PandaTimes
Description: ブログ専用のオリジナルテーマ
Author: あなたのお名前
Version: 1.0.0
*/

/* ここから下に実際のCSS（デザインのコード）を書いていきますが、今は空でOKです */

@charset "UTF-8";

:root {
    --radius: 12px;
    --radius_min: 6px;
    --bg_color: #ebebeb;
    --bg-light: #efefef;
    --border-color: #ccc;
    --active-color: #ebebeb;
    --panda_gap: 6px;
    --panda_anime: all 0.2s ease-in-out;
}

h1, h2, h3, h4, h5, h6, strong {
    font-feature-settings: "palt";
}

.post-sort-buttons {
    margin: 0px auto 24px 0;
    width: fit-content;
    display: flex;
    gap: 10px;
}

.post-sort-buttons a.sort-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    width: 6em;
    border: 1px solid var(--border-color);
    border-radius: var(--radius_min);
    transition: var(--panda_anime);
}

.post-sort-buttons a.sort-btn.active {
    background-color: var(--active-color);
}


@media (hover: hover) {
    .post-sort-buttons a.sort-btn:hover {
        background-color: var(--accent_color);
        color: #fff;
    }
}

div[class*="pandastudio-embed-design-"] ~ div[class*="pandastudio-embed-design-"],
.pandastudio-embed {
	margin-top: 1em;
}