:root {


   /* Body font size. By default, effectively 18.4px, based on 16px as 'root em' default 1.15 */
   /*   --base-fontsize: 1.25rem; */

  /* Major third scale progression - see https://type-scale.com/ default: 1.25 */
      --header-scale: 1.125;

  /* Line height is set to the "Golden ratio" for optimal legibility Default: 1.618 */
     --line-height: 1.5;

  /* Default (light) theme */
  --bg: #ffffff ;
  --bg-dimmed: #f2f2f2 ;
  --accent-bg: #f8f8f8;
  --text: #282828;
  --note-text: #282828;
  --accent: #0031a9;
  --text-light: #585858;
  --nav-accent: #3548cf;
  --border: #e0e0e0;
  --link: #354fcf;
  --accent-light: #9fc6ff;
  --code: #d81b60;
  --preformatted: #444;
  --marked: #f3d000;
  --disabled: #efefef;
  --note: #fff576;
}

@media (prefers-color-scheme: dark) {
:root {
  --bg: #202328 ;
  --bg-dimmed:  #282c34  ;
  --accent-bg: #1d2235;
  --text: #D1DAE8;
  --note-text: #202328;
  --accent: #2fafff;
  --text-light:  #989898;
  --nav-accent: #00bcff ;
  --border:  #3f444a;
  --link: #354fcf;
  --accent-light: #2fafff;
  --code: #f78fe7;
  --preformatted: #dddddd;
  --marked: #fec43f;
  --disabled: #efefef;
  --note:#dfaf7a;
  }

  img,
  video {
    opacity: 1;
  }
} 





/* Setting new font and background pattern */


/* Adjusting the body */
body {
  max-width: 43rem;
  padding: 7vw 5vw 2rem;
  min-height: auto; 
   -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

/*.masthead {
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border)
}*/

/*.site-title a {
  border: none;
  font-variant: none;
  text-transform: none;
  font-style: italic;
  padding-bottom: 0
  } */

navigation a {
  color: var(--nav-accent) !important;
  text-decoration: none ;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 0.85em;
  font-weight: bold
}

navigation a:hover {
   color: var(--nav-accent) !important;
  text-decoration: underline
}

/* Adjusting the title and adding a border */


.subtitle {
  color: var(--text-light);
  font-size: calc(var(--base-fontsize) * var(--header-scale));
  margin-top: calc(var(--line-height) * 1.5rem);
  font-weight: 400;
  font-style: italic;
}

.intro p {
  
  font-size: 1.25em;
  line-height: 1.35;
}


#blog-index ul {
  padding-left: 1em;
  text-transform: uppercase;
}

footer {
  font-size: 1.125rem;
  color: var(--text)
}


a {
  font-weight: 500;
  color: var(--accent); 
  text-decoration: underline;
  text-underline-offset: 3px;
  /*  text-decoration-color: var(--accent-light) */
}

a:hover {
  color: var(--code) !important;
  text-decoration: underline; 
  text-decoration-style: solid;
}


footer a {
  border-bottom: none;
  text-decoration: underline}

.post-meta {
  margin-top: 2rem;
  font-family: var(--sans-font);
  color: var(--text-light);
  font-size: 1rem;
}

 #blog-index ul, #homepage ul {
  list-style: none;
  padding-left: 0;
}



#blog-index ul li {
  color: var(--text-light) ;
  padding-top: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border)
}

#blog-index ul li a{
  display: block;
  border:none;
  color: var(--accent);
  font-size: 1.125em;
  font-weight: 600;
  text-decoration: none
}


#blog-index ul li a:hover {
  background: none;
  text-decoration: underline;
}



#blog-index .post-meta,
#homepage .post-meta{
  display: none
}    



#homepage ul li  {
  color: var(--text-light);
  padding-bottom: 0.125em
}


/* Fixing the image-alignment and the captions */
p img,
main img,
main video {
  max-width: 100%;
  height: auto;
  border-radius: 5px;
}

.figure {
    font-size: 0.9rem;
  font-family: var(--sans-font);
  color: var(--text-light);
  text-align: center;
  margin-bottom: 1rem;
}

blockquote {
  margin: 2rem 0 2rem 2rem;
  padding-left: 2rem;
  font-style: italic;
  background: var(--bg-dimmed);
  border: 1px solid var(--border);
  border-left: 0.45rem solid var(--accent);
}


.hd-date {
  display: inline;
  float: right;
  font-variant: small-caps;
  text-transform: lowercase
}

.note {
  font-family: var(--sans-font);
  font-size: 0.912em;
  color: var(--note-text);
  background:  var(--note); 
  padding: 0.1em 1em 0.1rem 1em;
  border: 1px solid var(--marked);
  margin-bottom: 1em;
  
}

.title {margin-top: 2rem}

.monoblock {
  font-family: var(--mono-font);
  font-size: 0.8125em;
  color: var(--text-light);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 0 1.5em;
}


pre {
  background: var(--bg-dimmed)
}

@media only screen and (max-width: 450px) {
  
  html {
   font-size: 0.875em;
    border: none;
  }
  
  blockquote {
    margin-left: 0;
  }
  
}

/* This is only for the frame */

@media only screen 
  and (min-width: 800px) 
  and (min-height: 800px)  { 

    html {
  border-left: 1em solid var(--bg-dimmed);
  border-right: 1em solid var(--bg-dimmed);    
  
}

    
    html:after, html:before {
		content: "";
    background: var(--bg-dimmed);
		display: block;
		height: 1em;
		position: fixed;
		width: 100%;
		z-index: 99;
}

html:before {
  top: 0;
}

html:after {
  bottom:0
}
}