:root {
  --cascadia:'CascadiaCode', sans-serif;
  --clearish-white-color: #FFFFFF0A;
  --backdrop-color: rgb(18, 18, 18);
  --primary-pink: rgb(255, 0, 121);
  --primary-blue: rgb(64, 197, 248);
  --gray1: rgb(25, 25, 25);
  --gray2: rgb(51, 51, 51);
  --gray3: rgb(76, 76, 76);
  --gray4: rgb(102, 102, 102);
  --gray5: rgb(127, 127, 127);
  --gray6: rgb(153, 153, 153);
  --gray7: rgb(178, 178, 178);
  --gray8: rgb(204, 204, 204);
  --gray9: rgb(230, 230, 230);
  --line-height: 1.7;
}

/* Not using an icon font. Use SVG for icons instead. Why icon font is bad:
* - Makes font file too large - too many unused icons. 964K vs 214K. 
* - Causes a flash of regular text on page load on slower connections.
* - Icons in icon text packs are difficult to position.
* - Icons in icon text packs are rendered and anti-aliased like text.
* */
@font-face {
  font-family: "CascadiaCode";
  src: url("/CascadiaCode.woff2");
  font-weight: 400;
}

tr, td, th, table, body, title, h1, h2, h3, h4, h5, h6, p, a, ul, input, button {
  font-family: var(--cascadia);
}
body {
  margin: 0;
  outline: none;
  background-color: var(--backdrop-color);
  font-size: 14px;
}
canvas {
  margin: 0;
  outline: none;  /*Otherwise the canvas will be given a blue highlight border when selected.*/
  border: none;
}
p, h1, h2, h3, h4, h5, h6, title, td, th {
  color: white;
  padding: 0px;
  margin: 0px;
}
p {
  line-height: var(--line-height);
  text-wrap: pretty;
}
a {
  text-decoration: none;  /* Do not underline links. */
  color: #FFF; /* Text color. */
}
body {
  /* Prevent bouncing when scrolling when on console page. */
  /* Requires normal pages to set back to 'contain'. */
  overscroll-behavior: none;
}
ul {
  list-style-type: none;  /* Remove bullet points from list items. */
  color: #FFF; /* Text color. */
  padding:0px;
  margin: 0px;
  line-height: var(--line-height);
}

input {
  border: none;
  border-radius: 10px;
  font-size: 14px; /* Need 16px font prevents auto-zooming on forms on mobile for iOS */
  caret-color: white;
  background: var(--gray3);
  color: #FFF;
  padding: 8px 10px; /* prevents text from being wrapped too tight by input box */
  /* outline: 2px solid white; */
}
input:hover {
  background: rgb(102, 102, 102); /* gray4 */
  outline: 2px solid white;
}
input:focus {
  background: rgb(102, 102, 102); /* gray4 */
  box-shadow: 0 0 10px white;
  outline: 2px solid white;
}
input[type=submit] {
  font-family: var(--cascadia);
  border: none;
  border-radius: 10px;
  padding: 8px 10px;
  /* outline: 2px solid white; */
  color: var(--primary-blue); /* Font Color */
  background: var(--gray2);
}
input[type=submit]:hover {
  box-shadow: 0 0 10px #FFFA;
  outline: 2px solid white;
  background: var(--gray3);
}
input[type=text],
input[type=password],
input[type=email]
{
  width: 18em;
}
input::placeholder {
  color: var(--gray5);
}
input:is(:-webkit-autofill, :autofill) {
  /* border: 3px dotted orange; */
  font-size: 16px;
}

button {
  border: none; 
  font-size: 14px;
  outline: 2px solid white;
  background-color: var(--gray3);
}
button:hover {
  background: var(--gray4);
  box-shadow: 0 0 10px white;
}
button:focus {
  background: var(--gray4); 
  box-shadow: 0 0 10px white;
}
.hoverbutton {
  font-family: var(--cascadia);
  border: none;
  border-radius: 10px;
  font-size: 14px;
  outline: 2px solid white;
}
.hoverbutton:hover {
  background: var(--gray4);
  box-shadow: 0 0 10px white;
  outline: 2px solid white;
}
.hoverbutton:focus {
  box-shadow: 0 0 10px white;
  outline: 2px solid white;
}

/*
* See the following for using media queries like max-width.
* - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries#targeting_media_features
*

/* Make the compact navbar disappear when the screen is large enough. */
@media screen and (800px <= width ) {
  .navbar-compact {
    display: none;
  }
}
/* Make the full navbar disappear when screen is too small. */
@media screen and (width < 800px) {
  .navbar-full {
    display: none;
  }
}

/* Make sidebar disappear if viewport is too small. */
@media screen and (max-width: 875px) {
  .max-width-sidebar-left {
    display: none;
  }
}
/* Make sidebar disappear if viewport is too small. */
@media screen and (max-width: 1350px) {
  .max-width-sidebar-right {
    display: none;
  }
}

/* Spacing classes for elements which approach the edge of the screen. */
@media screen and (width >= 750px) {
  .screen-margin {
    margin-left: 24px;
    margin-right: 24px;
  }
  .screen-padding {
    padding-left: 24px;
    padding-right: 24px;
  }
}
@media screen and (750px > width) {
  .screen-margin {
    margin-left: 12px;
    margin-right: 12px;
  }
  .screen-padding {
    padding-left: 12px;
    padding-right: 12px;
  }
}

.active-background:hover,
.active-background:focus,
.active-background.active {
  /* Set text color to white */
  color: white;
  /* Turn svg icons white */
  filter: brightness(0%) invert(100%);
  background-color: var(--clearish-white-color);
}

.active-nav {
  color: var(--gray6);
  /* Turn svg icons gray6. */
  filter: brightness(0%) invert(100%) brightness(60%);
}
[aria-current="page"] .active-nav {
  text-shadow: 0 0 10px white;
  /* Set text color to white */
  color: white;
  /* Turn svg icons white */
  filter: brightness(0%) invert(100%);
}