@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Ubuntu+Condensed&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Saira+Semi+Condensed:wght@100;200;300;400;500;600;700;800;900&display=swap");
@layer reset {
  *, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
  }
  *:not(dialog), *:before:not(dialog), *:after:not(dialog) {
    margin: 0;
    padding: 0;
  }
}
:root {
  /* White Smoke */
  --white-smoke: hsla(0, 0%, 98%, 1); /* #fafafa */
  --white-smoke-10: hsla(0, 0%, 98%, 0.1); /* #fafafa1A */
  --white-smoke-20: hsla(0, 0%, 98%, 0.2); /* #fafafa33 */
  --white-smoke-30: hsla(0, 0%, 98%, 0.3); /* #fafafa4D */
  --white-smoke-40: hsla(0, 0%, 98%, 0.4); /* #fafafa66 */
  --white-smoke-50: hsla(0, 0%, 98%, 0.5); /* #fafafa80 */
  --white-smoke-60: hsla(0, 0%, 98%, 0.6); /* #fafafa99 */
  --white-smoke-70: hsla(0, 0%, 98%, 0.7); /* #fafafaB3 */
  --white-smoke-80: hsla(0, 0%, 98%, 0.8); /* #fafafaCC */
  --white-smoke-90: hsla(0, 0%, 98%, 0.9); /* #fafafaE6 */
  /* Ghost White */
  --ghost-white: hsla(240, 100%, 99%, 1); /* #f8f8ff */
  --ghost-white-10: hsla(240, 100%, 99%, 0.1); /* #f8f8ff1A */
  --ghost-white-20: hsla(240, 100%, 99%, 0.2); /* #f8f8ff33 */
  --ghost-white-30: hsla(240, 100%, 99%, 0.3); /* #f8f8ff4D */
  --ghost-white-40: hsla(240, 100%, 99%, 0.4); /* #f8f8ff66 */
  --ghost-white-50: hsla(240, 100%, 99%, 0.5); /* #f8f8ff80 */
  --ghost-white-60: hsla(240, 100%, 99%, 0.6); /* #f8f8ff99 */
  --ghost-white-70: hsla(240, 100%, 99%, 0.7); /* #f8f8ffB3 */
  --ghost-white-80: hsla(240, 100%, 99%, 0.8); /* #f8f8ffCC */
  --ghost-white-90: hsla(240, 100%, 99%, 0.9); /* #f8f8ffE6 */
  /* Eerie Black */
  --eerie-black: hsla(0, 0%, 11%, 1); /* #1c1c1c */
  --eerie-black-10: hsla(0, 0%, 11%, 0.1); /* #1c1c1c1A */
  --eerie-black-20: hsla(0, 0%, 11%, 0.2); /* #1c1c1c33 */
  --eerie-black-30: hsla(0, 0%, 11%, 0.3); /* #1c1c1c4D */
  --eerie-black-40: hsla(0, 0%, 11%, 0.4); /* #1c1c1c66 */
  --eerie-black-50: hsla(0, 0%, 11%, 0.5); /* #1c1c1c80 */
  --eerie-black-60: hsla(0, 0%, 11%, 0.6); /* #1c1c1c99 */
  --eerie-black-70: hsla(0, 0%, 11%, 0.7); /* #1c1c1cB3 */
  --eerie-black-80: hsla(0, 0%, 11%, 0.8); /* #1c1c1cCC */
  --eerie-black-90: hsla(0, 0%, 11%, 0.9); /* #1c1c1cE6 */
  /* Dark Charcoal */
  --dark-charcoal: hsla(0, 0%, 20%, 1); /* #333333 */
  --dark-charcoal-10: hsla(0, 0%, 20%, 0.1); /* #3333331A */
  --dark-charcoal-20: hsla(0, 0%, 20%, 0.2); /* #33333333 */
  --dark-charcoal-30: hsla(0, 0%, 20%, 0.3); /* #3333334D */
  --dark-charcoal-40: hsla(0, 0%, 20%, 0.4); /* #33333366 */
  --dark-charcoal-50: hsla(0, 0%, 20%, 0.5); /* #33333380 */
  --dark-charcoal-60: hsla(0, 0%, 20%, 0.6); /* #33333399 */
  --dark-charcoal-70: hsla(0, 0%, 20%, 0.7); /* #333333B3 */
  --dark-charcoal-80: hsla(0, 0%, 20%, 0.8); /* #333333CC */
  --dark-charcoal-90: hsla(0, 0%, 20%, 0.9); /* #333333E6 */
  /* Deep Purple */
  --deep-purple: hsla(270, 96%, 21%, 1); /* #360269 */
  --deep-purple-10: hsla(270, 96%, 21%, 0.1); /* #3602691A */
  --deep-purple-20: hsla(270, 96%, 21%, 0.2); /* #36026933 */
  --deep-purple-30: hsla(270, 96%, 21%, 0.3); /* #3602694D */
  --deep-purple-40: hsla(270, 96%, 21%, 0.4); /* #36026966 */
  --deep-purple-50: hsla(270, 96%, 21%, 0.5); /* #36026980 */
  --deep-purple-60: hsla(270, 96%, 21%, 0.6); /* #36026999 */
  --deep-purple-70: hsla(270, 96%, 21%, 0.7); /* #360269B3 */
  --deep-purple-80: hsla(270, 96%, 21%, 0.8); /* #360269CC */
  --deep-purple-90: hsla(270, 96%, 21%, 0.9); /* #360269E6 */
  /* Blue Violet */
  --blue-violet: hsla(270, 65%, 31%, 1); /* #4F1C82 */
  --blue-violet-10: hsla(270, 65%, 31%, 0.1); /* #4F1C821A */
  --blue-violet-20: hsla(270, 65%, 31%, 0.2); /* #4F1C8233 */
  --blue-violet-30: hsla(270, 65%, 31%, 0.3); /* #4F1C824D */
  --blue-violet-40: hsla(270, 65%, 31%, 0.4); /* #4F1C8266 */
  --blue-violet-50: hsla(270, 65%, 31%, 0.5); /* #4F1C8280 */
  --blue-violet-60: hsla(270, 65%, 31%, 0.6); /* #4F1C8299 */
  --blue-violet-70: hsla(270, 65%, 31%, 0.7); /* #4F1C82B3 */
  --blue-violet-80: hsla(270, 65%, 31%, 0.8); /* #4F1C82CC */
  --blue-violet-90: hsla(270, 65%, 31%, 0.9); /* #4F1C82E6 */
  /* Rebecca Purple */
  --rebecca-purple: hsla(270, 50%, 40%, 1); /* #663399 */
  --rebecca-purple-10: hsla(270, 50%, 40%, 0.1); /* #6633991A */
  --rebecca-purple-20: hsla(270, 50%, 40%, 0.2); /* #66339933 */
  --rebecca-purple-30: hsla(270, 50%, 40%, 0.3); /* #6633994D */
  --rebecca-purple-40: hsla(270, 50%, 40%, 0.4); /* #66339966 */
  --rebecca-purple-50: hsla(270, 50%, 40%, 0.5); /* #66339980 */
  --rebecca-purple-60: hsla(270, 50%, 40%, 0.6); /* #66339999 */
  --rebecca-purple-70: hsla(270, 50%, 40%, 0.7); /* #663399B3 */
  --rebecca-purple-80: hsla(270, 50%, 40%, 0.8); /* #663399CC */
  --rebecca-purple-90: hsla(270, 50%, 40%, 0.9); /* #663399E6 */
  /* Orchid */
  --orchid: hsla(313, 70%, 66%, 1); /* #E56DCC */
  --orchid-10: hsla(313, 70%, 66%, 0.1); /* #E56DCC1A */
  --orchid-20: hsla(313, 70%, 66%, 0.2); /* #E56DCC33 */
  --orchid-30: hsla(313, 70%, 66%, 0.3); /* #E56DCC4D */
  --orchid-40: hsla(313, 70%, 66%, 0.4); /* #E56DCC66 */
  --orchid-50: hsla(313, 70%, 66%, 0.5); /* #E56DCC80 */
  --orchid-60: hsla(313, 70%, 66%, 0.6); /* #E56DCC99 */
  --orchid-70: hsla(313, 70%, 66%, 0.7); /* #E56DCCB3 */
  --orchid-80: hsla(313, 70%, 66%, 0.8); /* #E56DCCCC */
  --orchid-90: hsla(313, 70%, 66%, 0.9); /* #E56DCCE6 */
  /* Raspberry Pink */
  --raspberry-pink: hsla(317, 69%, 59%, 1); /* #DF4FB6 */
  --raspberry-pink-10: hsla(317, 69%, 59%, 0.1); /* #DF4FB61A */
  --raspberry-pink-20: hsla(317, 69%, 59%, 0.2); /* #DF4FB633 */
  --raspberry-pink-30: hsla(317, 69%, 59%, 0.3); /* #DF4FB64D */
  --raspberry-pink-40: hsla(317, 69%, 59%, 0.4); /* #DF4FB666 */
  --raspberry-pink-50: hsla(317, 69%, 59%, 0.5); /* #DF4FB680 */
  --raspberry-pink-60: hsla(317, 69%, 59%, 0.6); /* #DF4FB699 */
  --raspberry-pink-70: hsla(317, 69%, 59%, 0.7); /* #DF4FB6B3 */
  --raspberry-pink-80: hsla(317, 69%, 59%, 0.8); /* #DF4FB6CC */
  --raspberry-pink-90: hsla(317, 69%, 59%, 0.9); /* #DF4FB6E6 */
  /* Medium Violet Red */
  --medium-violet-red: hsla(322, 82%, 42%, 1); /* #C51383 */
  --medium-violet-red-10: hsla(322, 82%, 42%, 0.1); /* #C513831A */
  --medium-violet-red-20: hsla(322, 82%, 42%, 0.2); /* #C5138333 */
  --medium-violet-red-30: hsla(322, 82%, 42%, 0.3); /* #C513834D */
  --medium-violet-red-40: hsla(322, 82%, 42%, 0.4); /* #C5138366 */
  --medium-violet-red-50: hsla(322, 82%, 42%, 0.5); /* #C5138380 */
  --medium-violet-red-60: hsla(322, 82%, 42%, 0.6); /* #C5138399 */
  --medium-violet-red-70: hsla(322, 82%, 42%, 0.7); /* #C51383B3 */
  --medium-violet-red-80: hsla(322, 82%, 42%, 0.8); /* #C51383CC */
  --medium-violet-red-90: hsla(322, 82%, 42%, 0.9); /* #C51383E6 */
  /* Lavender */
  --lavender: hsla(240, 67%, 94%, 1); /* #e6e6fa */
  --lavender-10: hsla(240, 67%, 94%, 0.1); /* #e6e6fa1A */
  --lavender-20: hsla(240, 67%, 94%, 0.2); /* #e6e6fa33 */
  --lavender-30: hsla(240, 67%, 94%, 0.3); /* #e6e6fa4D */
  --lavender-40: hsla(240, 67%, 94%, 0.4); /* #e6e6fa66 */
  --lavender-50: hsla(240, 67%, 94%, 0.5); /* #e6e6fa80 */
  --lavender-60: hsla(240, 67%, 94%, 0.6); /* #e6e6fa99 */
  --lavender-70: hsla(240, 67%, 94%, 0.7); /* #e6e6faB3 */
  --lavender-80: hsla(240, 67%, 94%, 0.8); /* #e6e6faCC */
  --lavender-90: hsla(240, 67%, 94%, 0.9); /* #e6e6faE6 */
  --extreme-green: hsla(125, 100%, 35%, 1);
  --power-blue: hsla(218, 48%, 32%, 1);
  --guardsman-red: hsla(0, 100%, 36%, 1);
}

:root {
  --body-font-family: "Work Sans", sans-serif;
  --selection-background-color: var(--deep-purple);
  --selection-text-color: var(--body-text-color);
  --brand-color: var(--deep-purple); /* #360269 */
}

/* Light and dark themes and their variables. */
:root {
  color-scheme: light dark;
  --body-background-color: light-dark(var(--white-smoke), var(--eerie-black)); /* #fafafa, #1c1c1c */
  --body-text-color: light-dark(var(--eerie-black), var(--white-smoke)); /* #1c1c1c, #fafafa */
}

[data-theme=light] {
  --body-background-color: var(--white-smoke); /* #fafafa */
  --body-text-color: var(--eerie-black); /* #1c1c1c */
}

[data-theme=dark] {
  --body-background-color: var(--eerie-black); /* #1c1c1c */
  --body-text-color: var(--white-smoke); /* #fafafa */
}

.animated-text-background {
  background: -webkit-linear-gradient(45deg, var(--deep-purple), var(--blue-violet), var(--rebecca-purple), var(--orchid));
  animation: gradient 15s ease infinite;
  background-size: 400% 400%;
}

.loading-border {
  position: relative;
  z-index: 0;
  overflow: hidden;
  border-radius: var(--animation-border-radius, 5px);
}
.loading-border::before {
  content: "";
  position: absolute;
  z-index: -2;
  left: -50%;
  top: -50%;
  width: 200%;
  height: 200%;
  border-radius: var(--animation-border-radius, 5px);
  background-repeat: no-repeat;
  background-size: 50% 50%, 50% 50%;
  background-position: 0 0, 100% 0, 100% 100%, 0 100%;
  background-image: linear-gradient(var(--deep-purple), var(--deep-purple)), linear-gradient(var(--blue-violet), var(--blue-violet)), linear-gradient(var(--rebecca-purple), var(--rebecca-purple)), linear-gradient(var(--orchid), var(--orchid));
  animation: rotate 4s linear infinite;
}
.loading-border::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 6px;
  top: 6px;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  background: var(--body-background-color);
  border-radius: var(--animation-border-radius, 5px);
}

@keyframes rotate {
  100% {
    transform: rotate(1turn);
  }
}
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@media not (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: auto;
  }
}
/* Scrollbar and text selection styles. */
*::-webkit-scrollbar {
  height: 7px;
  width: 7px;
}

/* ::-webkit-scrollbar-button {
    width: 100px;
    height: 100px;
} */
::-webkit-scrollbar-track {
  border-radius: 0px;
  background-color: unset;
}

::-webkit-scrollbar-track:hover {
  background-color: unset;
}

::-webkit-scrollbar-track:active {
  background-color: unset;
}

::-webkit-scrollbar-thumb {
  border-radius: 20px;
  background-color: #500FA5;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #500FA5;
}

::-webkit-scrollbar-thumb:active {
  background-color: #500FA5;
}

::-webkit-scrollbar-corner {
  background-color: green;
}

::selection {
  background: var(--selection-background-color);
  color: var(--selection-text-color);
}

::-moz-selection {
  background: var(--selection-background-color);
  color: var(--selection-text-color);
}

::target-text {
  background-color: var(--selection-background-color);
  color: var(--selection-text-color);
}

/* Interactive elements */
:root {
  --dialog-backdrop-color: var(--body-background-color);
}

dialog, dialog[open], dialog::backdrop {
  border: unset;
  background: unset;
}

dialog::backdrop {
  background-color: var(--dialog-backdrop-color);
  opacity: 0.9;
}

dialog div {
  width: 100%;
}

dialog.auth-dialog {
  width: clamp(400px, 50%, 600px);
}

dialog.auth-dialog div:not(:last-child) {
  margin-bottom: 1rem;
}

dialog.auth-dialog div.dialog-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}
dialog.auth-dialog div.dialog-header h1, dialog.auth-dialog div.dialog-header h2, dialog.auth-dialog div.dialog-header h3, dialog.auth-dialog div.dialog-header h4, dialog.auth-dialog div.dialog-header h5, dialog.auth-dialog div.dialog-header h6 {
  margin: unset;
}
dialog.auth-dialog div.dialog-header a.dialog-close, dialog.auth-dialog div.dialog-header button {
  cursor: pointer;
  color: var(--body-text-color);
  font-size: 1.5rem;
  background: unset;
  border: unset;
  padding: unset;
  outline: unset;
}

@media (max-width: 480px) {
  dialog[open] {
    width: 100%;
    height: 100%;
    border-radius: 0;
  }
  dialog[open]#auth {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}
summary, summary::-webkit-details-marker, details {
  all: unset;
}

summary {
  cursor: pointer;
  padding: 1rem 0;
}

*[popover] {
  border: unset;
  background: unset;
}

/* Forms and related stuff */
:root {
  /* 🎨 RENK PALETİ */
  --form-bg: #ffffff;
  --form-text: #333333;
  --form-border: #ced4da;
  --form-placeholder: #6c757d;
  --primary-color: #0d6efd;
  --primary-hover: #0b5ed7;
  --primary-text: #ffffff;
  /* 🎯 ODAKLANMA (FOCUS) */
  --focus-ring-color: rgba(13, 110, 253, 0.25);
  --focus-border: #86b7fe;
  --focus-ring-width: 0.25rem;
  --transition-speed: 0.15s;
  /* 📏 ÖLÇÜLER */
  --form-padding-y: 1rem;
  --form-padding-x: 1rem;
  --form-margin-bottom: 1rem;
  --form-border-radius: .5rem;
  --form-font-size: 1rem;
  --border-width-normal: 1px;
  --border-width-outline: 2px;
  /* ☑️ CHECKBOX & RADIO */
  --check-size: 1.25rem;
  --check-margin-right: 0.5rem;
  /* ✨ YENİ NESİL SELECT PICKER */
  --picker-bg: #ffffff;
  --picker-border: #ced4da;
  --picker-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  --picker-padding: 0.5rem;
}

/* =========================================
   1. TEMEL GİRİŞ ALANLARI
   ========================================= */
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=reset]),
textarea,
select {
  display: block;
  width: 100%;
  padding: var(--form-padding-y) var(--form-padding-x);
  margin-bottom: var(--form-margin-bottom);
  font-size: var(--form-font-size);
  font-family: inherit;
  color: var(--form-text);
  background-color: var(--form-bg);
  border: var(--border-width-normal) solid var(--form-border);
  border-radius: var(--form-border-radius);
  transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
  box-sizing: border-box;
}

input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=reset]):focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--focus-border);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
}

input::placeholder,
textarea::placeholder {
  color: var(--form-placeholder);
  opacity: 1;
}

textarea {
  min-height: 100px;
  resize: vertical;
}

/* =========================================
   2. YENİ NESİL SELECT & PICKER
   ========================================= */
select,
::picker(select) {
  appearance: base-select;
}

::picker(select) {
  background-color: var(--picker-bg);
  border: var(--border-width-normal) solid var(--picker-border);
  border-radius: var(--form-border-radius);
  padding: var(--picker-padding);
  box-shadow: var(--picker-shadow);
}

/* =========================================
   3. OUTLINE (ŞEFFAF) GİRİŞ ALANLARI
   ========================================= */
[data-outline=true]:not(button):not([type=submit]):not([type=button]) {
  background-color: transparent;
  border-width: var(--border-width-outline);
}

[data-outline=true]:not(button):not([type=submit]):not([type=button]):focus {
  border-color: var(--primary-color);
  box-shadow: none;
}

/* =========================================
   4. ONAY KUTUSU (CHECKBOX) & RADYO
   ========================================= */
input[type=checkbox],
input[type=radio] {
  appearance: none;
  -webkit-appearance: none;
  width: var(--check-size);
  height: var(--check-size);
  margin: 0 var(--check-margin-right) var(--form-margin-bottom) 0;
  background-color: var(--form-bg);
  border: var(--border-width-normal) solid var(--form-border);
  cursor: pointer;
  transition: all var(--transition-speed);
  display: inline-grid;
  place-content: center;
  vertical-align: middle;
}

input[type=checkbox]:focus,
input[type=radio]:focus {
  border-color: var(--focus-border);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
}

input[type=checkbox]:checked,
input[type=radio]:checked {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

/* Checkbox Tik İşareti */
input[type=checkbox] {
  border-radius: calc(var(--form-border-radius) / 2);
}

input[type=checkbox]:checked::before {
  content: "";
  width: 0.65em;
  height: 0.65em;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  background-color: var(--primary-text);
}

/* Radyo Buton Nokta İşareti */
input[type=radio] {
  border-radius: 50%;
}

input[type=radio]:checked::before {
  content: "";
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background-color: var(--primary-text);
}

/* =========================================
   5. BUTONLAR
   ========================================= */
button,
input[type=submit],
input[type=button] {
  display: inline-block;
  padding: var(--form-padding-y) var(--form-padding-x);
  font-size: var(--form-font-size);
  font-family: inherit;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  border-radius: var(--form-border-radius);
  transition: all var(--transition-speed);
  box-sizing: border-box;
  /* Normal Buton Varsayılanı */
  color: var(--primary-text);
  background-color: var(--primary-color);
  border: var(--border-width-normal) solid var(--primary-color);
}

button:hover,
input[type=submit]:hover,
input[type=button]:hover {
  background-color: var(--primary-hover);
  border-color: var(--primary-hover);
}

button:focus,
input[type=submit]:focus,
input[type=button]:focus {
  outline: none;
  box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
}

/* Outline Buton Stili */
button[data-outline=true],
input[type=submit][data-outline=true],
input[type=button][data-outline=true] {
  color: var(--primary-color);
  background-color: transparent;
  border-width: var(--border-width-outline);
}

button[data-outline=true]:hover,
input[type=submit][data-outline=true]:hover,
input[type=button][data-outline=true]:hover {
  color: var(--primary-text);
  background-color: var(--primary-color);
}

div#result {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 5px;
  border: solid 2px;
}

div#result:empty {
  display: none;
}

div#result.error {
  background-color: var(--guardsman-red);
  color: var(--lavander);
}

div#result.success {
  background-color: var(--extreme-green);
}

div#result.info {
  background-color: var(--power-blue);
}

nav.top-navbar {
  inset: 0 0 auto 0;
}
nav.top-navbar a {
  color: var(--text-color);
  text-decoration: none;
  font-weight: 500;
  padding: 1rem 2rem;
  display: inline-block;
}
nav.top-navbar a:hover {
  background-color: hsl(0, 0%, 17%);
  color: var(--hover-text-color);
}

:root {
  --sidebar-width: 220px;
  --sidebar-background-color: hsl(0, 0%, 15%);
}

nav.side-navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-width);
  height: 100%;
  background-color: var(--sidebar-background-color);
  padding-top: 1rem;
  padding-bottom: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 1000;
}
nav.side-navbar a.menu-item {
  display: block;
  padding: 0.5rem 1rem;
  color: var(--text-color);
  text-decoration: none;
}
nav.side-navbar a.menu-item:hover {
  background-color: hsl(0, 0%, 17%);
  color: var(--hover-text-color);
}
nav.side-navbar div.bottom div.sidebar-profile {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 1rem;
}
nav.side-navbar div.bottom div.sidebar-profile img {
  width: 3rem;
  height: 3rem;
  margin-right: 1rem;
}
nav.side-navbar div.bottom div.sidebar-profile div.sidebar-profile__right-row {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 3rem;
  flex-grow: 1;
}
nav.side-navbar div.bottom div.sidebar-profile div.sidebar-profile__right-row h2 {
  font-size: 1.2rem;
  color: var(--text-color);
  margin: 0;
  font-weight: 500;
}

div.main-container {
  max-width: 1200px;
  margin-left: calc(var(--sidebar-width) + 2rem);
  margin-right: 2rem;
  padding: 2rem;
  background-color: var(--background-color);
  color: var(--text-color);
}

@media (max-width: 768px) {
  nav.side-navbar {
    top: auto;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: fit-content;
    margin: 0;
    flex-direction: row;
    padding: 0;
    border-top: 2px solid red;
    border-bottom: none;
  }
  div.top {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  a.menu-item {
    padding: 0;
    height: 100%;
    font-size: 1.1rem;
  }
  div.main-container {
    margin-left: 0;
    margin-right: 0;
    padding: 1rem;
    width: 100%;
  }
}
@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slideOutLeft {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(-100%);
    opacity: 0;
  }
}
@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slideOutRight {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}
nav.side-navbar.slide-in-left {
  animation: slideInLeft 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

nav.side-navbar.slide-out-left {
  animation: slideOutLeft 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

nav.side-navbar.slide-in-right {
  animation: slideInRight 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

nav.side-navbar.slide-out-right {
  animation: slideOutRight 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Status Form */
div.status-form div.input-div:not(:last-child) {
  margin-bottom: 1rem;
}
div.status-form div.input-div.submit-button {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  column-gap: 1rem;
}
div.status-form div.input-div.submit-button span.character-counter {
  font-size: 0.95rem;
  color: var(--body-text-color);
}

/* Mobile First */
article.post {
  display: flex;
  flex-direction: column;
  font-family: "Saira Semi Condensed", sans-serif;
  font-weight: 400;
  font-style: normal;
  width: 100%;
}
article.post a:is(:link, :visited, :hover, :active) {
  cursor: pointer;
  text-decoration: none;
  color: var(--text-color);
}
article.post a.post-hashtag, article.post a.post-mention {
  color: var(--brand-color);
  text-decoration: underline;
}
article.post:not(:last-of-type) {
  margin-bottom: 1rem;
}
article.post header.post-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  border-radius: 5px 5px 0px 0px;
  background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), var(--post-cover-url, none);
  background-repeat: no-repeat;
  background-position-x: 50%;
  background-position-y: 75%;
  background-size: cover;
  padding: 1rem;
}
article.post header.post-header img.avatar {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border-radius: 5px;
}
article.post header.post-header div.meta {
  min-width: 0;
  height: 100%;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: space-between;
}
article.post header.post-header div.meta a.avatar-link {
  margin-right: 20px;
}
article.post header.post-header div.meta div.author-meta {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
article.post header.post-header div.meta div.author-meta div.post-meta {
  display: flex;
  flex-direction: column;
}
article.post header.post-header div.meta div.author-meta a.author-display-name {
  text-decoration: none;
  width: fit-content;
  color: white;
}
article.post header.post-header div.meta div.author-meta h3.author-display-name {
  overflow-wrap: anywhere;
  font-size: 1.5rem;
  font-weight: bold;
  margin: 0px;
  width: fit-content;
  text-shadow: -1px -1px 20px rgba(0, 0, 0, 0.77);
}
article.post header.post-header div.meta div.author-meta a.author-handle {
  overflow-wrap: anywhere;
  text-decoration: underline;
  color: #FFF;
  width: fit-content;
  text-shadow: -1px -1px 20px rgba(0, 0, 0, 0.77);
}
article.post header.post-header div.meta div.post-meta a.post-created-at {
  overflow-wrap: anywhere;
  text-decoration: none;
  color: #FFF;
  width: fit-content;
  text-shadow: -1px -1px 20px rgba(0, 0, 0, 0.77);
}
article.post header.post-header div.meta div.post-meta a.post-location-name {
  overflow-wrap: anywhere;
  text-decoration: none;
  color: #FFF;
  width: fit-content;
  text-shadow: -1px -1px 20px rgba(0, 0, 0, 0.77);
}
article.post div.post-body {
  overflow-wrap: anywhere;
  font-size: 1rem;
  background-color: #FFF;
  color: var(--body-background-color);
  padding: 1rem;
  border-radius: 0px 0px 5px 5px;
  white-space: normal;
}
article.post div.post-body span.post-tab {
  display: inline-block;
  width: 2em;
}
article.post div.post-body.post-error {
  color: #c62828;
  text-align: center;
  border-radius: 5px;
}
article.post div.post-body h2 {
  margin: 0;
}

div.container.is-expanded {
  place-content: start;
  padding-block-start: var(--initial-post-top, 0px);
}

div.container.user-posts-container {
  inline-size: 100%;
  margin-inline: 0;
  padding-inline: 0;
  place-content: start;
}

div.top-right {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
  padding: 1rem;
}

button#load-posts,
button#pausePostRefresh {
  width: 100%;
  margin-top: 1rem;
}

div#posts-status {
  color: #c62828;
  padding: 1rem;
  text-align: center;
}

dialog#new-post {
  border: none;
  padding: 1rem;
  background: none;
  width: min(800px, 100% - 2rem);
  max-width: calc(100% - 2rem);
  font-family: "Saira Semi Condensed", sans-serif;
  font-weight: 400;
  font-style: normal;
}
dialog#new-post div.dialog-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 1.5rem;
}
dialog#new-post div.dialog-header h3 {
  margin: 0;
  color: #FFF;
  text-shadow: -1px -1px 20px rgba(0, 0, 0, 0.77);
}
dialog#new-post div.dialog-header button {
  all: unset;
  color: #FFF;
  text-shadow: -1px -1px 20px rgba(0, 0, 0, 0.77);
  size: 1rem;
  cursor: pointer;
}
dialog#new-post div:not(:last-child) {
  margin-bottom: 1rem;
}

dialog#new-post::backdrop {
  background-color: rgba(0, 0, 0, 0.8);
}

div.hidden-on-desktop {
  display: none;
}

@media (min-width: 768px) {
  div.container.user-posts-container {
    inline-size: min(800px, 100% - 2rem);
    margin-inline: auto;
    place-content: center;
  }
  div.top-right {
    position: fixed;
    top: 2rem;
    right: 2rem;
    padding: 0;
  }
  article.post header.post-header {
    padding: 1rem;
  }
  article.post header.post-header img.avatar {
    width: 100px;
    height: 100px;
  }
  article.post header.post-header div.meta div.author-meta h3.author-display-name {
    font-size: 2.5rem;
  }
  article.post header.post-header div.meta div.author-meta a.author-handle {
    font-size: 1.25rem;
  }
  article.post div.post-body {
    font-size: 1.2rem;
  }
}
body {
  background-color: var(--body-background-color);
  font-family: var(--body-font-family);
}
body div.container {
  margin: 0 auto;
}

pre {
  margin-bottom: 1rem;
  padding: 1rem;
  border: dashed 1px var(--body-text-color);
  border-radius: 5px;
}

a:is(:link, :visited, :hover, :active) {
  cursor: pointer;
  text-decoration: none;
  color: var(--body-text-color);
}

footer {
  position: fixed;
  inset: auto 0 0 0;
  padding: 1rem;
}

div.form-container {
  min-width: 40dvw;
}

table.xdebug-error {
  color: #000;
}

/*# sourceMappingURL=style.css.map */