@charset "UTF-8";

:root {
    --header-text: white;
    --header-bg: #00C3EA;
    --header-btn-text:white;

    --footer-text:white;
    --footer-bg:#00C3EA;
    --footer-btn-text: #00C3EA;

    --bb-border: #00C3EA;

    --main-text: #00C3EA;
    --main-bg: #fff;
    --main-border: #00C3EA;

    --card-header-bg: #cccccc;
    --card-bg: white;
    --card-text:blue;

    --help-text:black;
    --help-bg:white;
    --quote-text:grey;
}

@media (prefers-color-scheme: dark) {
    :root {
        --header-text:white;
        --header-bg: #00C3EA;
        --header-btn-text:white;

        --footer-text:#00C3EA;
        --footer-bg:black;
        --footer-border: #00C3EA;
        --footer-btn-text: #00C3EA;

        --bb-border: #00C3EA;

        --main-text: #00C3EA;
        --main-bg: #000;
        --main-border: #00C3EA;

        --card-bg: #404040;
        --card-header-bg: #e0ffff;
        --card-text:white;

        --help-text:white;
        --help-bg:#696969;
        --quote-text:#cccccc;
    }
}

body {
    color: var(--main-text);
    background-color: var(--main-bg);
    transition: 0.5s;
}

header, footer {
    position: relative;
    background: #00c3ea;
    color:white;
}
header a#homebtn {
    color: var(--footer-btn-text);
    background:white;
}
footer button#btn-scrollup {
    color: var(--footer-btn-text);
}


#billboard, #mainblock {
  position: relative;
}

#main {
  margin: 0px 5px 60px 5px;
  border: 1px solid var(--main-border);
  border-radius: 20px;
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Edge */
}

#main::-webkit-scrollbar { /* Chrome, Safari 対応 */
  display: none;
}

#main li {
  font-weight: bold;
  list-style-type: none;
}

#main .frame {
  margin-top: 3px;
  border: 1px solid grey;
  border-radius: 10px;
  padding: 5px 10px;
}


div.card {
    cursor:pointer;
    color: var(--main-text);
    background: var(--card-bg);
    border:1px solid var(--main-border);
}

div.card div.card-header {
    background: var(--card-header-bg);
}

div.card div.card-header:hover {
    background:#00c3ea;
}
div.card div.card-header a:hover {
    color:white!important;
}

div.card div.card-body {
    color: var(--card-text);
}