:root {
  --primary-color: #76cef4; /*70A9FF - >  76CEF4 - >  7BF2EA*/
  --primary-color-tint: #f0f8ff;
  --offwhite-color: #fafafa;
  --padding-left-right: 8%;
  --padding-above: 15%;
  --font-size-smaller2: 13px;
  --font-size-smaller: 14px;
  --font-size-normal: 16px;
  --font-size-bigger: 18px;
  --font-size-bigger2: 20px;
  --font-size-bigger3: 24px;
  --font-color-light2: #7b93ab;
  --font-color-light: #5a7896;
  --font-color-normal: #445a71;
  --font-color-dark: #2d3c4b;
  --font-color-dark2: #171e26;
  --border-radius-normal: 6px;
  --header-height: 0 /*50px*/;
  --bottom-nav-height: 50px;
  /*--left-sidebar-width:85%;*/
}
/*@media (min-width:400px){
	:root{
		--left-sidebar-width:300px;
	}
}*/
@media (min-width: 800px) and (orientation: landscape) {
  :root {
    --padding-left-right: 10%;
    --padding-above: 8%;
    --font-size-smaller2: 15px;
    --font-size-smaller: 16px;
    --font-size-normal: 18px;
    --font-size-bigger: 21px;
    --font-size-bigger2: 26px;
    --font-size-bigger3: 32px;
    --header-height: 65px;
    /*--left-sidebar-width:17%;*/
  }
  body {
    margin-bottom: 0;
  }
}

/* ---------------------------
###   Generic page styling   |
----------------------------*/

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
::selection {
  background-color: transparent;
}

html {
  height: 100%;
}
body {
  margin: 0px;
  padding: 0px;
  margin-top: var(--header-height);
  margin-bottom: var(--bottom-nav-height);
  font-size: var(--font-size-normal);
  color: var(--font-color-normal);
  font-weight: 400; /*normal;*/
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    'century gothic', sans-serif;
  /*font-family:'Segoe UI','Roboto','century gothic',Verdana,Arial,Helvetica,sans-serif;*/
  /*letter-spacing:1px;*/
  background-color: #fff; /*#fafafa,fbfbfb,f8f8f8,eeeeef,eaedf1,ecf0f1,e8e8ea,e6e6e6;*/
  /*background:#fff url('img/miNote4msg.png') no-repeat fixed center/100% 100%;*/
  direction: ltr;
  line-height: 1.6;
  cursor: default; /*forces a pointer type cursor instead of selecton caret*/
  /*font-feature-settings: 'kern';
	text-rendering: optimizeLegibility;*/
}
a {
  text-decoration: none;
  color: var(--primary-color); /*#0b9,05a;font-style:italic*/
}
a:active,
*:active {
  outline: none;
}
a:focus,
*:focus {
  outline: 0; /*-moz-outline-style:none;*/
  outline-style: none;
}
a img {
  border: 0 none;
}

ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}

h1,
h2 {
  font-weight: 600;
  color: var(--font-color-dark2);
}
h1 {
  font-size: var(--font-size-bigger3);
}
h2 {
  font-size: var(--font-size-bigger2);
}
h3 {
  color: var(--font-color-dark);
}

.darkBg {
  background-color: var(--offwhite-color);
}

/* ---------------------------
###   Main element styling   |
----------------------------*/

main > #breadcrumb-nav {
  padding: 5px var(--padding-left-right);
  margin: 0;
  font-size: var(--font-size-smaller2);
}

main > * {
  padding: 20px max(var(--padding-left-right), 160px) 20px
    var(--padding-left-right);
  margin: 0;
}
main > h1 {
  text-align: center;
  position: relative;
}

/* ---------------------------
###   Main article styling   |
----------------------------*/

main > article > h2 {
  margin: var(--padding-above) 0 3% 0;
  padding: 0 0 0 20px;
  border-left: 3px solid var(--primary-color);
}
main > article > h2:first-child {
  margin-top: 3%;
}

/*main > article > h3::before{
	content: '|';
	color:var(--primary-color);
	font-weight:bold;
	line-height:0;
	padding-right:15px
}*/

main > article > h2:hover > a:before {
  content: '🔗';
  font-weight: normal;
  margin-left: 10px;
}

main > article p {
  text-align: justify;
}
main > article > p:first-child {
  margin-top: 0;
}
main > article > p > strong {
  color: var(--font-color-dark);
  font-weight: 600;
}
main > article > p > img {
  max-width: 100%;
}

article a {
  border-bottom: 1px dashed var(--primary-color);
}

#code-editor {
  all: unset;
}

/*blockquote > p{
	background-color:#ffb;
	padding: 20px;
	box-shadow: 0 0 0 1px #fe8 inset;
	font-size: var(--font-size-smaller);
}*/