@charset "UTF-8";

:root[data-theme="color-a"] {
    --color-main: rgb(55, 239, 175);
    --color-sub: rgb(55, 239, 175);
    --color-text: #000000;
}

:root[data-theme="color-b"] {
    --color-main:  rgb(37, 59, 255);
    --color-sub: rgb(37, 59, 255);
    --color-text: #ffffff;
}

:root[data-theme="color-c"] {
    --color-main: rgb(199, 71, 242);
    --color-sub: rgb(199, 71, 242);
    --color-text: #ffffff;
}

body {
    background-color: var(--color-main);
    color: var(--color-text);
}

p {
    background-color: var(--color-sub);
}

/*ボタンの装飾*/
button {
    width: 50px;
    height: 50px;
    border-radius: 25px;
    border: 1px solid #fff;
}

#btn-a {
    background-color: rgb(255, 255, 255);
    color: #000;
}

#btn-b {
    background-color: rgb(255, 255, 255);
    color: #000;
}

#btn-c {
    background-color: rgb(255, 255, 255);
    color: #000000;
}
body {
    background-color: var(--color-main);
    color: var(--color-text);
    font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
}