/**
 * green css : light / darkmode
 * 2025/06/29 ; updated
 * 2025/01/25 ; created
 */

:root {
    --body-bg: #3cb371;
    --header-text: white;
    --header-bg: #3cb371;
    --header-btn-text: #3cb371;
    --header-btn-bg: white;
    --header-border-color: #3cb371;

    --mainblock-bg: #99cc99;

    --bb-border: #3cb371;
    --bb-btn-bg: white;
    --bg-btn-hbg: #3cb371;
    --bb-btn-text : #3cb371;
    --bb-btn-text2: white;
    --bb-btn-border: #3cb371;

    --main-text: #3cb371;
    --main-text2: green;
    --main-bg: #fff;
    --main-bg2 : #3cb371;
    --main-border: #3cb371;

    --footer-text: white;
    --footer-bg: #3cb371;
    --footer-btn-text: #3cb371;
    --footer-btn-bg: white;
    --footer-border-color: #3cb371;
}

@media (prefers-color-scheme: dark) {
  :root {
      --body-bg: #336600;
      --header-text: white;
      --header-bg: black;
      --header-btn-text: #3cb371;
      --header-btn-bg: black;
      --header-border-color: #3cb371;

      --mainblock-bg: #336600;

      --bb-border: #3cb371;
      --bb-btn-bg: #336600;
      --bb-btn-hbg : #3cb371;
      --bb-btn-text: white;
      --bb-btn-text2: green;
      --bb-btn-border: #3cb371;

      --main-text: #3cb371;
      --main-text2:white;
      --main-bg: black;
      --main-bg2:#336600;
      --main-border: #3cb371;

      --footer-text: white;
      --footer-bg: #336600;
      --footer-btn-text: white;
      --footer-btn-bg: #336600;
      --footer-border-color: #3cb371;
  }
}

.light-mode {
    --body-bg: #3cb371;
    --header-text: white;
    --header-bg: #3cb371;
    --header-btn-text: #3cb371;
    --header-btn-bg: white;
    --header-border-color: #3cb371;

    --mainblock-bg: #99cc99;

    --bb-border: #3cb371;
    --bb-btn-bg: white;
    --bg-btn-hbg: #3cb371;
    --bb-btn-text : #3cb371;
    --bb-btn-text2: white;
    --bb-btn-border: #3cb371;

    --main-text: #3cb371;
    --main-text2: green;
    --main-bg: #fff;
    --main-bg2 : #3cb371;
    --main-border: #3cb371;

    --footer-text: white;
    --footer-bg: #3cb371;
    --footer-btn-text: #3cb371;
    --footer-btn-bg: white;
    --footer-border-color: #3cb371;
}
.dark-mode {
    --body-bg: #336600;
    --header-text: white;
    --header-bg: black;
    --header-btn-text: #3cb371;
    --header-btn-bg: black;
    --header-border-color: #3cb371;

    --mainblock-bg: #336600;

    --bb-border: #3cb371;
    --bb-btn-bg: #336600;
    --bb-btn-hbg : #3cb371;
    --bb-btn-text: white;
    --bb-btn-text2: green;
    --bb-btn-border: #3cb371;

    --main-text: #3cb371;
    --main-text2:white;
    --main-bg: black;
    --main-bg2:#336600;
    --main-border: #3cb371;

    --footer-text: white;
    --footer-bg: #336600;
    --footer-btn-text: white;
    --footer-btn-bg: #336600;
    --footer-border-color: #3cb371;
}

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

#header {
    color: var(--header-text);
    background: var(--header-bg);
    border: 0 solid var(--header-border-color);
}

#header a#homebtn {
    color: var(--header-btn-text);
    background: var(--header-btn-bg);
    border: 1px solid var(--header-border-color);
}
#header a#homebtn:hover {
    color: var(--header-text);
    background-color: var(--footer-bg );
    border:1px solid var(--header-text);
}

#main {
    color: var(--main-text);
}

#billboard.a {
    color: var(--bb-btn-text);
    background: var(--bb-btn-bg );
    border: 1px solid var(--bb-border);
}

#billboard a.selected {
    background: var(--bb-border );
    color: var(--bb-btn-text2);
    border: 1px solid var(--bb-border);
}

#billboard a.selected:hover {
    color: var(--bb-btn-text2);
    background: var(--bb-btn-hbg );
}

#billboard a.not_selected {
    background: var(--bb-btn-bg );
    color: var(--bb-btn-text);
    border: 1px solid var(--bb-border);
}

#billboard a.not_selected:hover {
    color: var(--bb-btn-text2);
    background: var(--bb-btn-hbg );
}

#footer {
    margin: 0;
    color: var(--footer-text);
    background-color: var(--footer-bg);
    border: 0 solid var(--footer-border-color);
}

#footer button#btn-scrollup {
    color: var(--footer-btn-text);
    background-color: var(--footer-btn-bg);
    border:1px solid var(--footer-border-color);
}
#footer button#btn-scrollup:hover {
    color: var(--footer-text);
    background-color: var(--footer-bg );
    border:1px solid var(--footer-text);
}