/*

  T H E M E   L I G H T

 */
:root, body.light {
  /* default theme: light background, dark text, blue accent */
  --theme-hue: 0;         /* white */
  --accent-hue: 194;      /* blue */

  --text-color-richer: hsl(var(--theme-hue), 0%, 5%);     /* #0d0d0d    */
  --text-color-normal: hsl(var(--theme-hue), 0%, 13%);    /* #222222    text color; button:hover:focus color */
  --text-color-softer: hsl(var(--theme-hue), 0%, 33%);    /* #555555    button color; button:hover border */

  --accent-color: hsl(var(--accent-hue), 86%, 57%);       /* #33C3F0    link; button-primary bg+border; textarea,select:focus border */
  --accent-color-hover: hsl(var(--accent-hue), 76%, 49%); /* #1EAEDB    link hover; button-primary:hover:focus bg+border */

  --border-color: hsl(var(--theme-hue), 0%, 73%);         /* #bbbbbb    button border */
  --border-color-softer: hsl(var(--theme-hue), 0%, 82%);  /* #d1d1d1    textarea,select,code,td,hr border  */
  
  --background-color: white;                            /* transparent body background; textarea,select background */
  --background-color-softer: hsl(var(--theme-hue), 0%, 95%);
  --code-background: hsl(var(--theme-hue), 0%, 95%);      /* #f1f1f1    code background*/

  --button-primary-color: white;

  transition: all 0.4s;

/*  transition: all 2s;*/
}

/*  Dark Theme

  Again, Barebones uses the html selector, but we want :root instead

*/

body.dark {
  /* dark theme: light background, dark text, blue accent */
  --theme-hue: 0;         /* black */
  --accent-hue: 194;      /* blue */

  --text-color-richer: hsl(var(--theme-hue), 0%, 95%);    /*    */
  --text-color-normal: hsl(var(--theme-hue), 0%, 80%);    /* text color; button:hover:focus color */
  --text-color-softer: hsl(var(--theme-hue), 0%, 67%);    /* button color; button:hover border */

  --accent-color: hsl(var(--accent-hue), 76%, 49%);       /* link; button-primary bg+border; textarea,select:focus border */
  --accent-color-hover: hsl(var(--accent-hue), 86%, 57%); /* link hover; button-primary:hover:focus bg+border */

  --border-color: hsl(var(--theme-hue), 0%, 27%);         /* button border */
  --border-color-softer: hsl(var(--theme-hue), 0%, 20%);  /* textarea,select,code,td,hr border   */

  --background-color: hsl(var(--theme-hue), 0%, 12%);     /* body background; textarea,select background */
  --background-color-softer: hsl(var(--theme-hue), 0%, 18%);
  --code-background: hsl(var(--theme-hue), 0%, 5%);       /* code background*/

  --button-primary-color: white;

  transition: all 0.4s;
}

@media(prefers-color-scheme: dark) {
  :root {
    /* dark theme: light background, dark text, blue accent */
    --theme-hue: 0;         /* black */
    --accent-hue: 194;      /* blue */

    --text-color-richer: hsl(var(--theme-hue), 0%, 95%);    /*    */
    --text-color-normal: hsl(var(--theme-hue), 0%, 80%);    /* text color; button:hover:focus color */
    --text-color-softer: hsl(var(--theme-hue), 0%, 67%);    /* button color; button:hover border */

    --accent-color: hsl(var(--accent-hue), 76%, 49%);       /* link; button-primary bg+border; textarea,select:focus border */
    --accent-color-hover: hsl(var(--accent-hue), 86%, 57%); /* link hover; button-primary:hover:focus bg+border */

    --border-color: hsl(var(--theme-hue), 0%, 27%);         /* button border */
    --border-color-softer: hsl(var(--theme-hue), 0%, 20%);  /* textarea,select,code,td,hr border   */
  
    --background-color: hsl(var(--theme-hue), 0%, 12%);     /* body background; textarea,select background */
    --background-color-softer: hsl(var(--theme-hue), 0%, 18%);
    --code-background: hsl(var(--theme-hue), 0%, 5%);       /* code background*/

    --button-primary-color: white;

    transition: all 0.4s;

  }
  
  img.value-img {
    filter: invert(0.8);
  }
  /* TODO - test dialing back image intensity on dark background
  img {
    opacity: .80;
    transition: opacity .5s ease-in-out;
  }
  img:hover {
    opacity: 1;
  }
  */
}

/* C U S T O M   C S S */
body {
    font-weight: 300;
    font-family: "Raleway", Arial, sans-serif;
    background-color: var(--background-color);
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Raleway", Arial, sans-serif;
  font-weight: 100;
}

nav, .nav {
  padding: 0px;
  height: 6rem;
  z-index: 999;
}

/* Syling navigation a href's */
.nav > a {
  font-size: 2rem;
  font-weight: 300;
}

main {
  margin-top: 0rem;
  min-height: calc(100vh - 12rem);
}

footer {
  display: block;
/*  background-color: var(--background-color-softer);*/
  height: 6rem;
  font-size: 1.3rem;
  font-weight: 100;
}

/* Remove barebones container & grid paddings */
.grid-container {
  padding: 0px;
  grid-gap: 0px;
  gap: 0px;
}

a, a:hover {
  text-decoration: none;
}

/* Tables */

table tr:nth-child(n+1) td:first-child, table tr:nth-child(n+1) th:first-child {
  text-align: left; 
  padding-left: 5px;
}

#stocks tr:nth-child(n+2) td:first-child {
  font-weight: bold;
}

#stocks tr:nth-child(n+2) td:nth-child(5) {
  font-weight: bold;
}

#stocks tr:nth-child(n+2) td:nth-child(6) {
  font-weight: bold;
}

#stocks tr:nth-child(n+2) td:nth-child(12) {
  font-weight: bold;
}

#stocks tr:nth-child(n+2) td:nth-child(11) {
  font-weight: bold;
}

#stocks tr:nth-child(n+2) td:nth-child(10) {
  font-weight: bold;
}

/* Forms */

form {  
  margin: 0px;
  width: 96%;
}

input, 
input[type="submit"], 
input[type="submit"]:hover, 
input[type="submit"].button-primary,
input[type="submit"].button-primary:hover,
textarea, label {
  color: var(--text-color-normal)!important; 
  font-weight: 300;
  width: 100%;
}

textarea {
  min-height: 150px;
}

/* Flash messages */
#flash {
  position: absolute;
  width: 100%;
  font-size: 1.6rem;
  height: 4rem;
  text-align: center;
  font-weight: 300;
}

#theme {
  text-align: center;
  bottom: calc(100vh * 0.2);
  font-weight: 300;
}

/* Center an HTML element vertically */
.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
}

.success {
  color: #222222;
  background-color: rgba(0,255,0,0.5);
}

.error {
  color: white;
  background-color: rgba(255,0,0,0.5);
}

.target {
  background: rgb(127,255,127); 
  font-weight: bold; 
  color: var(--secondary-bg-color);
}

.green {
  font-weight: bold; 
  color: rgb(71,255,71);
}

.red {
  font-weight: bold; 
  color: rgb(255,71,71);
}

/*

  M E D I A   Q U E R I E S

 */
@media (min-width: 600px) {
  .grid-container {
    padding: 0px;
    grid-gap: 0px;
    gap: 0px;
  }
  form {
    width: 62%;
  }
  nav, .nav {
    height: 10rem;
  }

  main {
     min-height: calc(100vh - 16rem);
  }  
}

@media (max-width: 599px) {
  nav, .nav {
    background-color: var(--background-color-softer);
  }
  h1 {
    font-size: 3rem;
  }
}