@font-face {
    
    font-family: Comfortaa;
    src: url('Fonts/Comfortaa-VariableFont_wght.ttf') format('truetype');
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;}

/* Basics */
body {
background: #bdd0df; 
color: #33165e;
font-size: 20px;
display: flex;
min-height: 100vh;
letter-spacing:1px;
background: url(Images/BG.png);
background-size:cover;
background-attachment:fixed;
background-repeat: no-repeat;
     font-family: Comfortaa;
    }
  
textarea {background:#222;color:#999;letter-spacing:1px;font-size:10px;}

#icon {
    aspect-ratio: cos(30deg);
    max-width: 300px;
    max-height: 300px;
    clip-path: polygon(-50% 50%,50% 100%,150% 50%,50% 0);
  /*adds animation to the outline*/}

#bio{
    text-align: center;
    color: #f0c9ff;
     margin-top: 15px;
     margin-bottom: 15px;
    
}
   
#title{
    color: #f0c9ff;
    font-size: 36px;
}



/* Links */
a:link,a:visited,a:active { color: #d97ef7; text-decoration: none; }
a:hover { color: #f0c9ff; text-decoration: underline;
}  

/*-------------------------------------- Sidebar ----------------------------------*/
.sidebar {
position: sticky;
top: 0;
height: 100vh;
width: 25%;
background: url(Images/Chatting%20BG%203%20low%20contrast.png);
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
flex-shrink: 0;
overflow-y: auto;  
    overflow-x: auto;
    
}

::-webkit-scrollbar-thumb {
background-color: #33165e; 
border:1px solid #eee;
border-radius: 3px;
 display: none}

::-webkit-scrollbar { 
width: 7px; 
height: 0px; 
background: transparent;
  display: none}


.sidebar h2 {
font-size: 16px;
color: #f0c9ff;
margin-bottom: 10px;
text-shadow: 2px 2px 4px black;
  font-family: Comfortaa;}

.sidebar a {
    margin: 10px 0;}


nav {
    text-align: center;
    line-height: 40px;
    display:inline-block;'
    color: #f0c9ff; 
    list-style: none;
    
    
}

.sidebar nav ul{
    list-style: none;   
}
  
.sidebar nav li a {
  /*set a width so they're the same size*/
  min-width: 120px;
  display: inline-block;
  background:#f0c9ff;
  color: var(--sidebar-button-text);
  font-weight: bold;
  border-radius: 1rem;
  outline: 2px solid #fff0;
  transition: .2s;
  text-decoration: none;
}

.sidebar nav li a:hover {
  background: #fcedff;
  color: #33165e;
  outline: 2px #fcedff);
  outline-offset: 3px;
}

/*---------------------------------------- Main Content ---------------------------------------*/
.content {
flex: 1;
    padding: 50px 20px 20px 50px; }

.site-name {
font-size: 22px;
color: #33165e;
margin-bottom: 10px;
text-shadow: 3px 3px 6px black;
text-align:center;
  font-family: Comfortaa;}
    
.slogan {text-align:center;font-style:italic;color:#33165e;}

.post {
    background: url(Images/Chatting%20BG%20Low%20contrast.png); 
    background-size:cover;
    border: 10px solid #33165e;
    border-radius: 30px;
    padding: 20px;
    margin-bottom: 30px;
    box-shadow: 0 0 10px #33165e;
    max-width: 95%;
    width: 100%;}

.post h3 {
    margin-bottom: 10px;
    color: #33165e;
    letter-spacing:2px;
    font-family: Comfortaa;}

/* This makes layout responsive ! */
@media (max-width: 768px) {
body {
flex-direction: column;}

.sidebar {
position: relative;
height: auto;
width: 100%;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;}
      

.sidebar h2 {
width: 100%;
text-align: center;
margin-bottom:5px;}

.content {
padding: 15px;
padding-top:50px;}

.site-name {
font-size: 22px;
text-align: center;}
}

#credit {
    margin-top: 30px;
    font-size: 14px;
    text-align: center;
    color: #f0c9ff;
}

/* Flex stuff pasted in */

.flex-box {
    display:flex;
    flex-wrap:wrap;
    margin: -1em;
	align-items: flex-start;
    margin-bottom: 10px;
    margin-right: 25px;
}

.flex-box section {
	margin: .5em;
    background: url(Images/Chatting%20BG%20Low%20contrast.png); 
    background-size:cover;
    border: 10px solid #33165e;
    border-radius: 30px;
    padding: 20px;
    box-shadow: 0 0 10px #33165e;
    
    }

.full { flex: 1 1 100%;}
.half { flex: 1 1 calc(50% - 2em); }
.third { flex: 1 1 calc(33% - 2em); }
.twothird { flex: 1 1 calc(66% - 2em); }
.quarter { flex: 1 1 calc(25% - 2em); }
.threequarter { flex: 1 1 calc(75% - 2em); }

/* ------------------------------ Blog Stuff ------------------------------ */


/*
.blog {
    padding: 20px;
    margin-bottom: 30px;
    margin-top: 30px;
    box-shadow: 0 0 10px #33165e;
    max-width: 95%;
    width: 100%;  
    
}

.blogpost{
    
}*/

.center-text{
    text-align: center
}

.archive-link{
    text-align: center;
}

.post-header {
  color: #33165e;
  font-weight: bolder;
  padding: .25rem 0;
  border-bottom: 5px solid #33165e;
    margin-bottom: 10px;
}


/*and the post's timestamp*/
.post time {
  float: right;
  font-size: 20px;
    font-weight: normal;
    color: #33165e;
}

.tags {
  border-top: 5px solid #33165e;
  margin-top: 10px;
  padding: .4em 0;
}
.tags a {color: #33165e;}
.tags span {color: #33165e;}
.tags a,
.tags span {
  font-size: 16px;
  padding: .2em .5em;
  border-radius: 1em;
  text-decoration: none;
}
.tags a:hover {
  background:#d97ef7;
  text-decoration: underline;
}

.blog-pic{
    
    max-width: 500px;
}

.welcome-pic{   
    max-width: 300px;
}

/*---------------------------------------------------------------------*/


 /*for the collapsible sections at the top (status and tag filters)*/
.pinned { 
  font-size: smaller;
  padding: .5em;
  margin: 1em 0;;
    
}
/*the heading for those blocks*/
.pinned summary {
  font-size: 1.5em;
  font-weight: bold;
  border-bottom: 2px solid #33165e;
    margin: .5em;}

.post-list {
     padding-left: 50px;   
        
    }
   


}
/*since the summary uses the special font, switch back to the other one for the timestamp*/
.pinned time {
  float: right;
  font-weight: normal;
  font-size: 15px;
      color: #33165e;
}

/*the list with the alternating colors! (cute!!!)*/
#status ul {
  margin:.5em;
  padding:.5em;
  border-radius: .5em;
}
#status li {
  list-style-type: none;
  padding: .2em;
}
/*list title, ie "reading:"*/
#status li:nth-child(odd) {
  font-weight: bold;
  font-size: 1.2em;
}
/*list answer, ie "books about magic"*/
#status li:nth-child(even) {
  background: #fff;
  border-radius: .3em;
  padding-inline: .8em;
    color: #33165e;
}
    
/*make links the same as in posts*/
#status li a {color: var(--pinned-text);}
#status li a:hover {text-decoration: underline;}

details {
    font-family:inherit;
    
}

/*css for hiding posts*/
.tagged:has(input:checked) article {display: none;}

/*add new tags to filter here!
 * follow the class naming conventions (no spaces, don't start it with a number)
 * remember on the actual page you can write the tag however you want!*/

.tagged:has(#all:checked) article,
.tagged:has(#intro:checked) article[class~="intro"],
.tagged:has(#personal:checked) article[class~="personal"],
.tagged:has(#secret:checked) article[class~="secret"],
.tagged:has(#art:checked) article[class~="art"],
.tagged:has(#Cookie-Run:checked) article[class~="Cookie-Run"],
.tagged:has(#Winx:checked) article[class~="Winx"],
.tagged:has(#CG:checked) article[class~="CG"],
.tagged:has(#Crafts:checked) article[class~="Crafts"],


.tagged:has(#XXVII:checked) article[class~="XXVII"],
.tagged:has(#XXVI:checked) article[class~="XXVI"]


{display: inline-block;}

/*tag filter button styles (there's a lot)*/
#tag-filters label {
  background:#f0c9ff;
  border: 1px solid #33165e;
  border-radius: .5em;
  display: inline-block;
  margin-left: .5em;
  margin-block: .75em;
  padding: .25em;
    color: #33165e;
}

/*hovering filter buttons (normal)*/
#tag-filters label:hover {
  background:#fdf9ff;
  text-decoration: underline;
}
/*selected filters*/
#tag-filters label:has(input:checked) {
  background: #d97ef7;
  color: #33165e;
  text-decoration: underline;
  font-weight: bold;
}
/*hovering selected filters*/
#tag-filters label:has(input:checked):hover {
  background: #fdf9ff;
  text-decoration: none;
}
/*hide the radio button for tags*/
#tag-filters input {appearance: none;}

/*for the "back to top" link at the bottom of the page*/
.page-nav a {color:var(--sidebar-text-a);}
.page-nav a:hover {text-decoration: none;}

/*--------------------Right button Thingmajig CSS---------------------------------------------------------------*/

/* Layout Wrapper */
.collapsible-container {
  display:block;
  align-items: center;
  max-height: 100vh;
    overflow-y: auto;
    position: fixed;
    right: 0;
    top:0;
}


/* Hide the native checkbox completely */
.toggle-checkbox {
  display: none;
}

/* The Clickable Button/Label */
.toggle-label {
  background-color: #d97ef7;
  color: white;
  padding: 10px 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s ease;
  user-select: none;

}

/* Collapsible Content Area */
.collapsible-content {
  max-width: 0;                /* Starts fully collapsed */
  overflow: hidden;            /* Hides overflow while expanding */
  background: url(Images/Chatting_BG.png);
  transition: max-width 0.4s ease; /* Powers the smooth slide effect */
    
    
}

/* Inner wrapper with fixed width prevents text wrapping awkwardly during transition */
.inner-content {
  width: 375px;
  padding: 5px;
  box-sizing: border-box;
    
}

/* --- Toggle Interactivity Rules --- */

/* 1. Expand the content to the right when checkbox is checked */
.toggle-checkbox:checked ~ .collapsible-content {
  max-width: 400px; /* Must be larger than or equal to the inner-content width */
}

/* 2. Optional: Rotate the arrow icon when opened */
.toggle-checkbox:checked ~ .toggle-label {
  transform:scaleX(350px);
}



/*----------------------------------------------------------------------------------------------------------*/


.archive-post{
    max-width: 66%;
margin: auto;
}

.archive-post ul{
padding-left: 40px;    
    
}



/*--------------------------------EX-GALLERY CSS-----------------------------------------*/