/* Custom Colours */
/* To use rgba(var(--color), alpha) color must be in RGB not hex*/
:root {
  --thegreen: 0 162 103;
  --candygreen: 26 199 141;
  --eclipsepurple: 110 80 170;
  --princesspurple: 185 153 255;
  --hotpink: 255 60 115;
  --pink: 255 152 202;
  --hazel: 255 144 95;
  --bluebelle: 145 189 255;
  --darkblue: 5 126 255;

}


/* Load Fonts */
/* Fantastique Mono Sans */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Fantastique Sans';
  font-style: normal;
  font-weight: 400;
  size-adjust: 115%;
  src: url('../fonts/fantasquesansmono-regular-webfont.woff') format('woff'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
} 


@media (prefers-color-scheme: dark) {
  :root {
--background-color: #222225;
--page-width: 60em;
--font-color: rgb(var(--thegreen));
--invert-font-color: #222225;
--secondary-color: #e4e7ec;
--tertiary-color: #a3abba;
--primary-color: rgb(var(--thegreen));
--error-color: #ff3c74;
--progress-bar-background: #3f3f44;
--progress-bar-fill: #62c4ff;
--code-bg-color: #3f3f44;
  }
}

@media (prefers-color-scheme: light) {
  :root {
      --background-color: #222225;
      --page-width: 60em;
      --font-color: rgb(var(--thegreen));
      --invert-font-color: #222225;
      --secondary-color: #e4e7ec;
      --tertiary-color: #a3abba;
      --primary-color: rgb(var(--thegreen));
      --error-color: rgb(255, 60, 116);
      --progress-bar-background: #3f3f44;
      --progress-bar-fill: #62c4ff;
      --code-bg-color: #3f3f44;
      }
}

@media only screen and (max-width: 850px) {
  :root {
      --global-font-size: 14px;
      --global-font-color: #444;
      --global-line-height: 1.6em;
      --page-width: 70em;
  }
}

:root {
  --global-font-size: 16px;
  --global-font-color: #e4e7ec;
  --mono-font-stack: "fantastique sans";
  --font-stack: "fantastique sans", Menlo, Monaco, Lucida Console, Liberation Mono,
      DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace,
      serif;
  --global-line-height: 1.6em;
  --page-width: 70em;
  --display-h1-decoration: 1;
}
p {
  color: #e3e7eb;
}
html {
  font-family: Montserrat, sans-serif;
  font-size: 18px;
  color: #f9f9fa;
 
}

tr:hover {background-color: rgb(255,127,79,0.9)!important;} 

tr:nth-child(even) {background-color: #373738;}


table {

  border-block-end-color: #f9f9fa;
}

th {
  background-color: rgb(var(--hazel));
  border-color: rgb(var(--hazel))!important;
}
table {
  color: white;
  border-color: rgb(var(--thegreen));
  text-align: center;
  table-layout: fixed;
}
table td, table th {
  vertical-align: top;
  border: 1px solid rgb(var(--hazel));
  padding: calc(var(--global-space)*1.5);
  font-size: 1em;
  border-left:none;
  border-right:none;
}
/* Italics Colour */
em  {
  color: #ff98cb;
}
/* Image Grid Background Colour on Hover */
.image-grid a:hover {
background-color: rgb(var(--pink));
}

.homeSection > * {
  color: rgb(var(--pink))!important;
}
.homeSection > *:hover {
  color: var(--secondary-color)!important;
}