@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Noto+Sans+Math&family=Noto+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Tinos:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {
  font-family: 'Noto Sans', sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {color: #333333; background-color: #edeaee;}
body.dark {color: #cccccc; background-color: #006488;}
* {margin: 0; box-sizing: border-box;}
.container {margin-left: auto; margin-right: auto; max-width: 1080px;}
.relative {position: relative;}
#main {background-color: #ffffff;}
.dark #main {background-color: #242424;}
#mobilemenubtn {display: none;}
#mobilemenu {
  display: none; 
  padding-bottom: 1em;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  height: calc(100vh - 48px);
  z-index: 65534;
}
#mobilemenu .mobilenavitem:last-child {
  margin-bottom: 64px;
}
#mobilesubmenu {display: none;}

/* Link styles */
#content a, #footer a {color: #006488; text-decoration: none;}
.dark #content a {color: #00b0ff;}
.dark #footer a {color: #ddffdd; text-decoration: none;}
#content a:hover, #footer a:hover {color: #222; text-decoration: underline;}
.dark #content a:hover {color: #eee;}
.dark #footer a:hover {color: #fff; text-decoration: underline;}

/* Navigation styles */
#nav {
  z-index: 65535;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #000000d9;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: saturate(160%) blur(8px);
  backdrop-filter: saturate(160%) blur(8px);
  font-family: 'Exo 2', sans-serif;
  font-size: 1rem;
  color: #0080dd;
}
.navitem {
  cursor: pointer;
  display: inline-block;
  height: 48px;
  margin: 0;
  padding: 14px 8px 15px 8px;
  color: #00b0ff;
  text-decoration: none;
  font-family: 'Exo 2', sans-serif;
  font-size: 1rem;
  font-weight: 400 !important;
}
.navitem:first-of-type {margin-left: 15px;}
.navitem:hover{color: #ffffff !important; text-decoration: none !important;}

/* Menu styles */
#menu {
  position: fixed;
  margin: 0;
  top: 0;
  width: 200px;
  height: 100%;
  padding: 74px 10px 10px 10px;
  font-size: 1rem;
}
.menuitem {
  display: block;
  color: #006488;
  text-decoration: none;
  width: 100%;
  padding: 5px 10px;
  border-radius: 5px;
  font-family: 'Noto Sans', sans-serif;
  font-size: 1rem;
  font-weight: 400 !important;
  line-height: 24px;
  transition: color 0.3s ease, background-color 0.3s ease;
}
#menu div {color:#000; padding: 5px 10px;  font-family: 'Noto Sans', sans-serif; font-size: 1rem; font-weight: 400 !important; line-height: 24px;}
.dark #menu div {color:#ccc;}

.menuitem:hover {color: #ffffff !important; background-color: #006488; text-decoration: none !important;}
.dark .menuitem {color: #00b0ff;}
.dark .menuitem:hover {color: #ffffff; background-color: #3f3f48;}
#menu hr {
  height: 1px;
  border: 0;
  margin-top: 10px;
  margin-bottom: 10px;
  border-top: 1px solid hsl(195, 67%, 80%);
}
.dark #menu hr {border-top: 1px solid #333333;}

/* Breadcrumbs styles */
#breadcrumbs {
  font-family: 'Noto Sans', sans-serif;
  font-size: 14px;
}
#breadcrumbs i {color: #006488;}
.dark #breadcrumbs i {color: #00b0ff;}

/* Content styles */
#content {
  max-width: 960px;
  font-family: 'Noto Sans', sans-serif;
  font-size: 16.8px;
  padding: 80px 20px 20px 20px;
  margin-left: 200px;
  min-height: 480px;
}
h1 {
  color: #000000;
  font-family: 'Exo 2', sans-serif;
  font-size: 38px;
  font-weight:600;
  margin: 0;
  margin-top: 30px;
  margin-bottom: 30px;
}
.dark h1 {color: #ddeeee;}
h2 {
  color: #002222;
  font-family: 'Exo 2', sans-serif;
  font-size: 28px;
  font-weight:600;
  margin: 0;
  margin-top: 30px;
  margin-bottom: 12px;
}
.dark h2 {color: #ddeeee;}
h3 {
  color: #222222;
  font-family: 'Exo 2', sans-serif;
  font-size: 20px;
  font-weight:600;
  margin: 0;
  margin-top: 20px;
  margin-bottom: 8px;
}
.dark h3 {color: #dddddd;}
p {
  margin: 0;
  padding: 0;
  font-family: 'Noto Sans', sans-serif;
  font-size: 16.8px;
  line-height: 1.6em;
  max-width: 80ch;
}
#footer {
  color: #555555;
  font-size: 15px;
  text-align: center;
  padding-top: 30px;
  padding-bottom: 30px;
}
.dark #footer {color: #dddddd;}

/* Mobile menu */
#mobilemenu .mobilenavitem {
  display: block;
  margin: 0;
  margin-left: 15px;
  cursor: pointer;
  padding: 14px 8px 16px 8px;
  color: #00b0ff;
  text-decoration: none;
  font-family: 'Exo 2', sans-serif;
  font-size: 1rem;
  font-weight: 400 !important;
}
#mobilemenu .mobilenavitem:hover{color: #fff !important; text-decoration: none !important;}
#mobilemenu div {color:#ccc; font-size: 1rem; padding: 14px 8px 16px 8px; font-family: 'Exo 2', sans-serif;}

#mobilesubmenu {display: block;}
#mobilesubmenu .submenuitem {
  margin-left: 60px;
  padding: 10px 5px;
  display: block;
  color: #00b0ff;
  text-decoration: none;
  font-family: 'Exo 2', sans-serif;
  font-size: 1rem;
  font-weight: 400 !important;
}
#mobilesubmenu .submenuitem:hover{color: #ffffff !important; text-decoration: none !important;}
#mobilesubmenu hr {
  height: 1px;
  border: 0;
  margin-top: 10px;
  margin-bottom: 10px;
  border-top: 1px solid #444444;
}

/* Special classes */
pre {margin-top: 20px; margin-bottom: 20px;}
code {font-family: monospace; font-size: 14px; line-height: 20px; border-radius: 4px;}
.inline-code {font-family: monospace; padding: 4px 8px; border-radius: 4px; background-color: #ddd;}
.dark .inline-code {background-color: #444;}

.pubdate {
  font-size: 14px;
  font-style: italic;
  margin-top: 8px;
  margin-bottom: 8px;
}
#content hr {
  height: 1px;
  border: 0;
  background-color: #ccc;
  margin: 20px auto;
}
.dark #content hr {background-color: #555;}
.margintop32 {margin-top: 32px;}
.margintop16 {margin-top: 16px;}
.marginbottom32 {margin-bottom: 32px;}
.marginbottom16 {margin-bottom: 16px;}
.taglist {font-size: 14px; margin-top: 16px;}
.taglist a, .taglist span {
  font-size: 14px;
  text-decoration: none;
  border-radius: 4px;
  padding: 2px 10px;
  color: #000 !important;
  background-color: #ccc;
  white-space: nowrap;
}
.taglist {
  line-height: 26px;
}
.taglist a::before, .taglist span::before {
  content: "#";
}
.nohash a::before, .taglist span::before {
  content: unset;
}
.taglist a:hover {
  text-decoration: underline;
}
.tagincloud {
  overflow-wrap: break-word;
}

.center{text-align:center; min-height: max-content;}

/* flexboxes and grids */
.post {margin-top: 32px;}
.post-cont {display: flex; align-items: flex-start; gap: 1em;}
.service-cont {display: flex; align-items: flex-start; gap: 1em;}
.service-cont div {flex: 1; justify-content: center;}
.book {display: flex; align-items: flex-start; flex-wrap: nowrap; gap: 1em;}
.grid-cont {
  margin-top: 32px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px 16px;
}
.grid-cont .post {margin-top: 0;}
.grid-cont .post h3 {margin-top: 0;}
@media (min-width: 960px) {
  .grid-cont {grid-template-columns: 1fr 1fr;}
}

/* Image classes */
.bookcover {
  aspect-ratio: 5 / 8;
  width: 240px;
  height: 384px;
  max-width: 100%;
  height: auto;
}
.thumb-bookcover {
  aspect-ratio: 5 / 8;
  width: 160px;
  height: 256px;
  object-fit: contain;
  border-radius: 4px;
}

.pict-sq {
  aspect-ratio: 1 / 1;
  margin: 4px auto;
  width: 340px;
  max-width: 100%;
  height: auto;
}
.thumb-sq {
  aspect-ratio: 1 / 1;
  width: 128px;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
}

.pict-chem-sm {
  margin: 4px auto;
  width: 192px;
  max-width: 100%;
  height: auto;
}
.thumb-chem-sm {
  width: 128px;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
}

.pict-chem-big {
  margin: 4px auto;
  width: 800px;
  max-width: 100%;
  height: auto;
}
.thumb-chem-big {
  width: 160px;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
}

.pict-3-2 {
  aspect-ratio: 3 / 2;
  margin: 4px auto;
  width: 512px;
  max-width: 100%;
  height: auto;
}
.thumb-3-2 {
  aspect-ratio: 3 / 2;
  width: 192px;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
}

.pict-4-3 {
  aspect-ratio: 4 / 3;
  margin: 4px auto;
  width: 512px;
  max-width: 100%;
  height: auto;
}
.thumb-4-3 {
  aspect-ratio: 4 / 3;
  width: 172px;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
}

.pict-vid {
  aspect-ratio: 16 / 9;
  margin: 4px auto;
  width: 560px;
  max-width: 100%;
  height: auto;
}

iframe {aspect-ratio: 16 / 9; max-width: 100%; height: auto;}

.thumb-vid {
  aspect-ratio: 16 / 9;
  width: 214px;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
}

.dark img[src$=".svg"] {
  filter: invert(1) hue-rotate(180deg) saturate(32) brightness(0.9);
}

/* Buttons */
.but {
  margin: 8px 0;
  display: inline-block;
  background-color: #05d;
  font-size: 1rem;
  font-family: inherit;
  font-weight: 600;
  color: #eee !important;
  text-decoration: none;
  text-align: center;
  padding: 8px 24px;
  min-width: 8em;
  border-radius: 32px;
  border: 1px solid #05d;
  transition: border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease;
}
.but:hover {background-color: #046; border-color: #046; color: #fff;}
.buy-but {
  margin: 8px 0;
  display: inline-block;
  background-color: #ffd814;
  font-size: 1rem;
  font-family: inherit;
  font-weight: 600;
  color: #011 !important;
  text-decoration: none;
  text-align: center;
  padding: 8px 24px;
  /* min-width: 8em; */
  border-radius: 32px;
  border: 1px solid #ffd814;
  transition: border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease;
}
.buy-but:hover {
  background-color: #f0c04b;
  border-color: #f0c04b;
  color: #000 !important;
  text-decoration: none !important;
}
.price {
  margin: 8px 2px;
  display: inline-block;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  padding: 6px 24px;
  border-radius: 32px;
  border: 2px dotted #ffd814;
}
.moreinfo {
  margin: 8px 0;
  display: inline-block;
  font-size: 1rem;
  font-family: inherit;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  padding: 8px 24px;
  /* min-width: 8em; */
  border-radius: 32px;
  border: 1px solid #06a;
}
.buy-link {
  margin: 8px 2px;
  display: inline-block;
  font-size: 1rem;
  font-family: inherit;
  font-weight: 600;
  text-decoration: none;
  padding: 8px 24px;
  border-radius: 32px;
  border: 2px dotted #06a;
}

/* Forms */
.floating {float: left; margin: 8px;}
.nearfloat {overflow: hidden;}
.clearboth {clear: both;}
.green {color: #0d0; padding: 8px 0;}
.red {color: #f52; padding: 8px 0;}
.disappear {animation: 8.1s linear fadeout;}
@keyframes fadeout {
  0% {opacity: 1; transform: scale(1, 1);}
  80% {opacity: 1; transform: scale(1, 1);}
  99% {opacity: 0; transform: scale(1, 0.1);}
}
.textinput {
  margin: 0;
  max-width: 100%;
  display: inline-block;
  font-family: inherit;
  font-size: inherit;
  color: #000;
  background-color: #fff;
  border: 1px solid #444;
  border-radius: 4px;
  padding: 8px 8px;
}
.smlabel {display: block; font-size: 15px;}
.dark .textinput { color: #ddd; background-color: #111;}
.textinput:hover {border: 1px solid #06e;}
.textinput:focus, .textinput:active {border: 1px solid #06e; outline: 0;}
.multiline {font-family: inherit; height: unset;}
.inputwrapper {margin: 10px 0; position: relative;}
.processor {
  margin: 20px;
  display: none;
  color: inherit;
  position: relative;
  background-color: transparent;
  height: 90px; width: 90px;
  border-radius: 50%;
}
.loadingCircle {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 50%;
  border-top: 8px solid #68e;
  border-right: 8px solid #246;
  border-left: 8px solid #246;
  border-bottom: 8px solid #246;
  animation: 1s linear 0s infinite rotate;
}
@keyframes rotate { 0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);} }
.loadingMessage {
  position: absolute;
  width: 100%; top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  text-align: center;
}

/* Mobile styles */
@media screen and (max-width: 960px) {
  #mobilemenubtn {display: inline-block;}
  #menu {display: none;}
  #content {margin-left: 0;}
  #nav span {display: none;}
  #nav a.navitem {display: none; margin-left: 15px;}
  .book {flex-wrap: wrap;}
  .service-cont {flex-wrap: wrap;}
}
@media screen and (max-width: 400px) {
  .post-cont {flex-wrap: wrap;}
}