/* Define body properties for light mode */
body {
  --background: #FFF3E0;
  --foreground: #204040;
  --codeforeground: black;
  --codebackground: #FFEBCC;
  --program-output-background: #FFFFFA;

  background-color: var(--background);
  color: var(--foreground);
  font-size: 16px;
  line-height: 1.6;
  font-family: Verdana, sans-serif;

  /* This provides line breaks in text after a certain line length*/
  max-width: 40em;
  /* Center the text */
  margin: auto;

  /* Have a small horizontal margin also on mobile */
  width: 95%;
}
@media (prefers-color-scheme: dark) {
  body {
  --background: #18181A;
  --foreground: white;
  --codeforeground: white;
  --codebackground: #002B36;
  --program-output-background: #0E111B;
  }
  a:link {color:#cdf}
  a:hover, a:visited:hover {color:#def}
  a:visited {color:#dcf}
}
a {
  text-decoration: none;
  color: #3366cc;
}
a:hover, a:focus {
  text-decoration: underline;
}

@media print{
  body{ max-width:none }
}

/* Used for styling inline code */
code {
  color: var(--codeforeground);
  background-color: var(--codebackground);
  /* Padding to extend the background color slightly */
  padding-left: 0.1em;
  padding-right: 0.1em;
  /* Avoid line breaks */
  white-space: nowrap;
}

li {
  line-height: 1.5;
  margin-bottom: 0.5em;
}
ul, ol {
  padding-left: 1.3em;
}

pre.block-of-code {
  background-color: var(--codebackground);
  border-left: 3px solid #00A1BA;
  color: var(--codeforeground);
  font-family: monospace;
  line-height: 150%;
  padding: 0.5em;

  /* If the code block is wider than the viewport, add a horizontal scrollbar  */
  overflow: auto;
}
.program-output {
  background-color: var(--program-output-background);
  color: var(--codeforeground);
  font-family: monospace;
  line-height: 150%;
  padding: 0.5em;
  margin-top: 1em;
  margin-bottom: 1em;

  /* If the program output is wider than the viewport, add a horizontal scrollbar  */
  overflow: auto;
}

/* A key on the keyboard */
kbd {
  background-color: #f7f7f7;
  color: #333;
  border: 1px solid #ccc;
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.2),0 0 0 2px #fff inset;
  display:inline-block;
  margin: 0 .1em;
  padding: .1em .6em;
}

h1 {
  /* https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/Heading_Elements#specifying_a_uniform_font_size_for_h1 */
  margin-block: 0.67em;
  font-size: 2em;

  text-shadow: 0px 1px 1px gray;
}
h3 {
  margin-top: 2em;
}
h2 {
  margin-top: 1.5em;
}

.huge-text{
  font-size: 220%;
}

img.centered {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1.7em;
  margin-bottom: 1em;

  max-width: 85%;
  height: auto;
}

figcaption {
  font-size: 85%;
  margin-bottom: 3.5em;
  text-align: center;
}

video.centered {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1.7em;
  margin-bottom: 1em;

  max-width: 85%;
  height: auto;
}

/* We use this for information about the article: author and date */
aside {
  font-size: 75%;
  margin-bottom: 2em;
}

address{
  font-style: normal;
}

hr.last-horizontal-rule {
  margin-top: 3em;
  height: 2px;
  border: 0;
  /* Make the rule start thin and grow slightly towards the center */
  border-radius: 45%;
  background-image: linear-gradient(90deg, rgb(220, 30, 190) 0%, rgb(105, 136, 255) 50%, rgb(187, 18, 222) 100%)
}

footer {
  text-align: center;
  font-size: 75%;
}

details {
  margin-top: 1em;
  padding-left: 0.5em;
  padding-right: 0.5em;
  padding-bottom: 0.5em;
  /* Rounded corners for the box*/
  border-radius: 5px;
}

details summary {
  cursor: pointer;
}

details[open] {
  cursor: auto;

  box-shadow: 1px 2px 2px 3px gray;
  margin-bottom: 1em;
}

details[open] summary {
  border-bottom: 1px solid gray;
  margin-bottom: 0.5em;
}

/* The arrow in the details box */
summary::marker,
/* For Safari 15 */
summary::-webkit-details-marker {
  color: #007598;
}