@font-face {
    font-family: "Lovelt";
    src: url("../fonts/Lovelt__.ttf");
}

a {
  color: #FF9FFF;
  font-family: "Lovelt";
  font-size: 0.75rem;
}

body {
  background: #000000;
  background-image: url("img/eyetile.png");
  font-family: "Times New Roman";
  color: #FFFFFF;
  line-height:1;
  font-size: 1rem;
  cursor: url("/media/cursor.png"), auto;
}

h1, h2, h3 {
    font-family: "Lovelt";
    font-weight: 400;
}

.corner-img {
  position: fixed;
  right:0;
  bottom:0;
  pointer-events:none;
}

/* Top Bar - this is the very top bit */
.nav__upper {
  background-color: #000000;
}

.nav__upper__content {
    display: flex;
    font-family: "Lovelt";
    font-size: 0.75rem;
    font-weight: 400;
    padding: 0.1rem 0;
}

/* Main Banner - this is the banner-y bit */
.nav__main {
    background-color: #000000;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.25);
    color: #000000; /* idk what this actually is */
}

.nav__main__content {
    font-family: "Lovelt";
    align-items: center;
    display: flex;
    padding: 0.1rem 0;
    gap: 1.5rem;
}

.nav__title {
  color: #FFFFFF;
  font-size: 1.0rem;
  font-weight: 400;
}

.nav__title:hover {
  color: #FFFFFF;
  text-decoration: none;
}

.nav__link {
  color: #FFFFFF;
  font-weight: 400;
}

/* Shoutbox */
.shoutbox__shouts {
  border-bottom: 1px solid #FF9FFF;
  display: flex;
  flex-direction: column;
  height: 12rem;
  overflow-y: auto;
}

.shoutbox__shout {
  align-items: center;
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  white-space: wrap;
}

.shoutbox__shout:hover {
    background-color: #5B375B;
}

/* boxes */
.pw-card {
  border-radius:.25rem;
  box-shadow:0 .25rem .5rem 0 #FF9FFF;
  background-color:#000000;
  border:1px solid #FF9FFF;
  overflow:hidden;
  min-width:16rem;
  padding: 0.275rem 0rem;
}

.pw-card-header {
  background-color:#000000;
  border-bottom:1px solid #FF9FFF;
  font-size:1rem;
  font-weight:400;
  padding:0.25rem;
  font-family: "Lovelt";
  color: #FF9FFF;
}

.pw-input {
  border-radius:.25rem;
  transition:all .15s ease;
  border:1px solid #FFFFFF;
  outline:none;
  padding:.1rem 1rem;
  color: #FFFFFF;
  font-size: 0.75rem;
}

.pw-input::placeholder {
  color: #5B375B;
  font-family: "Times New Roman";
}

.pw-table thead tr th {
  background-color: var(--oc-gray-1);
  border-bottom: 1px solid var(--oc-gray-4);
  color: #FF9FFF;
  font-size: 0.75rem;
  font-weight: 400;
  padding: 0.2rem 1rem;
  text-align: left;
  font-family: "Lovelt";
}

.pw-table tbody tr td {
  padding: 0.5rem 0.5rem 0rem;
}

table {
  font-size:0.75rem
}

.pw-breadcrumb {
  background-color:#000000;
  border:1px solid #FF9FFF;  
  display:flex;
  flex-wrap:wrap;
  list-style:none;
  margin:0 0 1rem 0;
  padding:.25rem .6rem;
  box-shadow:0 0.5rem 1rem 0.1rem #FF9FFF80;
}

.pw-breadcrumb-item {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:24rem;
  align-items: center;
  display: flex;
}

.pw-breadcrumb-item .pw-breadcrumb-label {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.pw-breadcrumb-item a {
  color:#FF9FFF;
  font-size: 0.75rem;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.pw-breadcrumb-item.active {
  color:#FFFFFF;
  font-family: "Lovelt";
  font-size: 0.75rem;
  align-items: center;
}

.pw-avatar {
  cursor: unset; /*why pointer if not clickable lol*/
  
  &.ds {
    font-size:.75rem;
    height:2.75rem;
    width:2.75rem;
  }
}

.thread__user__details {
  background-color: #000000;
  border: 1px solid #FF9FFF;
  box-shadow:0 0rem 0.5rem 0.01rem #FF9FFF80;
  border-radius: 0.25rem;
  display: flex;
  flex-direction: column;
  font-size: 0.75rem;
  padding: 0.5rem;
  width: 100%;
}

.thread__user__group {
  font-size: 0.75rem;
  font-weight: 400;
  font-family: "Lovelt";
}

.thread__date {
  font-weight: 400;
  font-size: 0.75rem;
  text-decoration: none;
  color: #FFFFFF;
}

.thread__index {
  color: #FFFFFF;
  font-weight: 400;
}

.user-badge {
  width: 32px;
  height: 32px;
  vertical-align: middle;
}

.profile__badges img {
  position: relative;
  top: 5px;
}

.TinyMDE {
  background-color:#000000;
  border:1px solid var(--border);
  border:1px solid #FF9FFF;
  box-shadow:0 0rem 1rem 0.1rem #5B375BBF;
  color: #FFFFFF;
  font-size:16px;
  line-height:1.5;
  min-height:12rem;
  outline:none;
  padding:.5rem 1rem
}
.pw-button {
  font-weight:500;
  border-radius:.25rem;
  transition:all .15s ease;
  font-size:1rem;
  padding:.5rem 1rem;
  color:#FFFFFF;
  border: 1px solid #FF9FFF;
  box-shadow:0 .1rem .5rem 0 #FF9FFF;
  display:inline-block;
  text-align:center
}
.pw-button.ghost.primary {
  border:1px solid var(--primary-9);
  color:var(--primary-9);
  box-shadow:0 0rem 0.5rem 0.1rem #FFFFFF80; 
}

.pw-button.raised.primary {
  background-color: #000000;
  box-shadow:0 0rem 1rem 0.1rem #5B375BBF;
  border: 1px solid #FF9FFF;
  color: #FFFFFF;
  font-family: "Lovelt";
}

.pw-button.raised.primary:not(:disabled):hover {
  background-color: #5B375B;
}

.pw-button.raised.primary:not(:disabled):active {
  background-color: #FF9FFF;
}

.profile__info__stat {
  color: #FF9FFF;
}

.profile__info__stat__value {
  color: #FFFFFF;
}

.profile__bio {
  font-size: 0.875rem;
  padding: 1rem;
}

.thread__latestPost {
  display: flex;
  justify-content: end;
  gap: 0.75rem;
  text-align: right;
}

.thread__toolbar {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.thread__toolbar__pagination {
  flex: 1;
}

.thread__toolbar > .pw-button {
  font-size: 1rem;
  line-height: 1;
  padding: 0.25rem 0.5rem;
}

.thread__content {
  flex: 1;
  padding: 0.6rem 1rem;
  max-width: 100%;
  height: auto;
}

.thread__content img {
  max-height: 750px;
  max-width: 1000px;
}

.thread__signature {
  border-top: 1px solid var(--oc-gray-4);
  padding: 0.1rem 1rem;
  color: #FF9FFF;
  font-family: "Lovelt";
  font-size: 0.75rem;
}

.thread__signature img {
  width: auto;
  max-height: 200px;
}

.pw-input-label {
  font-weight:700;
  color:#FFFFFF;
  display:block;
  font-size:.875rem
}

.shoutbox__shout__actions .pw-icon-button {
  width: 16px;
  height: 16px;
  min-width: 0;
  min-height: 0;
  padding: 0px;
  opacity: 0.35;
}

.pw-dialog-body {
  overflow:auto;
  padding:0.75rem;
  background-color:#000000;
  border:1px solid #FF9FFF; 
  font-size:0.75rem;
}

.pw-dialog-header {
  font-weight:400;
  font-family: "Lovelt";
  color: #FF9FFF;
  align-items:center;
  background-color:#f1f3f5;
  border:1px solid #FF9FFF; 
  border-bottom:1px solid #000000;
  display:flex;
  font-size:0.75rem;
  justify-content:space-between;
  padding:0rem 0.5rem;
  background-color:#000000;
}

.pw-button.raised.red {
  background-color:#000000;
  border:1px solid #FFFFFF; 
  color:#FFFFFF;
  box-shadow:0 0rem 0.25rem 0.1rem #FFFFFF80; 
}

.members__user__stat {
  color: #FF9FFF;
  font-size: 0.75rem;
}

.members__user__stat__value {
  color: #FFFFFF;
}

.pw-pagination-item.active .pw-pagination-link {
  background-color: #FF9FFF;
  border-color:var(--primary-9);
  color:#000000;
  z-index:1
}

.pw-pagination-item:not(:disabled):not(.disabled):not(.active):hover {
  background-color:#5B375B;
}

/* Nav badges */
.nav__dm-link,
.nav__notif-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.nav__dm-icon,
.nav__notif-icon {
  font-size: 1.1rem;
  line-height: 1;
}

.nav__badge {
  position: absolute;
  top: 0.5rem;
  right: -0.45rem;
  min-width: 1rem;
  height: 1rem;
  border-radius: 999px;
  background-color: #E97DE0;
  border: 1px solid #FF9FFF;
  color: #FFFFFF;
  font-family: "Lovelt", sans-serif;
  font-size: 0.75rem;
  line-height: 0.9rem;
  text-align: center;
  box-shadow:0 0rem 0.25rem 0.1rem #FFFFFF80; 
}

.nav__badge[hidden] {
  display: none;
}

.profile__actions {
  margin-top: 0.5rem;
}

/* DM inbox */
.dm-inbox__list,
.notification-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dm-inbox__item,
.notification-row {
  border-bottom: 1px solid #FF9FFF;
}

.dm-inbox__item:last-child,
.notification-row:last-child {
  border-bottom: none;
}

.dm-inbox__link,
.notification-row__link {
  display: flex;
  position: center;
  padding: 0.5rem 0.75rem;
  color: #FFFFFF;
  text-decoration: none;
}

.dm-inbox__link:hover,
.notification-row__link:hover {
  background-color: #5B375B;
  text-decoration: none;
}

.dm-inbox__item--unread .dm-inbox__user,
.notification-row--unread .notification-row__actor {
  font-weight: bold;
  color: #FF9FFF;
}

.dm-inbox__user,
.notification-row__actor {
  font-family: "Lovelt";
  font-size: 0.85rem;
}

.dm-inbox__preview,
.notification-row__body {
  font-size: 0.75rem;
  margin-top: 0.25rem;
  opacity: 0.9;
}

.dm-inbox__time,
.notification-row__header time {
  display: block;
  font-size: 0.65rem;
  margin-top: 0.25rem;
  opacity: 0.7;
}

.dm-inbox__unread-dot,
.notification-row__unread-dot {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: #FF9FFF;
}

.notification-row__header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: baseline;
  margin-top: 0.15rem;
  padding-right: 10px;
  margin-right: 5px;
  border-right: 1px solid #FF9FFF;
}

.notification-clear {
  margin-bottom: 0.75rem;
}

/* DM thread */
.dm-thread {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.dm-messages {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 24rem;
  overflow-y: auto;
  border: 1px solid #FF9FFF;
  border-radius: 0.25rem;
  padding: 0.5rem;
}

.dm-message {
  padding: 0.35rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  overflow-wrap: break-word;
}

.dm-message--received {
  background-color: #5B375B;
  align-self: flex-start;
  max-width: 85%;
}

.dm-message--sent {
  background-color: #2a1530;
  align-self: flex-end;
  max-width: 85%;
}

.dm-message__meta {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.65rem;
  margin-bottom: 0.25rem;
  opacity: 0.8;
}

.dm-message__empty {
  font-size: 0.75rem;
  opacity: 0.7;
  padding: 0.5rem;
}

.dm-compose {
  margin-top: 0.25rem;
}

.dm-inbox__content {
  padding: 0rem 0.5rem;
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  color: #5B375B;
  -moz-font-feature-settings: 'liga';
  -moz-osx-font-smoothing: grayscale;
}

.postmood {
  text-align: center;
  font-size: 10px;
}

.moodpic {
  padding: 5px;
  display: inline-block;
  text-align: center;
}

/* try to make sure this is always at the end for cleanliness sake */
:root {
    --oc-gray-1: #000000;
    --oc-gray-7: #FF9FFF;
    --primary-9: #FFFFFF;
}