@media (prefers-color-scheme:light) {
  :root {
    --stockbackground: #edebe9;
    --stockborder: #cfcfcf;
    --buttonbackground: #c3c3c3;
    --buttonhover: #9c9c9c;
    --buttonborder: #959595;
    --valuered: #bc221f;
    --valuegreen: #24b324;
    --marqueecolor: #edebe9;
    --marqueebordercolor: #cfcfcf;
  }
}
@media (prefers-color-scheme:dark) {
  :root {
    --stockbackground: #000000;
    --stockborder: #2d2d2d;
    --buttonbackground: #3b3b3b;
    --buttonhover: #686868;
    --buttonborder: #585858;
    --valuered: #bc221f;
    --valuegreen: #24b324;
    --marqueecolor: #000000;
    --marqueebordercolor: #2d2d2d;
  }
}
@media (orientation:landscape) {
  :root {
    --stocktext1: 1.5rem;
    --stocktext2: 1rem;
    --stocktext3: 1.25rem;
    --buybuttonheight: auto;
  }
  .stockbalance {
    position: relative;
  }
}
@media (orientation:portrait) {
  :root {
    --stocktext1: 1.25rem;
    --stocktext2: 1rem;
    --stocktext3: 1rem;
    --buybuttonheight: 2em;
  }
  .stockbalance {
    position: sticky;
    top: 1em;
    z-index: 100;
  }
  .stockbalanceshadow {
    box-shadow: 0.25em 0.25em 0.5em var(--shadowcolor);
  }
}
#game {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  height: auto;
  margin-top: 1em;
}
.stockbalance {
  flex-direction: column;
}
.stockfloatingline {
  border-top: 2px solid var(--stockborder);
}
.stock {
  border-radius: 0.5rem;
  width: 20rem;
  height: auto;
  background-color: var(--stockbackground);
  border: 2px solid var(--stockborder);
  padding: 0.5rem;
}
.stockmain {
  width: 20em;
  height: 4em;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.stockmain * p {
  font-size: var(--stocktext1);
  margin: 0;
  padding: 0;
}
.stockinfo {
  border-top: 2px solid var(--stockborder);
}
.stockinfo p {
  font-size: var(--stocktext3);
  padding: 0;
  margin: 0;
  width: 100%;
}
span.right {
  float: right;
}
.stockid {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-basis: 1;
  width: 100%;
  height: 100%;
}
p.stockname {
  font-size: var(--stocktext2);
  color: #808080;
}
.stockgraph {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-basis: 1;
  width: 100%;
  height: 100%;
}
.stockgraph canvas {
  z-index: 1;
  width: 100%;
  height: 100%;
}
.stockvalue {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-basis: 1;
  width: 100%;
  height: 100%;
  text-align: right;
}
.stocksymbol {
  font-weight: bolder;
}
.valuecalc {
  font-weight: lighter;
  color: gray;
}
.arrows {
  font-size: 0.5em;
}
.stockbuttons {
  margin-top: 0.25em;
}
.stockbuttons button {
  height: var(--buybuttonheight);
  width: 100%;
  font-size: var(--stocktext3);
  padding: 0;
  margin: 0;
  border-radius: 0;
  background-image: none;
  background-color: var(--buttonbackground);
  border: 1px solid var(--buttonborder);
  border-bottom: none;
  box-shadow: none;
}
.stockbuttons button.top {
  border-top-right-radius: 0.15em;
  border-top-left-radius: 0.15em;
  border-bottom: none;
}
.stockbuttons button.bottom {
  border-bottom-right-radius: 0.15em;
  border-bottom-left-radius: 0.15em;
  border-bottom: 1px solid var(--buttonborder);
}
.stockbuttons button:hover {
  background-image: none;
  background-color: var(--buttonhover);
  box-shadow: none;
}
.intervalselect {
  background-color: var(--stockbackground);
  border: 2px solid var(--stockborder);
  border-radius: 0.5em;
  width: auto;
  margin: 1em;
  padding: 0.5em;
}
.intervalbuttons {
  display: flex;
}
.intervalbuttons button {
  width: 3em;
  padding: 0;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  background-image: none;
  background-color: var(--buttonbackground);
  border: 1px solid var(--buttonborder);
}
.intervalbuttons:hover button:hover {
  background-image: none;
  box-shadow: none;
  background-color: var(--buttonhover);
}
.intervalbuttons button.left {
  /* border-right: none; */
  border-top-left-radius: 0.15em;
  border-bottom-left-radius: 0.15em;
}
.intervalbuttons button.middle {
  border-right: none;
  border-left: none;
}
.intervalbuttons button.right {
  /* border-left: none; */
  border-top-right-radius: 0.15em;
  border-bottom-right-radius: 0.15em;
}
.marquee {
  position: relative;
  margin: 0.5em 0;
  min-width: 100vw;
  gap: 15vw;
}