/*
  This css file is for individual users to restyle items for their personal site,
  or for the implementation of features specifically for their site. Anything that
  is an official part of the theme (ex. Pull Requests) should be included in main.css
  and follow the formatting and style given.
*/

/* About page: make subsection titles softer and closer to body text styling. */
.post .about-content h3 {
  color: inherit;
  font-family: inherit !important;
  font-size: 1em !important;
  font-style: italic;
  font-weight: 400;
  letter-spacing: normal !important;
  line-height: 1.75;
  margin: 1.5em 0 0.5em;
  text-transform: none !important;
}

@keyframes rotate {
  0% { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}

.bold-rotate {
  font-weight: bold;
  display: inline-block;
  animation: rotate 2s infinite;
}

.footer {
  position: fixed;
  left: 0;
  bottom: -1.125em;
  width: 25%;
  padding-left: 10px;
  font-family: source sans pro, Helvetica, sans-serif;
  font-size: .7em;
  letter-spacing: .25em;
  line-height: 2.5;
  text-transform: uppercase;
}

:root {
  --base-color: rgb(255, 255, 255);
  --base-variant: #ffffff;
  --text-color: black;
  --secondairy-text: #232738;
  --primary-color: #000000;
  --accent-color: #ffffff;
}

.darkmode {
  --base-color: #070b1d;
  --base-variant: #101425;
  --text-color: white;
  --secondairy-text: #a4a5b8;
  --primary-color: hsl(0, 0%, 100%);
  --accent-color: #0071ff;
}

.darkmode_button {
  margin: 0;
  border: 0;
  border-left: 1px solid #e8ebed;
}

.darkmode .darkmode_button {
  border-left-color: transparent;
}

.darkmode-search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 61px;
  height: 3.5em;
  padding: 0;
  margin-right: 0;
}

.darkmode-search-toggle i {
  line-height: 1;
  vertical-align: middle;
}

#theme-switch {
  height: 3.5em;
  width: 61px;
  padding: 0;
  border-radius: 0;
  background-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 0;
  color: red;
}

#theme-switch:hover {
  color: #2eb8ac;
}

#theme-switch svg {
  fill: var(--primary-color);
  display: none;
}

#theme-switch:hover svg {
  fill: #2eb8ac !important;
  filter: none !important;
}

.theme-pref-system #theme-switch svg:nth-child(1) {
  display: block;
  fill: #050505;
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.4));
}

.darkmode.theme-pref-system #theme-switch svg:nth-child(1) {
  fill: #ffffff;
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.6));
}

.theme-pref-light #theme-switch svg:nth-child(2) {
  display: block;
}

.theme-pref-dark #theme-switch svg:nth-child(3) {
  display: block;
}

.absolute-position {
  position: static;
  display: flex;
  align-items: center;
  height: 3.5em;
  position: relative;
  z-index: auto;
}

.theme-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 2px);
  background-color: var(--base-color);
  border: 1px solid #e8ebed;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  min-width: 190px;
  padding: 6px 0;
  display: none;
  z-index: 10001;
}

.theme-menu.active {
  display: block;
}

.theme-option {
  width: 100%;
  background: transparent;
  border: 0;
  color: var(--text-color);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-size: 0.78em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.theme-option:hover,
.theme-option.theme-option-active {
  background: rgba(46, 184, 172, 0.15);
  color: #2eb8ac;
}

.theme-option i {
  width: 1.1em;
  text-align: center;
}

body {
  background-color: var(--base-color);
  color: var(--text-color);
}

#site-header,
.post,
.mini-post,
.flyout-menu {
  background-color: var(--base-color);
  color: var(--text-color);
}

.text-color-darkmode,
.nav,
p.copyright {
  color: var(--text-color);
}

.share-btn {
  color: white;
}

.twitter {
  background-color: black;
}

.twitter:hover {
  background-color: #454545;
}

.twitter::before {
  font-family: "Font Awesome 6 Brands";
  content: "\e61b";
}

#telegram-btn,
#back-to-top {
  position: fixed;
  right: 20px;
  width: 50px;
  height: 50px;
  background-color: #000;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  z-index: 10000;
  border: 2px solid #fff;
  transition: all 0.3s ease;
  text-decoration: none;
  padding: 0;
}

#back-to-top {
  bottom: 20px;
  border-bottom: 2px solid #fff;
}

#telegram-btn {
  bottom: 140px;
}

#telegram-btn svg {
  fill: #fff;
  width: 28px;
  height: 28px;
}

#back-to-top::before {
  font-size: 24px;
}

#telegram-btn:hover,
#back-to-top:hover {
  background-color: #2eb8ac;
  color: #fff !important;
  border-color: #2eb8ac;
  transform: none !important;
}

#telegram-btn:hover svg {
  fill: #fff;
}

.darkmode #cursor,
.darkmode .logo-right {
  color: #ffffff !important;
}

.darkmode table {
  background-color: #101425;
  color: var(--text-color);
}

.darkmode table > thead {
  background-color: #1a1f35;
}

.darkmode table > tbody > tr > td:first-child {
  background-color: #1a1f35;
  color: var(--text-color);
}

#site-main .content a[id] {
  scroll-margin-top: 0.5rem;
}

#site-main .content a[id]:target::before {
  content: "";
  display: block;
  height: 0.5rem;
  margin-top: -0.5rem;
  visibility: hidden;
  pointer-events: none;
}

.darkmode table > tbody > tr:nth-child(even) {
  background-color: #0d1126;
}

.darkmode table > tbody > tr:hover {
  background-color: #1e2640;
}

.amazon-button {
  display: inline-block;
  width: 250px;
  background-color: white;
  color: black;
  padding: 10px 15px;
  border: 1px solid black;
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
  text-align: center;
  transition: background-color 0.2s, color 0.2s;
  margin-bottom: 10px;
}

.amazon-button:hover {
  background-color: black;
  color: white;
}

.social-links-title {
  text-align: left;
}

.back-to-top-hidden {
  display: none;
}

.cursor-pointer {
  cursor: pointer;
}

.lang-globe-image {
  height: 160px;
  padding: 15px 2px 11px 20px;
  border: none;
  box-shadow: none;
  background: transparent;
}

.term-count {
  float: right;
}

.gtm-noscript-frame {
  display: none;
  visibility: hidden;
}

.anchor-scroll-offset {
  scroll-margin-top: 80px;
}