/*use a special font for certain headings/buttons*/
.pinned summary {
  font-family: var(--font);
  font-weight: bold;
}

/*use a pointer for the fake buttons*/
details>summary,
#tag-filters label {
  cursor: url("../images/ferncursor_point.png;")
}

/*some parts of the layout can be hidden/shown depending on if you're on desktop or mobile*/
.mobile-only {
  display: none;
}

.pc-only {
  display: block;
}

/*this class makes stuff wrap around, very handy*/
.flex {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

main {
  background: 0;
  box-shadow: 0 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/*center the icon in the sidebar*/
#icon {
  margin: auto;
}

#icon img {
  /*this makes it a circle, lower the number for a rounded square*/
  border-radius: 50%;
  width: 150px;
}

/*these styles are for when your icon image is being used as a link, it just makes it react on mouseover*/
#icon a img {
  /*adds animation to the outline*/
  transition: .2s;
}

#icon a img:hover {
  outline: 2px solid var(--text-color);
  outline-offset: 4px;
}

/*profile text doesnt need as much spacing as the posts do*/
#profile p {
  margin-block: .3em;
  line-height: 1.5em;
}

/*styling the simple bio block*/
#bio {
  border-block: 2px solid var(--border-color);
  padding-block: .5em;
  margin-block: 1em;
  font-size: small;
}

/*for the collapsible sections at the top (status and tag filters)*/
.pinned {
  background: var(--content-background-color);
  font-size: smaller;
  padding: .5em;
  border-radius: 6px;
  margin: 1em 0;
  box-shadow: 0px 0px 15px 0px var(--content-background-color);
  backdrop-filter: blur(3px);
}

/*the heading for those blocks*/
.pinned summary {
  color: var(--text-color);
  font-size: 1.5em;
  font-weight: bold;
  border-bottom: 1px solid var(--border-color);
  margin: .5em;
}

/*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: small;
}

/*the list with the alternating colors! (cute!!!)*/
#status ul {
  background: var(--content-background-color);
  margin: .5em;
  padding: .5em;
  border-radius: 6px;
}

#status li {
  list-style-type: none;
  padding: .2em;
}

/*list title, ie "reading:"*/
#status li:nth-child(odd) {
  font-weight: bold;
  font-size: 1.2em;
  color: var(--text-color);
}

/*list answer, ie "books about magic"*/
#status li:nth-child(even) {
  background: var(--blockquote-bg);
  color: var(--text-color);
  border-radius: 4px;
  padding-inline: .8em;
}

/*make links the same as in posts*/
#status li a {
  color: var(--text-color);
}

#status li a:hover {
  text-decoration: none;
}

/*finally the post styles!!!*/
.post {
  background: var(--content-background-color);
  color: var(--text-color);
  border-radius: 6px;
  padding: 0 .8rem .2rem .8rem;
  margin-bottom: 1em;
  min-width: 100%;
  box-shadow: 0px 0px 15px 0px var(--content-background-color);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/*make sure images stay within the post*/
.post img {
  max-width: 100%;
}

/*add some space from the post header if you have an image first*/
.post div+img {
  margin-top: 1em;
}

/*the top of the post where you put your username*/
.post-header {
  color: var(--accent-color);
  font-weight: bold;
  padding: .5rem 0;
  border-bottom: 1px solid var(--border-color);
}

/*and the post's timestamp*/
.post time {
  float: right;
  font-weight: normal;
  font-size: smaller;
  margin: .2em;
}

/*link styling*/
.post a {
  color: var(--text-color);
}

.post a:hover {
  text-decoration: none;
}

/*"read more" button for long posts*/
.readmore {
  margin-bottom: 1em;
}

.readmore summary {
  font-weight: bold;
  color: var(--accent-color);
  /*this gets rid of the arrow*/
  list-style-type: none;
}

.tags {
  border-top: 1px dashed var(--border-color);
  padding: .4em 0;
}

.tags a {
  color: var(--border-color);
}

.tags span {
  color: var(--border-color);
}

.tags a,
.tags span {
  font-size: small;
  padding: .2em .5em;
  border-radius: 6px;
  text-decoration: none;
}

.tags a:hover {
  background: var(--button-bg);
  text-decoration: none;
}

/*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(#about:checked) article[class~="about"],
.tagged:has(#personal:checked) article[class~="personal"],
.tagged:has(#review:checked) article[class~="review"],
.tagged:has(#art:checked) article[class~="art"] {
  display: inline-block;
}

/*tag filter button styles (there's a lot)*/
#tag-filters label {
  background: var(--button-bg);
  border: 1px solid var(--accent-color);
  border-radius: 6px;
  display: inline-block;
  margin-left: .5em;
  margin-block: .3em;
  padding: 0 .8em 0 .1em;
}

/*hovering filter buttons (normal)*/
#tag-filters label:hover {
  background: var(--warntag);
  text-decoration: underline;
}

/*selected filters*/
#tag-filters label:has(input:checked) {
  background: var(--charatag);
  color: var(--post-text);
  text-decoration: underline;
  font-weight: bold;
}

/*hovering selected filters*/
#tag-filters label:has(input:checked):hover {
  background: var(--warntag);
  text-decoration: none;
}