-.highlight {
  background-color: #faf9f9;
  margin: 0;
}
.highlighter-rouge {
  color: #3e3e40;
  font-weight: 400;
  background: #eaeaea;
  border: 1px solid #eaeaea;
}
.highlight .hll {
  background-color: #ffc;
}
.highlight .c {
  color: #999;
}
.highlight .err {
  color: #a00;
  background-color: #faa;
}
.highlight .k {
  color: #069;
}
.highlight .o {
  color: #555;
}
.highlight .cm {
  color: #09f;
  font-style: italic;
}
.highlight .cp {
  color: #099;
}
.highlight .c1,
.highlight .cs {
  color: #999;
}
.highlight .gd {
  background-color: #fcc;
  border: 1px solid #c00;
}
.highlight .ge {
  font-style: italic;
}
.highlight .gr {
  color: red;
}
.highlight .gh {
  color: #030;
}
.highlight .gi {
  background-color: #cfc;
  border: 1px solid #0c0;
}
.highlight .go {
  color: #aaa;
}
.highlight .gp {
  color: #009;
}
.highlight .gu {
  color: #030;
}
.highlight .gt {
  color: #9c6;
}
.highlight .kc,
.highlight .kd,
.highlight .kn,
.highlight .kp,
.highlight .kr {
  color: #069;
}
.highlight .kt {
  color: #078;
}
.highlight .m {
  color: #f60;
}
.highlight .s {
  color: #d44950;
}
.highlight .na {
  color: #4f9fcf;
}
.highlight .nb {
  color: #366;
}
.highlight .nc {
  color: #0a8;
}
.highlight .no {
  color: #360;
}
.highlight .nd {
  color: #99f;
}
.highlight .ni {
  color: #999;
}
.highlight .ne {
  color: #c00;
}
.highlight .nf {
  color: #c0f;
}
.highlight .nl {
  color: #99f;
}
.highlight .nn {
  color: #0cf;
}
.highlight .nt {
  color: #2f6f9f;
}
.highlight .nv {
  color: #033;
}
.highlight .ow {
  color: #000;
}
.highlight .w {
  color: #bbb;
}
.highlight .mf,
.highlight .mh,
.highlight .mi,
.highlight .mo {
  color: #f60;
}
.highlight .sb,
.highlight .sc {
  color: #c30;
}
.highlight .sd {
  color: #c30;
  font-style: italic;
}
.highlight .s2,
.highlight .se,
.highlight .sh {
  color: #c30;
}
.highlight .si {
  color: #a00;
}
.highlight .sx {
  color: #c30;
}
.highlight .sr {
  color: #3aa;
}
.highlight .s1 {
  color: #c30;
}
.highlight .ss {
  color: #fc3;
}
.highlight .bp {
  color: #366;
}
.highlight .vc,
.highlight .vg,
.highlight .vi {
  color: #033;
}
.highlight .il {
  color: #f60;
}
.css .nt + .nt,
.css .o,
.css .o + .nt {
  color: #999;
}

/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */

html{
  -ms-text-size-adjust:100%;
  -webkit-text-size-adjust:100%;
  line-height:1.5
}

body{
  font-family:'PT Sans',sans-serif;
  color:#3e3e40;
  margin:0;
  background-color:#fff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale; 
  font-size: 18px
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section{
  display:block
}

figcaption{
  font-size:0.8em;
}

h1{
  font-size:2em;
  margin:.67em 0
}

figure{
  margin:1em 40px
}

hr{
  box-sizing:content-box;
  height:0;
  overflow:visible
}

code,
kbd,
pre,
samp{
  font-family:monospace,monospace;
  font-size:1em
}

code{
  color: black; 
  font-size: smaller
}

a{
  background-color:transparent;
  -webkit-text-decoration-skip:objects;
  color:#573259;  
}

a:hover {
  color: #4a538a; /* Change to the color you want */
}

abbr[title]{
  border-bottom:none;
  text-decoration:underline dotted
}

b,
strong{
  font-weight:bolder
}

dfn{
  font-style:italic
}

mark{
  background-color:#ff0;
  color:#000
}

small{
  font-size:80%
}

sub,
sup{
  font-size:75%;
  line-height:0;
  position:relative;
  vertical-align:baseline
}

sub{
  bottom:-.25em
}

sup{
  top:-.5em
}

table {
  border-collapse: collapse; /* Collapse borders into a single border */
  width: 100%; /* Full width of the container */
}

th, td {
  border: 1px solid #311e3e;
  padding: 8px;
  font-size: 18px;
  text-align: left;
}

th {
  background-color: #f2f2f2; /* Light gray background for headers */
}

table th:first-child {
  width: 25%; /* Adjust this value to make the first column wider */
}


.half-table {
    width: 50%;
    padding: 20px;
    box-sizing: border-box;
}

.container-table {
    display: flex;
    flex-direction: row;
}


audio,
canvas,
video{
  display:inline-block
}

audio:not([controls]){
  display:none;
  height:0
}

img{
  border-style:none;
  height:auto;
  max-width:100%;
  border: 3px solid #573259; 
  border-radius: 3px;
}

svg:not(:root){
  overflow:hidden
}

button,
input,
optgroup,
select,
textarea{
  font-family:sans-serif;
  font-size:100%;
  line-height:1.15;
  margin:0
}

button,
input{
  overflow:visible
}

button,
select{
  text-transform:none
}

[type=reset],
[type=submit],
button,
html[type=button]{
  -webkit-appearance:button
}

[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner{
  border-style:none;
  padding:0
}

[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring,
button:-moz-focusring{
  outline:1px dotted ButtonText
}

fieldset{
  padding:.35em .75em .625em
}

legend{
  color:inherit;
  display:table;
  max-width:100%;
  white-space:normal
}

progress{
  display:inline-block;
  vertical-align:baseline
}

textarea{
  overflow:auto
}

[type=checkbox],
[type=radio],
legend{
  box-sizing:border-box;
  padding:0
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button{
  height:auto
}

[type=search]{
  -webkit-appearance:textfield;
  outline-offset:-2px
}

[type=search]::-webkit-search-cancel-button,
[type=search]::-webkit-search-decoration{
  -webkit-appearance:none
}

::-webkit-file-upload-button{
  -webkit-appearance:button;
  font:inherit
}

summary{
  display:list-item
}

[hidden],
template{
  display:none
}

*,
::after,
::before{
  box-sizing:border-box
}

h1,
h2,
h3,
h4,
h5,
h6{
  font-family:'Playfair Display',serif;
  font-weight:700;
  color:#311e3e
}

.btn-secondary{
  background-color:#8d8699;
  border-color:#8d8699
}

.btn-secondary:hover{
  background-color:#a7a2b0;
  border-color:#a7a2b0
}

.btn-primary{
  background:#5918b7;
  border-color:#5918b7
}

.btn-primary:hover{
  background:#6f20e2;
  border-color:#6f20e2
}

blockquote{
  border-left:3px solid #311e3e;
  padding-left:18px;
  margin-left:21px;
  font-style:italic;
  color:#311e3e
}

pre{
  padding:16px 32px;
  overflow-x:auto
}

pre code{border:0;padding-right:0;padding-left:0}

.flex-container{display:flex;flex-direction:column;min-height:100vh;transition:transform .4s cubic-bezier(.16,.68,.43,.99)}

.flex-container.active{transform:translate3d(300px,0,0)}

.flex-container.active::after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:2;background-color:rgba(0,0,0,.5)}

.content{flex-grow:1}

.wrapper{
  width:950px;
  max-width:95%;
  margin:0 auto;
  position:relative
}

::-moz-selection{background:rgba(49,30,62,.7);color:#fff}

::selection{background:rgba(49,30,62,.7);color:#fff}

.clearfix::after,
.clearfix::before{content:"";display:table}

.clearfix::after{clear:both}

.clearfix::before{clear:both}

.main-header{font-family:'Montserrat',sans-serif;padding:15px 0;background-color:#fff;box-shadow:0 -5px 15px rgba(0,0,0,.3)}

.main-header .header-flex{display:flex;justify-content:space-between;align-items:center}

.main-header .center-header-container{width:50%;text-align:center;margin:0}

.main-header .center-header-container .logo{color:#311e3e;text-decoration:none}

.main-header .center-header-container .logo:hover{text-decoration:none}

.main-header .center-header-container .logo .author-name,.main-nav ul li a{text-transform:uppercase;font-size:27px;font-weight:300}

.main-nav{position:fixed;top:0;left:0;z-index:10;width:300px;height:100%;background-color:#fff;padding:25px 30px;transform:translate3d(-300px,0,0)}

.main-nav ul{padding:15px 0 0;margin:0;list-style:none}

.main-nav ul li{border-bottom:1px solid #eaeaea}

.main-nav ul li a{display:block;padding:15px 0;text-decoration:none;font-weight:400;font-size:16px;color:#311e3e}

.main-nav ul li a:hover{opacity:.8;color:#7200ff}

.left-header-container,.right-header-container{width:25%}

.left-header-container a,.right-header-container a{text-decoration:none;color:#311e3e;transition:all 350ms cubic-bezier(.13,.43,.54,1.82);box-shadow:0 0 0 0 transparent}

.left-header-container a:hover,.right-header-container a:hover{box-shadow:0 2px 0 0 #311e3e}

.left-header-container{text-align:left}

.right-header-container{text-align:right}

.menu-icon,.menu-icon-close,.search-icon a,.search-icon-close{cursor:pointer;font-size:18px;color:#311e3e;transition:all .4s}

.menu-icon-close:hover,.menu-icon:hover,.search-icon a:hover,.search-icon-close:hover{opacity:.8}

.post-card-box{margin:100px 0;padding:0}

.post-card-box li{position:relative;list-style:none;float:left;width:50%;transition:all .3s}

.post-card-box li:hover{opacity:.9}

.blog-tags{margin:20px auto}

.blog-tags .btn{font-family:Montserrat,sans-serif}

.blog-tags .btn:focus{box-shadow:none}

.card{border:0;box-shadow:0 0 20px 0 rgba(0,0,0,.1)}

.card .card-title{font-size:26px;margin-bottom:12px}

.card .card-title a{color:#311e3e}

.card .card-body{font-size:14px}

.card .card-img-top{position:relative}

.card .card-img-top:hover .play-button-icon{font-size:40px}

.card .play-button-icon{transition:all 350ms cubic-bezier(.13,.43,.54,1.82);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:35px;color:#fff}

.card .play-button-icon .youtube-logo{color:#fc0d1b}

.post-grid .grid-item{margin-bottom:20px}

.main-footer{padding:15px 0;background-color:#efefef}

.main-footer .copyright{text-align:center;color:#311e3e;font-size:16px}

.page-image{position:relative;padding:0;margin:0;height:500px;background-color:#fff;overflow:hidden}

.page-image .cover-image{height:100%;width:100%}

.page-content{
  margin-top:-80px;
  margin-bottom:60px;
  background-color:#ffffff;
  padding:70px;
  box-shadow:0 0 20px 0 rgba(0,0,0,.1)
}

.header-page,.page-content .captioned-image,.page-content .highlighter-rouge,.page-content video{margin-bottom:30px}

.header-page{position:relative}

.header-page h1{font-size:36px;margin:0 0 20px;color:#311e3e}

.header-page .page-date{text-align:center;font-size:14px;text-transform:uppercase;font-weight:300}

.header-page .page-links,.header-page h1{text-align:center}

.header-page .page-links a{font-size:14px;font-weight:300;margin-top:1em}

.page-footer{margin-top:30px;padding-bottom:30px;border-bottom:1px solid #eaeaea}

.page-share{text-transform:uppercase;font-size:12px;color:#311e3e;text-align:center;padding:5px;margin-top:5px}

.page-share a{text-decoration:none;color:#8d8699;margin-left:5px;margin-right:5px;font-size:18px}

.page-share a:hover{color:#7200ff;transform:scale(1.1)}.recent-box{margin-top:30px}

.recent-box .recent-title{color:#311e3e;text-align:center;margin:0 0 30px}

.recent-box .recent-list .recent-item{position:relative;display:inline-block;width:23.9%;height:150px;margin-left:.5%;margin-bottom:.5%;transition:all .3s;background-size:cover!important;box-shadow:0 500px rgba(0,0,0,.4) inset}

.recent-box .recent-list .recent-item span{position:absolute;font-size:12px;left:2.5%;bottom:10%;color:#fff}

.recent-box .recent-list .recent-item:hover{opacity:.8}

.iframe-wrapper{position:relative;padding-bottom:56.25%;padding-top:25px;height:0;margin-bottom:1em}

.iframe-wrapper iframe,.iframe-wrapper video{position:absolute;top:0;left:0;width:100%;height:100%}

.author-box{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-top:30px;
  padding-bottom:30px;
  border-bottom:1px solid #eaeaea
}

.author-box .author-left{
  margin-right:30px
}

.author-box .author-left li a{padding:0}

.author-box .author-img{
  min-width:200px;
  height:200px;
  border-radius:100%
}

.author-box .author-right h2,.author-box .author-right p{
  margin:0 0 10px
}

.author-box .contact-links{
  margin-top:15px
}

.small-wrapper{width:700px;max-width:90%;margin:0 auto}

.about-container{margin:3em auto 0;position:relative;text-align:justify;padding-bottom:30px;width:600px}

.about-container p{color:#311e3e;font-weight:300}

.about-header:after{content:"";display:block;height:1px;width:80px;background-color:#311e3e;margin:2em auto}

.about-header .author-image-container{
  width:200px;
  height:200px;
  border-radius:100%;
  overflow:hidden;
  margin:0 auto 30px;
  box-sizing: border-box; 
}

.about-header .author-image-container img {
    height: 100%; /* Use 100% to fill the container height */
    width: 100%; /* Use 100% to fill the container width */
    border-radius:100%
}



.contact-links{
  margin:0;
  padding:0;
  list-style:none;
  text-align:center
}

.contact-links li{
  display:inline-block;
  margin-left:10px
}

.contact-links li:first-child{
  margin-left:0
}

.contact-links li a{
  display:block;
  color:#8d8699;
  font-size:22px;
  text-decoration:none;
  padding:5px;
  transition:all 350ms cubic-bezier(.13,.43,.54,1.82)
}

.contact-links li a:hover{
  color:#7200ff;
  transform:scale(1.1)
}

.captioned-image{text-align:center;padding:20px;margin:20px;border:1px solid #eaeaea;display:inline-block}

.animate .about-container,
.animate .main-header,
.animate .page-content,
.animate .page-image,
.animate .post-card-box,
.animate .projects-content{
  animation-duration:.7s;
  animation-fill-mode:both;
  animation-name:fadeInDown
}

.animate .main-header,.animate .page-image{animation-delay:.5s}

.animate .about-container,.animate .page-content,.animate .post-card-box,.animate .projects-content{animation-delay:.75s}

@-webkit-keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}

@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}



@media only screen and (max-width:768px){.main-header .logo a{font-size:24px}
                                         .page-content{margin-top:-50px;padding:30px}
                                         .post-card-box li{width:100%;margin-bottom:20px}
                                         .post-card-box li:last-child{margin-bottom:0}
                                         .recent-box .recent-list .recent-item{position:relative;display:inline-block;width:48.9%;height:150px;margin-left:.5%;margin-bottom:.5%}
                                         .recent-box .recent-list .recent-item span{position:absolute;font-size:12px;left:2.5%;bottom:10%;color:#fff}
                                         .about-container{width:400px}
                                         .container-table {display: block;}
                                         .half-table {width: 100%;}
                                        }
@media only screen and (max-width:480px){.blog-tags .btn{padding:.25rem .5rem;font-size:.875rem;line-height:1.5;border-radius:.2rem}
                                         .about-container{width:100%}
                                         .wrapper{max-width:95%}
                                         .page-content{margin-top:-50px;padding:15px}
                                         .header-page{margin-bottom:20px}
                                         .header-page h1{font-size:27px;margin:0 0 10px}
                                         .header-page .page-date{font-size:14px}
                                         .main-header .logo a{font-size:21px}
                                         .menu-icon,.menu-icon-close,.search-icon,.search-icon-close{font-size:16px}
                                         .page-image{height:380px}
                                         .recent-box .recent-list .recent-item{position:relative;display:inline-block;width:99%;height:150px;margin-left:.5%;margin-bottom:.5%}
                                         .recent-box .recent-list .recent-item span{position:absolute;font-size:12px;left:2.5%;bottom:10%;color:#fff}
                                         .author-box{display:flex;flex-direction:column;align-items:center;text-align:center}
                                         .author-box .author-left,.author-box .author-right h2{margin:0 0 10px}
                                         .author-box .author-img{height:100px;min-width:100px}
                                         .author-box .author-right p{margin:0 0 15px}
                                         .container-table {display: block;}
                                         .half-table {width: 100%;}
                                        }