.thumb{
    max-height: 437px;
    margin:5px 30px 25px 0;
    aspect-ratio: 4/3;
    -webkit-border-radius:10px;
    -khtml-border-radius:10px;-moz-border-radius:10px;border-radius:10px
}

.nvhead{
    font-size:23px;
	color: #39c;
}

.pure-g-r img{
    max-width:100%}.pure-u-1-2{display:inline-block;zoom:1;letter-spacing:normal;word-spacing:normal;vertical-align:top;text-rendering:auto
}

body{
  padding:15px;
  font-size: 20px;
  font-family: charter, Georgia, Cambria, "Times New Roman", Times, serif;;
  color:#444;
}

.blue {
  color: #39c;
}
h1,h2,h3,h4,h5,h6{color:#222;margin:0 0 20px}

h2,h3{margin:0 0 14px}p,ul,ol,table,pre,dl{margin:0 0 20px}

h1,h2,h3{line-height:1.1}

.stalk_link{font-size:18px;display:inline}

.me_blurb{font-size:14px; margin:-15px 0 15px}.clear{width:100%;clear:both}

h3,h4,h5,h6{color:#494949}
a{color:#39c;font-weight:400;text-decoration:none}a small{font-size:16px;color:#444;margin-top:-.6em;display:block}



.wrapper{width:100%;margin:0 auto;position:relative}

@import url('https://fonts.googleapis.com/css?family=Special+Elite');

blockquote {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  color: #333;
  line-height: 1.6;
  margin: 1rem 0;
  padding: 1rem;
  border-left: 4px solid #39c;
  background-color: #f9f9f9;
}
.dq:before,
.dq:after{
	position: absolute;
	color: #f1efe6;
	font-size: 8rem;
	width: 4rem;
	height: 4rem;
}

.dq:before {
	content: '“';
	left: -5rem;
	top: -2rem;
}

.dq:after {
	content: '”';
	right: -5rem;
	bottom: 1rem;
}


.attention{
  background: #ffffb3;
  border-left: 10px solid orange;
}


p code{
    color: #323a45;
    background: #f7f7f7;
    padding: 3px;
    border-radius: 0.1875em;
    border: 1px solid #aeb0b5;
    font-size: 1rem;
    word-wrap: break-word;
    white-space: pre-wrap;


}

pre{padding:8px 15px;
  background:#f8f8f8;
  border-radius:5px;border:1px solid #e5e5e5;
  overflow-x:auto;
  white-space: pre-wrap;
}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:5px 10px;border-bottom:1px solid #e5e5e5}dt{color:#444;font-weight:700}th{color:#444}img{max-width:100%}

header{width:20%;height:100%;
    float:left;position:relative;overflow:auto;
    padding-left:10%; padding-right:5%;}

section{width:50%;float:left;padding-right:5%; padding-bottom:50px;
	max-width: 800px;
}

small{font-size:16px;color:#888}

header ul{
    list-style:none;
    height:40px;
    padding:0;
    background:#eee;
    background:-moz-linear-gradient(top,#f8f8f8 0%,#ddd 100%);
    background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#f8f8f8),color-stop(100%,#ddd));
    background:-webkit-linear-gradient(top,#f8f8f8 0%,#ddd 100%);background:-o-linear-gradient(top,#f8f8f8 0%,#ddd 100%);
    background:-ms-linear-gradient(top,#f8f8f8 0%,#ddd 100%);background:linear-gradient(top,#f8f8f8 0%,#ddd 100%);
    border-radius:5px;border:1px solid #d2d2d2;box-shadow:inset #fff 0 1px 0,inset rgba(0,0,0,0.03) 0 -1px 0;
    width:240px;
}

hr{border:0;background:#e5e5e5;height:1px;margin:0 0 20px}footer{bottom:0}@media print,screen and (max-width: 960px){div.wrapper{width:auto;margin:0}

header,section,footer{float:none;position:static;width:auto}section{border:1px solid #e5e5e5;border-width:1px 0;padding:20px 0;margin:0 0 20px}

header a small{display:inline}
header ul{position:absolute;right:50px;top:52px}}@media print,screen and (max-width: 600px){body{word-wrap:break-word}header{padding:0}

header ul,header p.view{position:static}pre,code{word-wrap:break-word}}@media print{body{padding:15px;font-size:16pt;color:#444}}

.mytag{border-radius:3px;color:#fff;font-size:14px;font-weight:700;position:relative;text-transform:uppercase;top:-1px;background-color:#4183C4;-webkit-font-smoothing:antialiased;margin:5px;padding:2px 5px}@font-face{font-family:Somefont;

src:url(../font/OneDirection.ttf);font-weight:400;font-style:normal}

h1.heading{font-family:Myfont;color:#39c}.top{color:#444}

.sub{
    font-family:Somefont
}

/* scroll */

#back-top{
  position:fixed;
  background:--accent-gradient-20: linear-gradient(132deg,var(--accent-top-20) 0%,var(--accent-bottom-20) 100%);
}

.king-basil {
  font-family: "King Basil";
  font-size: 28px; color: rgb(81, 170, 232);
}


#back-top a{
    position: fixed;
    font-size: 25px !important;
    text-align: center;
    bottom: 30px;
    right: 30px;
    width:40px;display:block;text-align:center;font:11px/100% Arial,Helvetica,sans-serif;text-transform:uppercase;text-decoration:none;
    color:#39c;-webkit-transition:1s;-moz-transition:1s;transition:1s}

#back-top span{
  height:28px;

  /*background:url(/../img/blue_arrow.png) center center no-repeat;*/
  display:block;
  cursor:pointer;-webkit-border-radius:10em;-moz-border-radius:10em;border-radius:10em;margin:-8px 0 0 6px
}
#back-top a:hover span{background-color:#777}

/* end scroll */
.pagination{margin:20px 0;padding:10px 0}

.pagination a  {width:auto; }
.pagination a:hover {color:#39c; }

.prev-item{float:left;text-align:left}

.next-item{float:right;text-align:right}

.footer{bottom:0;left:0;float:left;clear:both;margin:0;padding:0;width:100%}

.footer hr{border:0;height:0;border-top:1px solid rgba(0,0,0,0.1);border-bottom:1px solid rgba(255,255,255,0.3)}.footer p{padding-left:400px;display:block;-webkit-margin-before:1em;-webkit-margin-after:1em;-webkit-margin-start:0;-webkit-margin-end:0}

.codeblock{
    padding: 0px 1px;
    overflow-x: auto;
    color: #444;
    font: 300 1.125em "Source Sans Pro", Helvetica, Arial, sans-serif;
	font-size:20px;
    word-wrap: break-word;
}

.entry-title{
  font-size: 36px;  
}

/* Better styles for embedding GitHub Gists */
.gist .blob-code-inner{
  font-size:16px !important;
}
.gist-meta {
  display: none !important;
}

.gist .blob-code-inner {
  white-space: pre-wrap !important;
}



/* pastebin */
.embedPastebin {
  font-size: 18px !important;
}

.embedFooter {
  display: none !important;
}


.latex-pseudo-code {
    border-top: 2px solid black;
    border-bottom: 2px solid black;
    margin: 30px auto;
    font-size: 0.9em;
    text-align: left;
    overflow-x: auto;
}

.katex-display>.katex {
    display: block;
    text-align: left !important;
    white-space: nowrap;
}

.katex .mtable .col-align-l>.vlist-t {
    text-align: left;
}
.katex .vlist-t {
    display: inline-table;
    table-layout: fixed;
    border-collapse: collapse;
}

.katex-display.fleqn>.katex {
    text-align: left;
    padding-left: 2em;
}

/* audio button */

#player{
    border-radius:3px;
    box-shadow:0 0 8px #eee;
    width:100%;
    margin: 0 auto;
    padding-bottom: 20px;
}

.listen{color:#39c;margin-bottom:7px}

#player #waveform img{width:100%}#player audio{width:100%}

.logo__cursor{display:inline-block;
    width:10px;
    height:1rem;
    background: #39c;
    margin-left:5px;border-radius:1px;animation:cursor 1s infinite;
}@media(prefers-reduced-motion:reduce){.logo__cursor{animation:none}}@keyframes cursor{0%{opacity:0}50%{opacity:1}100%{opacity:0}}.menu{background:#fafafa;border-right:1px solid;margin-right:18px;z-index:9999}

/** pagination
courtesy ~
https://www.amitmerchant.com/reverie/
https://muffinman.io/blog/custom-jekyll-pagination/

**/
.pagination-wrapper {
  text-align: center;
}

.pagination {
  display: inline-block;
  margin: 0 0 2rem;
}

.pagination a:hover {
  background: #ddd;
  color: #fff;
}


.pagination-wrapper .pagination a,
.pagination span {
  border-radius: 3px;
  float: left;
  height: 20px;
  line-height: 20px;
  width: 28px;
  border: 1px solid #eee;
  padding: 7px 18px;
  list-style-position: inside;

}

.pagination-wrapper a.pagination-step,
span.pagination-step {
  width: auto;
}

.pagination-first,
.pagination-last,
.pagination-more, {
  display: none;
}

.pagination .active {
  background: #39c;
  color: #fff;
}

@media (min-width: 38em) {
  .pagination-first,
  .pagination-last,
  .pagination-more {
    display: block;
  }

  a.pagination-step,
  span.pagination-step {
    width: auto;
  }
}

/** audio **/
/* Courtesy : https://blog.prototypr.io/align-svg-icons-to-text-and-say-goodbye-to-font-icons-d44b3d7b26b4
*/
.icon {
  display: inline-flex;
  align-self: center;
  color:#39c;
}

.icon svg, .icon img {
  height: 1em;
  width: 1em;
  fill: currentColor;
}

.icon.baseline svg, .icon img {
  top: .125em;
  position: relative;
}

.cl{ color: rgb(51, 153, 204);}

/* navbar */


.navbar-nav{
    left: 0;
    clear:both;
    top: 0;
    bottom: 0;
    width: 100%;
    margin: 0 auto;
    text-transform: uppercase;
    background: white;
    color: #39c;
    position: relative;
    overflow-x: auto;
    word-wrap: break-word;
}

/*https://codepen.io/tdevine33/pen/CnDyv */

.main-nav ul {
    background: white;
    text-decoration: none;
    color: #000;
    float:left;
  }

  .main-nav a {
    color: #DFDBD9;
    font: 300 1.125em "Source Sans Pro", Helvetica, Arial, sans-serif;
    text-align: center;
    text-transform: uppercase;
    padding:15px 30px;
    text-decoration: none;
    color: #000;

  }
  .main-nav a:hover {
    color: #000;
  }

  .list-hover-slide li {
    position: relative;
    overflow: hidden;
    line-height: 140%;
    padding: 12px 0;
    border-bottom: 1px solid #ddd;
    color: #000;
  }

  .list-hover-slide a {
    display: block;
    position: relative;
    z-index: 0;
    transition: .35s ease color;
    text-decoration: none;
    border-bottom: none !important;
    color: #000;
  }
  .list-hover-slide a:hover {
       color: #ddd !important;
   }
  .list-hover-slide a:before {
    content: '';
    display: block;
    z-index: -1;
    left: -100%;
    top: 0;
    width: 100%;
    height: 100%;
    border-right: solid 5px #39c;
    background: #39c;
    transition: .35s ease left;
    color: #fff;

  }
  .list-hover-slide a:hover:after {
      color:white;
      width:100%;
  }
  .list-hover-slide a.is-current:before, .list-hover-slide a:hover:before {
    left: 0;
    color: #fff;
  }

  
  /**css for polls */

  /** we dont want padding **/
  .hpoll_ALkxm0{
    padding: 0 0 0 0 !important;
  }
  /**no title text for poll */
  .hpoll_ALkxm0_t {
    display: none !important;
  }
  /*no border */
  .hpoll_ALkxm0_o{
    border: none !important;
    border-bottom: 1px solid #ddd !important; 
    padding: 12px 0 !important;
  }
  
  .hpoll_ALkxm0_o-title{
    font: 300 1.125em "Source Sans Pro", Helvetica, Arial, sans-serif !important;
    color: #39c !important;
    cursor: pointer;
    line-height: 140% !important;
    font-size:20px !important;
  }
  
  .hpoll_ALkxm0_o-title:hover{
    color: #ddd !important;
    z-index: 0;
    transition: .35s ease color;
  }

    /**css for about me page **/

#wrap_slider{
  clear:both;
  width: 100%; 
  height: 394px; 
  padding: 0; 
  position:relative;  
  top:0px; overflow: hidden;
}
#crop { width:100%; height:100%; position:relative; left:-120px; top:0px; }
#crop { -ms-zoom: 1.3; -moz-transform: scale(1.3); -moz-transform-origin: 0px 0; -o-transform: scale(1.3); -o-transform-origin: 0 0; -webkit-transform: scale(1.3); -webkit-transform-origin: 0 0; }

.code-block {
  position: relative;
}

.copy-button {
  position: absolute;
  top: 0;
  right: 0;
}

code[class*=language-],pre[class*=language-]{
  word-wrap: break-word !important;
  white-space: pre-wrap !important;
}

/**author design **/
.author-info {
  display: flex;
  align-items: center;
  margin-top: 10px;
  font-family: Arial, sans-serif;
  margin-bottom: 20px;
}

.author-image {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 10px;
}

.author-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.author-name {
  font-size: 18px;
  font-weight: bold;
}

/** audio tag **/
.speech {
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  color: #333;
  text-decoration: none;
}

.speech span {
  margin-left: 0.5em;
}

.speech .icon-volume-up {
  display: none;
  font-size: 16px;
  margin-left: 0.2em;
}

.speech:hover .icon-volume-up {
  display: inline-block;
}

.speech-link {
  color: blue; /* Added blue color */
  text-decoration: underline; /* Added underline */
}

.speech-link:hover {
  color: red; /* Update color on hover */
}

/* algolia */
/* Algolia search bar */
.aa-input-container {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.aa-input-search {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
}

.aa-input-search input {
  flex: 1;
  width: 100%;
  border: none;
  outline: none;
  font-size: 14px;
}

.aa-input-search .aa-input-icon {
  margin-right: 8px;
}

.aa-input-search .aa-icon-cancel {
  cursor: pointer;
  transition: opacity 0.3s;
  opacity: 0;
}

.aa-input-search:hover .aa-icon-cancel {
  opacity: 1;
}

.aa-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 100;
  display: none;
  padding: 8px 0;
  margin: 2px 0 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.aa-suggestion {
  padding: 6px 8px;
  cursor: pointer;
}

.aa-suggestion:hover,
.aa-suggestion.aa-cursor {
  background-color: #f4f4f4;
}

.aa-suggestion > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.aa-suggestion em {
  font-weight: bold;
  font-style: normal;
}

.aa-suggestion img {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  object-fit: cover;
}
.ais-SearchBox-input {
  width: 100%;
  height: 40px;
  padding: 8px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
}


/* Algolia search bar */
.ais-SearchBox-submit {
  border: none;
  padding: 0;
  cursor: pointer;
  background-color: #fff;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.5;
  color: #39c;
  border-radius: 4px;
  padding: 8px 16px;
}


.ais-SearchBox-submitIcon {
  width: 16px;
  height: 16px;
  fill: #39c;
  margin-right: 4px;
}


.ais-SearchBox-submit:focus {
  outline: none;
}

/* Algolia search bar */
.ais-SearchBox-reset {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}

.ais-SearchBox-resetIcon {
  width: 10px;
  height: 10px;
  fill: #999;
}

.ais-SearchBox-reset:hover .ais-SearchBox-resetIcon {
  fill: #555;
}

.ais-SearchBox-reset:focus {
  outline: none;
}
.ais-SearchBox-resetIcon {
  width: 16px;
  height: 16px;
  fill: #39c;
}

/** quiz **/
.quiz-answer {
    display: none;
    border: 1px solid #ddd;
    padding: 5px;
    margin-top: 10px;
    background-color: #f9f9f9;
    margin-bottom: 20px;
}

.quiz-btn {
    display: inline-block;
    padding: 10px 15px;
    border: none;
    background-color: #007BFF;
    color: #fff;
    cursor: pointer;
}