/* Global variables. */
:root {
  /* Set sans-serif & mono fonts */
  --sans-font: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir,
    "Nimbus Sans L", Roboto, "Noto Sans", "Segoe UI", Arial, Helvetica,
    "Helvetica Neue", sans-serif;
  --mono-font: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;

  --fontFamily: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; 
/*  --lcdFont: 'lcd';
  --irFont: 'irfont'; */
 
  /* Default (light) theme */
  --bg: #fff; 
  --accent-bg: #f5f7ff;
  --text: #212121;
  --text-light: #585858;
  --border: #898EA4;
  --border-op: none;
  --border-op-footer: rgba(0, 0, 0, 0.15);
  --accent: #0d47a1;
  --code: #d81b60;
  --preformatted: #444;
  --marked: #ffdd33;
  --disabled: #efefef;

  //--header-bg: linear-gradient(6deg, #0000001c, #0f0f0f8a);

  --card-box-shadow:
    0.0145rem 0.029rem 0.174rem rgba(27, 40, 50, 0.01698),
    0.0335rem 0.067rem 0.402rem rgba(27, 40, 50, 0.024),
    0.0625rem 0.125rem 0.75rem rgba(27, 40, 50, 0.03),
    0.1125rem 0.225rem 1.35rem rgba(27, 40, 50, 0.036),
    0.2085rem 0.417rem 2.502rem rgba(27, 40, 50, 0.04302),
    0.5rem 1rem 6rem rgba(27, 40, 50, 0.06),
    0 0 0 0.0625rem rgba(27, 40, 50, 0.015);

}

/* Dark theme */

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    /* --bg: #212121; */
    --bg: #11151c;
    /* --accent-bg: #2b2b2b; */
	--accent-bg: #161c25;
    --text: #dcdcdc;
    --text-light: #ababab;
    --accent: #ffb300;
    --code: #f06292;
    --preformatted: #ccc;
    --disabled: #111;
    --border-op: rgba(255, 255, 255, 0.05);
    //--header-bg: linear-gradient(6deg, #0f0f0f8a, #0000001c);
    --border-op-footer: rgba(255, 255, 255, 0.5);
  }
  img,
  video {
    opacity: 0.8;
  }
}


@viewport {
   width: 720;
   /*width: device-width;
   zoom:1;
   min-zoom: 1;
   max-zoom: 1; */ 
   shrink-to-fit: yes; 
   zoom: 0.5;
}

@font-face { 
	font-family: "irfont"; 
/*	src: url("/include/ShreeDevanagari714.ttf"), format('truetype'); */
      src: url("/include/ShreeDevanagari714.ttf"); 
/*        font-style: normal;
        font-weight: normal; */
}
@font-face {
        font-family: "lcd";
        src: url("/include/LCD.ttf");
/*	font-style: normal;	
	font-weight: normal; */
}

/*
@media screen and (min-device-aspect-ratio: 4/3) {
  article {
    padding: 1rem 0px;
  }
}
@media screen and (min-device-aspect-ratio: 5/4) {
  article {
    padding: 1rem 0px;
  }
}
@media screen and (min-device-aspect-ratio: 16/10) {
  article {
    padding: 1rem 0px;
  }
}
@media screen and (min-device-aspect-ratio: 3/2) {
  article {
    padding: 1rem 0px;
  }
}
@media screen and (min-device-aspect-ratio: 1/1) {
  article {
    padding: 10rem 0px;
  }
}
@media screen and (min-device-aspect-ratio: 16/9) {
  article {
    padding: 1rem 0px;
  }
}
@media screen and (min-device-aspect-ratio: 21/9) {
  article {
    padding: 1rem 0px;
  }
}

@media screen and (min-device-aspect-ratio: 32/9) {
  article {
    padding: 1rem 0px;
  }
}
@media screen and (min-device-aspect-ratio: 256/135) {
  article {
    padding: 1rem 0px;
  }
}
*/


/* Reset box-sizing */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Reset default appearance */
textarea,
select,
input,
progress {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

html {
  /* Set the font globally */
  font-family: var(--sans-font);
  scroll-behavior: smooth;
}

/* Make the body a nice central block */
body {
  color: var(--text);
  background-color: var(--bg);
  font-size: 1rem;
  line-height: 1.3;
  display: grid;
  grid-template-columns: 1fr minmax(45rem, 95%) 1fr;
  grid-template-rows: auto 1fr auto; 
  margin: 0;
  min-height: 100%;
  width: 100%;
  height: 100%;
}
body > * {
  grid-column: 2;
}

/* Make the header bg full width, but the content inline with body */
body > header {
  background-color: var(--accent-bg); 
  border-bottom: 1px solid var(--border-op);
  text-align: center;
  padding: 0.5rem 0.5rem 0.5rem 0.5rem; 
  grid-column: 1 / -1;
  max-width: 100%;
  /* max-height: 9rem;
  min-height: 9rem;*/
  max-height: 6rem;
  min-height: 6rem;
  margin: 0;
}

body > header h3 {
  max-width: 1200px;
  margin: 0.2rem auto;
}

body > header h2 {
  max-width: 1200px;
  margin: 0.2rem auto;
}

body > header h1 {
  max-width: 1200px;
  margin: 0.2rem auto;
}

body > header p {
  max-width: 40rem;
  margin: 1rem auto;
}

/* Add a little padding to ensure spacing is correct between content and header > nav */
main {
  padding-top: 0.5rem;
  margin-bottom: 4rem;
}

body > footer {
  margin-top: -4rem;
  padding: 1rem 1rem 0.5rem 1rem;
  color: var(--text-light);
  font-size: 0.9rem;
  text-align: center;
  border-top: 1px solid var(--border-op-footer);
  max-height: 5rem;
  min-height: 5rem;
  height: 5rem;
  bottom: 0;
  /* background-color: var(--bg);  */
}

/* Format headers */
h1 {
  font-size: 3rem;
}

h2 {
  font-size: 2.6rem;
  margin-top: 3rem;
}

h3 {
  font-size: 2rem;
  margin-top: 3rem;
}

h4 {
  font-size: 1.44rem;
}

h5 {
  font-size: 1.15rem;
}

h6 {
  font-size: 0.96rem;
}

/* Prevent long strings from overflowing container */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* Fix line height when title wraps */
h1,
h2,
h3 {
  line-height: 1.1;
}

/* Reduce header size on mobile */
@media only screen and (max-width: 720px) {
  h1 {
    font-size: 2.5rem;
  }

  h2 {
    font-size: 2.1rem;
  }

  h3 {
    font-size: 1.75rem;
  }

  h4 {
    font-size: 1.25rem;
  }
}

/* Format links & buttons */
a,
a:visited {
  color: var(--accent);
}

a:hover {
  text-decoration: none;
}

button,
[role="button"],
input[type="submit"],
input[type="reset"],
input[type="button"],
label[type="button"] {
  border: none;
  border-radius: 5px;
  background-color: var(--accent);
  font-size: 1rem;
  color: var(--bg);
  padding: 0.7rem 0.9rem;
  margin: 0.5rem 0;
}

button[disabled],
[role="button"][aria-disabled="true"],
input[type="submit"][disabled],
input[type="reset"][disabled],
input[type="button"][disabled],
input[type="checkbox"][disabled],
input[type="radio"][disabled],
select[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

input:disabled,
textarea:disabled,
select:disabled {
  cursor: not-allowed;
  background-color: var(--disabled);
}

input[type="range"] {
  padding: 0;
}

/* Set the cursor to '?' on an abbreviation and style the abbreviation to show that there is more information underneath */
abbr[title] {
  cursor: help;
  text-decoration-line: underline;
  text-decoration-style: dotted;
}

button:focus,
button:enabled:hover,
[role="button"]:focus,
[role="button"]:not([aria-disabled="true"]):hover,
input[type="submit"]:focus,
input[type="submit"]:enabled:hover,
input[type="reset"]:focus,
input[type="reset"]:enabled:hover,
input[type="button"]:focus,
input[type="button"]:enabled:hover,
label[type="button"]:focus,
label[type="button"]:hover {
  filter: brightness(1.4);
  cursor: pointer;
}

/* Format navigation */
header > nav {
  font-size: 1rem;
  line-height: 1;
  padding: 1rem 0 0 0;
  margin: 0 2rem 2rem 0;
}

/* Use flexbox to allow items to wrap, as needed */
header > nav ul,
header > nav ol {
  align-content: space-around;
  align-items: center;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

/* List items are inline elements, make them behave more like blocks */
header > nav ul li,
header > nav ol li {
  display: inline-block;
}

header > nav a,
header > nav a:visited {
  margin: 0 0.5rem 1rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 5px;
  /*color: var(--text);*/
  color: #48737b;
  /*text-color: var(--text);*/
  text-color: #48737b;
  display: inline-block;
  padding: 0.1rem 1rem;
  text-decoration: none;
}

header > nav a:hover {
  border-color: var(--accent);
  /* color: var(--accent); */
  color: var(--text);
  text-color: var(--text);
  cursor: pointer;
}

/* Reduce nav side on mobile */
@media only screen and (max-width: 720px) {
  header > nav a {
    border: none;
    padding: 0;
    text-decoration: underline;
    line-height: 1;
  }
}

/* Consolidate box styling */
aside, details, pre, progress {
  background-color: var(--accent-bg);
  border: 1px solid var(--border);
  border-radius: 5px;
  margin-bottom: 1rem;
}

aside {
  font-size: 1rem;
  width: 30%;
  padding: 0 15px;
  margin-left: 15px;
  float: right;
}

#asidenav {
	text-align: right; 
	position: fixed; 
	right: 7%; 
	width: auto; 
	line-height: 0.5rem; 
	opacity: 0.8; 
	background-color: var(--accent-bg);
}

/* Make aside full-width on mobile */
@media only screen and (max-width: 720px) {
  aside {
    width: 100%;
    float: none;
    margin-left: 0;
  }
}

article, fieldset {
  border: 1px solid var(--border);
  padding: 1rem;
  border-radius: 5px;
  margin-bottom: 1rem;
  box-shadow: var(--card-box-shadow);
}

article h2:first-child,
section h2:first-child {
  margin-top: 1rem;
}

section {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 1rem 1rem;
  margin: 1rem 0;
}

/* Don't double separators when chaining sections */
section + section,
section:first-child {
  border-top: 0;
  padding-top: 0;
}

section:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

details {
  padding: 0.7rem 1rem;
}

summary {
  cursor: pointer;
  font-weight: bold;
  padding: 0.7rem 1rem;
  margin: -0.7rem -1rem;
  word-break: break-all;
}

details[open] > summary + * {
  margin-top: 0;
}

details[open] > summary {
  margin-bottom: 0.5rem;
}

details[open] > :last-child {
  margin-bottom: 0;
}

/* Format tables */
table {
  border-collapse: collapse;
  border-radius: 5px;
  display: block;
  margin: 1.5rem 0;
  overflow: auto;
  width: 100%;
}

td,
th {
  border: 1px solid var(--border);
  text-align: left;
  padding: 0.5rem;
}

th {
  background-color: var(--accent-bg);
  font-weight: bold;
}

tr:nth-child(even) {
  /* Set every other cell slightly darker. Improves readability. */
  background-color: var(--accent-bg);
}

table caption {
  font-weight: bold;
  margin-bottom: 0.5rem;
}

/* Format forms */
textarea,
select,
input {
  font-size: inherit;
  font-family: inherit;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  color: var(--text);
  background-color: var(--bg);
  border: 1px solid var(--border);
  border-radius: 5px;
  box-shadow: none;
  max-width: 100%;
  display: inline-block;
}
label {
  display: block;
}
textarea:not([cols]) {
  width: 100%;
}

/* Add arrow to drop-down */
select:not([multiple]) {
  background-image: linear-gradient(45deg, transparent 49%, var(--text) 51%),
    linear-gradient(135deg, var(--text) 51%, transparent 49%);
  background-position: calc(100% - 15px), calc(100% - 10px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 25px;
}

/* checkbox and radio button style */
input[type="checkbox"],
input[type="radio"] {
  vertical-align: middle;
  position: relative;
  width: min-content;
}

input[type="checkbox"] + label,
input[type="radio"] + label {
  display: inline-block;
}

input[type="radio"] {
  border-radius: 100%;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background-color: var(--accent);
}

input[type="checkbox"]:checked::after {
  /* Creates a rectangle with colored right and bottom borders which is rotated to look like a check mark */
  content: " ";
  width: 0.18em;
  height: 0.32em;
  border-radius: 0;
  position: absolute;
  top: 0.05em;
  left: 0.17em;
  background-color: transparent;
  border-right: solid var(--bg) 0.08em;
  border-bottom: solid var(--bg) 0.08em;
  font-size: 1.8em;
  transform: rotate(45deg);
}
input[type="radio"]:checked::after {
  /* creates a colored circle for the checked radio button  */
  content: " ";
  width: 0.25em;
  height: 0.25em;
  border-radius: 100%;
  position: absolute;
  top: 0.125em;
  background-color: var(--bg);
  left: 0.125em;
  font-size: 32px;
}

/* Makes input fields wider on smaller screens */
@media only screen and (max-width: 720px) {
  textarea,
  select,
  input {
    width: 100%;
  }
}

/* Set a height for color input */
input[type="color"] {
  height: 2.5rem;
  padding:  0.2rem;
}

/* do not show border around file selector button */
input[type="file"] {
  border: 0;
}

/* Misc body elements */
hr {
  border: none;
  height: 1px;
  background: var(--border);
  margin: 1rem auto;
}

mark {
  padding: 2px 5px;
  border-radius: 4px;
  background-color: var(--marked);
}

img,
video {
  max-width: 100%;
  height: auto;
  border-radius: 5px;
}

figure {
  margin: 0;
  text-align: center;
}

figcaption {
  font-size: 0.9rem;
  color: var(--text-light);
  margin-bottom: 1rem;
}

blockquote {
  margin: 2rem 0 2rem 2rem;
  padding: 0.4rem 0.8rem;
  border-left: 0.35rem solid var(--accent);
  color: var(--text-light);
  font-style: italic;
}

cite {
  font-size: 0.9rem;
  color: var(--text-light);
  font-style: normal;
}

dt {
    color: var(--text-light);
}

/* Use mono font for code elements */
code,
pre,
pre span,
kbd,
samp {
  font-family: var(--mono-font);
  color: var(--code);
}

kbd {
  color: var(--preformatted);
  border: 1px solid var(--preformatted);
  border-bottom: 3px solid var(--preformatted);
  border-radius: 5px;
  padding: 0.1rem 0.4rem;
}

pre {
  padding: 1rem 1.4rem;
  max-width: 100%;
  overflow: auto;
  color: var(--preformatted);
}

/* Fix embedded code within pre */
pre code {
  color: var(--preformatted);
  background: none;
  margin: 0;
  padding: 0;
}

/* Progress bars */
/* Declarations are repeated because you */
/* cannot combine vendor-specific selectors */
progress {
  width: 100%;
}

progress:indeterminate {
  background-color: var(--accent-bg);
}

progress::-webkit-progress-bar {
  border-radius: 5px;
  background-color: var(--accent-bg);
}

progress::-webkit-progress-value {
  border-radius: 5px;
  background-color: var(--accent);
}

progress::-moz-progress-bar {
  border-radius: 5px;
  background-color: var(--accent);
  transition-property: width;
  transition-duration: 0.3s;
}

progress:indeterminate::-moz-progress-bar {
  background-color: var(--accent-bg);
}

.link_nocolor {
  text-decoration: none;
  color: var(--text)!important;
}
.link_nocolor a:link {
  text-decoration: none;
  color: var(--text);
} 
.link_nocolor a:hover {
  text-decoration: none;
  color: var(--text);
}
.link_nocolor a:visited {
  text-decoration: none;
  color: var(--text);
}
.link_nocolor a:active {
  text-decoration: none;
  color: var(--text);
}