@charset "UTF-8";
:root {
    --white: #FFF;
    --black: #000;
    --gray: #c0c0c0;
    /* sometimes usefull to have clear black and white color no matter what else is defined! */
    --text: black;
    --background: white;
    --link:#ff0066;
    --hover: #ff0066;
    --visited: #ff0066;
    --login-background:#990048;
    --h1-color:#eeeeee;
    --h1-background: linear-gradient( 20deg, purple 0%, #0000ff 20%, #66ff66 40%, #ffff00 60%, #ff9900 80%, #ff0066 100%);
    --logo-position: center; /* posible: left,center,right */
    --logo-height: 100%;
    --main-border: #990048;
    --main-background: white;
    --box-background: rgba(192, 192, 192, 0.7);
    --light: white;
    --dark: #ffddff;
    --highlight:#ffbbff;
    --highdark:#ff0066;
}

@media screen and (prefers-color-scheme: dark) {
  :root {
    --black: white;
    --white: black;
    --text: #fff;
    --background: black;
    --link: #ff0066;
    --hover: #ff0066;
    --visited: #ff0066;
    --login-background: #990048;
    /*
    --h1-color:white;
    --h1-background: linear-gradient( 20deg, purple 0%, #0000ff 20%, #66ff66 40%, #ffff00 60%, #ff9900 80%, #ff0066 100%);
    --h1-color-link: white;
    --logo-position: right;
    --logo-width: 100px;
*/
    --main-border: #990048;
    --main-background: #202;
    --box-background: #134;
    --light: #303;
    --dark: #101;
    --highlight:#ffbbff;
    --highdark:#ff0066;
  }
}