@import url('https://fonts.googleapis.com/css?family=Catamaran:400,500,600,700&subset=latin-ext');
:root {
    --bg-color: #fafafa;
    --bg-hover-color: #ececec;
    --body-bg: #fff;
    --primary-font-color: #000;
    --border-color: #dadada;
}

[data-theme="dark"] {
  --bg-color: #161f29;
  --bg-hover-color:#36404c;
  --body-bg: #10171e;
  --primary-font-color: #bfbfbf;
  --border-color: #6a6a6a;
}

body{
  font-family: 'Catamaran', sans-serif;
  font-weight: 300;
  background: var(--body-bg);
  color: var(--primary-font-color);
  margin: 0;
  padding: 5px;
}
.container{
  display: flex; 
  flex-direction: row; 
  flex-wrap: wrap; 
  justify-content: space-between; 
  width: 60%;
  margin-left: auto; 
  margin-right: auto;
}
.post-container{
  display: flex; 
  flex-direction: row; 
  flex-wrap: wrap; 
  justify-content: space-between; 
  width: 100%;
}

.footer{
  display: flex; 
  flex-direction: row; 
  flex-wrap: wrap; 
  justify-content: center;
  width: 100%;
  padding: 5px 10px;
  background: var(--bg-color);
  border:1px dashed var(--border-color);
  font-size: 12px;
}

.post-list{
  width: 100%; 
  display: flex; 
  flex-direction: row; 
  flex-wrap: wrap; 
  justify-content: space-between; 
  align-items: center;
  padding: 5px 10px;
  margin-bottom: 5px;
  background:var(--bg-color);
  border: 1px dashed var(--border-color);
}

.post-list:hover{
  background: var(--bg-hover-color);
}

.post-list .post-title{width: 80%; color: var(--primary-font-color); font-weight: 600;}
.post-list .post-date{width: 20%; text-align: right;}

.post-header{
  width: 100%; 
  display: flex; 
  flex-direction: row; 
  flex-wrap: wrap; 
  justify-content: space-between; 
  align-items: center;
  padding: 5px 10px;
  margin-bottom: 5px;
  background:var(--bg-color);
  border:1px dashed var(--border-color);
}

.post-header .post-share{font-weight: 600; color: var(--primary-font-color); display: flex; justify-content: flex-end; align-items: center;}
.post-header .post-date{font-weight: 600;}
.post-header .post-share a{display: flex;}

.tags-container{
  width: 100%; 
  display: flex; 
  flex-direction: row; 
  flex-wrap: wrap; 
  align-items: center;
  margin-top: 20px;
  margin-bottom: 20px;
}

.post-tag{margin-bottom: 5px;}

.tags{display: flex; flex-wrap: wrap; justify-content: space-between;}
.tag{background: var(--bg-color); padding: 5px 10px; margin-right: 10px; margin-bottom: 10px; display: flex; align-items: center;}

.navigation{
  width: 100%; 
  display: flex; 
  flex-direction: row; 
  flex-wrap: nowrap; 
  justify-content: space-between; 
  align-items: center;
  margin-bottom: 5px;
  background:var(--bg-color);
  border:1px dashed var(--border-color);

}
.navigation .prev{width: 45%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--primary-font-color); font-weight: 600; padding: 5px 10px;}
.navigation .next{width: 45%; color: var(--primary-font-color); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; text-align: right; padding: 5px 10px;}

.pagination{
  width: 100%; 
  display: flex; 
  flex-direction: row; 
  flex-wrap: wrap; 
  justify-content: space-between; 
  align-items: center;
  padding: 5px 10px;
  margin-bottom: 5px;
  background:var(--bg-color);
}
.pagination .prev{color: var(--primary-font-color); font-weight: 600;}
.pagination .next{color: var(--primary-font-color); font-weight: 600; text-align: right;}

.blog-post-content{
  width: 100%;
  font-size: 18px;
}

.post-tag{background: var(--bg-color); color:var(--primary-font-color); padding: 5px 10px;}

.profile{
  width: 100%; 
  display: flex; 
  flex-direction: row; 
  flex-wrap: wrap; 
  justify-content: space-between; 
  align-items: center;
  padding: 5px 10px;
  margin-bottom: 20px;
}
.profile-image-container{width: 40%;}
.profile-image{width: 128px; height: 128px; border-radius: 50%; transition: transform .2s;}
.profile-image:hover{transform: scale(1.05);}
.profile-about{width:60%; text-align: right;}

.font-2{font-size: 2rem;}
.font-1-5{font-size: 1.5rem;}
.font-1-2{font-size: 1.2rem;}
.font-0-8{font-size: .8rem;}

.text-right{text-align: right;}
.w-100{width: 100%!important;}

a:hover{text-decoration: none;}
a{color: var(--primary-font-color); text-decoration: none;}
img{max-width: 100%;}
figure{margin:0; padding: 15px;}
pre{font-size: 14px; max-width: 90vw; overflow: auto;}
.social-icon{height: 24px;}

@media (min-width: 1200px){
  .container, .container-lg, .container-md, .container-sm, .container-xl {
    max-width: 800px;
  }
}

@media (min-width: 1440px){
  .container, .container-lg, .container-md, .container-sm, .container-xl {
    max-width: 960px;
  }
}
@media only screen and (max-width: 768px) {
  .container{width: 100%;}
  .mode:after {
    line-height: 22px;
    left: 1px;
  }
  h1{font-size: 1.5rem;}
  .profile-image{width: 96px; height: 96px;}
}

[data-theme="dark"] .social-icon{filter: invert(100%) sepia(50%) saturate(0%) hue-rotate(360deg) brightness(100%) contrast(100%);}
.mode {float: right;position: relative;margin: auto;width: 42px;height: 22px;background: #F1F2F4;border-radius: 20px;cursor: pointer;}
.mode:after {content: "☀️";position: absolute;top: 0;left: 4px;font-size: 14px;height: 22px;line-height: 23px;text-align: center;transition: all 0.3s ease;}
.mode.active {background: #0771ca;}
.mode.active:after {content: "🌛";transform: translateX(20px);}
.mode.active span {transform: translateX(0);}
.mode span {position: absolute;z-index: 1;margin: 2px;display: block;width: 18px;height: 18px;background: white;border-radius: 50%;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);transform: translateX(20px);transition: all 0.4s ease;}