html {
    font-size: 18px;
}

strong {
  color: #CB0089;
}

em {
  color: #871E1E;
}

/* highlight */
mark {
  background-color: #ffee703a;
  color: #000;
  border-radius: 4px;
  padding: 0.1em 0.3em;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
  margin: 0 0.1em;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

body {
  background-color: #e9f4d45c;
  color: #000000;
  margin: 0;
  padding: 0;
}

img {
    max-width: 90%;
    max-height: 95vh;
    border: 1px solid #9c5b7b !important;
    padding: 0 !important;
    margin: 0 auto;
}



div.container {
    max-width: 100%;
    margin: 0px 30px;
}



.propic {
  border-radius: 50%;
  border: 2px solid #9c5b7b !important;
  padding: 0 !important;
  max-width: 200px;
  margin: 0;
  transition: border-color 0.3s ease;
}

.social-links {
  display: flex;
  gap: 20px;
  align-items: center;
  margin-top: 20px;
}

.social-icon {
  transition: transform 0.2s ease, color 0.3s ease;
}

.social-icon:hover {
  transform: scale(1.1);
}

.social-icon.github { color: #000000; }
.social-icon.twitter { color: #000000; }
.social-icon.bluesky { color: #1DA1F2; }
.social-icon.mastodon { color: #6364FF; }
.social-icon.email { color: #8B5CF6; }


.custom-mark {
  background-color: var(--bg-val) !important;
  color: #000 !important;
  border-radius: 4px;
  padding: 0.1em 0.3em;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
  margin: 0 0.1em;
  border: 1px solid rgba(0, 0, 0, 0.05);
}



pre,
pre[class*="language-"],
code[class*="language-"], div.highlight {
    background-color: #120129 !important;
    color: #d4d4d4 !important;
    border-radius: 10px;
    margin: 0 auto;
    max-width: 100%;
    overflow-x: auto;
    box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 1.2em;
    font-weight: 600;
}

h1 {
    color: #7D48B1;
    padding-bottom: 0.3em;
    margin-top: 1.5rem;
    font-size: 1.8rem;
}




h2 {
    color: #15317F;
    font-size: 1.4rem;
}

h3 {
    color: #3B4D7F;
    font-size: 1.3rem;
}

h4 {
    color: #214ECC;
    font-size: 1.2rem;
}

h5 {
    color: #2962FF;
    font-size: 1.1rem;
}

h6 {
    color: #769AFF;
    font-size: 1rem;
}


.floating-theme-toggle {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background-color: #7D48B1;
  color: white;
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  transition: all 0.3s ease;
}

.floating-theme-toggle:hover {
  transform: scale(1.1);
  background-color: #982ba0;
}

.sun-icon { display: none; }
.moon-icon { display: block; }


.custom-def-box { background-color: var(--def-bg); border: 1px solid var(--def-border); border-radius: 6px; padding: 1.2rem; margin: 1.5rem 0; }
.custom-def-title { color: var(--def-title); font-weight: bold; display: flex; align-items: center; gap: 10px; margin-bottom: 1rem; font-size: 1.1rem; }
.custom-def-body { line-height: 1.6; }
.custom-def-body em { color: #b5826b !important; font-style: italic; }


.collapsable-code { 
    display: block;
    width: fit-content; 
    max-width: 100%; 
    border: 1px solid #6c5d77; 
    border-radius: 4px; 
    padding: 0.5rem; 
    overflow-x: auto;
    box-sizing: border-box;
}
.collapsable-code summary { cursor: pointer; padding: 5px; list-style: none; }
.collapsable-code__title { color: #982ba0; font-weight: bold; }
.collapsable-code__inner { display: block; margin-top: 10px; }


@media (max-width: 768px) {
  .post-image img{
    max-width: 100% !important;
    width: 100% !important;
  }
}



@media (max-width: 768px) {
    html {
        font-size: 16px;
    }
    
    div.container {
        margin: 20px 10px;
    }
    
    .custom-def-box {
        padding: 0.8rem;
        margin: 1rem 0;
    }

    pre, pre[class*="language-"], code[class*="language-"], div.highlight  {
      font-size: 0.85rem;
    }

    .posts, 
    .posts h1.post-title {
      padding-top: 20px !important;
    }
}