@charset "UTF-8";

:root[data-theme="color-a"] {
    --color-main: rgb(255, 225, 247);
    --color-sub: rgb(255, 255, 255);
    --color-text: #f092ff;
}

:root[data-theme="color-b"] {
    --color-main:  rgb(217, 254, 255);
    --color-sub: rgb(255, 255, 255);
    --color-text: #53daff;
}

:root[data-theme="color-c"] {
    --color-main: rgb(255, 0, 170);
    --color-sub: rgb(255, 0, 170);
    --color-text: rgb(0, 0, 0);
}

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, 225, 247);
    color: #f092ff;
}

#btn-b {
    background-color: rgb(217, 254, 255);
    color: #53daff;
}

#btn-c {
    background-color: rgb(0, 0, 0);
    color:rgb(255, 0, 170);
}