/* @import url('https://fonts.googleapis.com/css?family=Catamaran:400,500,600,700&subset=latin-ext'); */

:root {
    --bg-color: #f8f8f8;
    --bg-hover-color: #ececec;
    --body-bg: #f8f8f8;
    --primary-font-color: #7a7a7a;
    --border-color: #f3f3f3;
    --h1-color: #1e1e1e;
    --profile-border-color: #eeeeee;
}

[data-theme="dark"] {
  --bg-color: #1f1e22;
  --bg-hover-color:#36404c;
  --body-bg: #1f1e22;
  --primary-font-color: #7a7a7a;
  --border-color: #373737;
  --h1-color: #fff;
  --profile-border-color: #223539;
}

body{
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  font-weight: 300;
  background: var(--body-bg);
  color: var(--primary-font-color);
  margin: 0;
  padding: 5px;
  line-height: 1.5;
}

h1 {
    color: var(--h1-color)
}
.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; 
  justify-content: flex-start; 
  align-items: center;
  padding: 5px 10px;
  margin-bottom: 5px;
  border-bottom: 1px solid var(--border-color);
}

.post-list a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 5px 10px;
  width: 100%;
  color: var(--primary-font-color);
  text-decoration: none;
  gap: 10px; /* Add space between children */
}


.post-icon {
  font-family: 'Material Icons';
  font-size: 24px;
  color: #7a7a7a;
  margin-right: 10px;
  line-height: 1;
  display: flex;
  align-items: center;
}

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

.post-title {
  color: var(--primary-font-color);
  flex: 1;
}

.post-date {
  white-space: nowrap;
  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 solid 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; border: 1px solid var(--profile-border-color);}
.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;}