@import url('https://fonts.googleapis.com/css2?family=Readex+Pro:wght@200;300;400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

body {
  --main-green: #86efac;
  --secondary-green: #4ade80;
  --last-green: #22c55e;
  --primary-dark: #0a0e12;
  --secondary-dark: #10171c;
  --outline: #47576350;
}

body.emerald {
  --main-green: #6ee7b7;
  --secondary-green: #34d399;
  --last-green: #10b981;
}

body.red {
  --main-green: #fca5a5;
  --secondary-green: #f87171;
  --last-green: #ef4444;
}

body.yellow {
  --main-green: #fde047;
  --secondary-green: #facc15;
  --last-green: #eab308;
}

body.yellow .navbar a {
  color: black;
}

body.yellow button,
body.yellow select {
  color: black;
}

body.cyan .navbar a {
  color: black;
}

body.cyan button,
body.cyan select {
  color: black;
}

body.cyan .bell,
body.yellow .bell {
  filter: invert(1);
}

body.blue {
  --main-green: #93c5fd;
  --secondary-green: #60a5fa;
  --last-green: #3b82f6;
}

body.pink {
  --main-green: #f9a8d4;
  --secondary-green: #f472b6;
  --last-green: #ec4899;
}

body.cyan {
  --main-green: #67e8f9;
  --secondary-green: #06b6d4;
  --last-green: #0891b2;
}

body.orange {
  --main-green: #fdba74;
  --secondary-green: #f97316;
  --last-green: #ea580c;
}

body.purple {
  --main-green: #d8b4fe;
  --secondary-green: #a855f7;
  --last-green: #9333ea;
}

body.gray {
  --main-green: #d1d5db;
  --secondary-green: #9ca3af;
  --last-green: #6b7280;
}

body {
  font-family: "Space Grotesk", sans-serif;
  background-color: var(--primary-dark);
  color: white;
  padding: 1rem;
  padding-top: 2rem;
}

a {
  color: var(--main-green);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

input {
  padding: 0.5rem;
  background-color: var(--secondary-dark);
  border-radius: 0.3rem;
  border: 2px solid var(--outline);
  margin: 0.5rem;
  font-family: "Space Grotesk", sans-serif;
  color: var(--main-green);
  margin-bottom: 1rem;
}

.navbar {
  background-color: var(--secondary-green);
  color: black;
  padding: 0.7rem;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100vw;
  padding-left: 1rem;
  padding-right: 1rem;
  z-index: 99999999999999999999999;
}

.navbar a.main-title-logo {
  font-weight: bold;
}

.navbar a {
  text-decoration: none;
  color: black;
}

.navbar .right {
  position: fixed;
  right: 1rem;
  top: 0.7rem;
}

.navbar .right > * {
  margin-left: 1.5rem;
}

.navbar a:hover {
  text-decoration: underline;
}

button {
  font-family: "Space Grotesk", sans-serif;
  border: 0.1rem solid var(--last-green);
  padding: 0.5rem;
  margin-right: 0.25rem;
  cursor: pointer;
  text-decoration: none;
  color: white;
  outline: 0px;
  border: 0px;
  background-color: var(--secondary-green);
  border-radius: 0.3rem;
}

button:hover {
  background-color: var(--last-green);
}

.pfp {
  width: 5rem;
  height: 5rem;
  border-radius: 2.5rem;
}

.post {
  background-color: var(--secondary-dark);
  margin-left: calc(50% - 20rem);
  margin-right: calc(50% - 20rem);
  padding: 1rem;
  border-radius: 0.5rem;
  border: 3px solid var(--outline);
  margin-bottom: 2rem;
}

.post .author {
  text-decoration: none;
  color: white;
}

.post .author span {
  text-decoration: underline;
  position: relative;
  top: -0.5rem;
  margin-left: 0.4rem;
}

.post .time {
  opacity: 0.5;
  display: block;
  color: white;
}

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

.post * {
  color: white;
  text-decoration: none;
}

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

.post > p {
  color: white;
  overflow-wrap: break-word;
  white-space: pre-wrap;
}

.post > p:hover {
  text-decoration: none;
}

.post .author img {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.75rem;
}

.posts {
  margin-top: 3rem;
}

.post-button {
  background-color: var(--main-green);
  width: 4rem;
  height: 4rem;
  border-radius: 2rem;
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  font-size: 2.5rem;
}

.post-button:hover {
  background-color: var(--secondary-green);
}

.post > p a {
  color: var(--main-green) !important;
  text-decoration: none;
}

.post > p a:hover {
  text-decoration: underline;
}

.box {
  margin-top: 3rem;
  text-align: center;
  background-color: var(--secondary-dark);
  margin-left: 20%;
  margin-right: 20%;
  padding: 1rem;
  border-radius: 0.5rem;
  border: 3px solid var(--outline);
  margin-bottom: 2rem;
}

.box input {
  padding: 0.5rem;
  background-color: var(--primary-dark);
  border-radius: 0.3rem;
  border: 2px solid var(--outline);
  margin: 0.5rem;
  font-family: "Space Grotesk", sans-serif;
  color: var(--main-green);
  margin-bottom: 1rem;
}

.join-date {
  position: relative;
  top: -4rem;
  opacity: 0.5;
  left: 6.76rem;
  display: block;
}

.text-block {
  width: 70%;
}

.post-link {
  color: white;
  text-decoration: none;
}

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

textarea, div.textarea {
  padding: 0.5rem;
  background-color: var(--secondary-dark);
  border-radius: 0.3rem;
  border: 2px solid var(--outline);
  margin: 0.5rem;
  font-family: "Space Grotesk", sans-serif;
  margin-bottom: 1rem;
  color: white;
  resize: none;
  width: 30rem;
  height: 5rem;
}

.center {
  text-align: center;
}

.comments {
  margin-top: 2rem;
}

.comment-count img {
  width: 1rem;
  margin-right: 0.25rem;
}

.comment-count {
  padding-top: 0.5rem;
  opacity: 0.75;
  display: inline-block;
}

.comment-count span {
  position: relative;
  top: -0.1rem;
}

.like-count img {
  width: 1rem;
  margin-right: 0.25rem;
  cursor: pointer;
}

.like-count {
  padding-top: 0.5rem;
  opacity: 0.75;
  display: inline-block;
  margin-left: 0.5rem;
}

.like-count span {
  position: relative;
  top: -0.1rem;
}

.user {
  background-color: var(--secondary-dark);
  display: inline-block;
  padding: 0.5rem;
  border-radius: 0.25rem;
  border: 3px solid var(--outline);
  margin: 0.25rem;
  padding-top: 0.75rem;
  width: 12rem;
  text-align: left;
}

.user img,
.post.reported-user img {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 0.8rem;
}

.user span {
  position: relative;
  margin-left: 0.5rem;
  top: -0.4rem;
  text-overflow: ellipsis;
  max-width: 8rem;
}

.user * {
  line-break: anywhere;
}

.post-background {
  position: fixed;
  z-index: 999999999999999;
  width: 100vw;
  height: 100vh;
  left: 0px;
  top: 0px;
  background-color: var(--primary-dark);
}

.post-box {
  z-index: 9999999999999999999999999;
  position: fixed;
  left: calc(50% - 17.5rem);
  top: 30%;
  width: 35rem;
  background: var(--secondary-dark);
  border-radius: 0.5rem;
  text-align: center;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

button.secondary-button {
  background-color: var(--outline);
}

.icon {
  width: 1.5rem;
  margin-left: 0.25rem;
  position: relative;
  top: 0.1rem;
}

.message a,
.admin-message a {
  color: var(--main-green);
}

.message a:hover,
.admin-message a:hover {
  text-decoration: underline;
}

.message,
.admin-message {
  text-align: center;
}

.report-flag {
  width: 1rem;
  margin-right: 0.25rem;
  cursor: pointer;
  float: right;
  position: relative;
  top: 0.5rem;
}

.report-background {
  position: fixed;
  z-index: 999999999999999;
  width: 100vw;
  height: 100vh;
  left: 0px;
  top: 0px;
  background-color: var(--primary-dark);
}

.report-box {
  z-index: 9999999999999999999999999;
  position: fixed;
  left: calc(50% - 17.5rem);
  top: 30%;
  width: 35rem;
  background: var(--secondary-dark);
  border-radius: 0.5rem;
  text-align: center;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.admin-message {
  border-color: var(--main-green);
}

.chat-message {
  margin-top: -1.5rem;
}

.chat-message p {
  max-width: 40vw;
  background-color: var(--secondary-dark);
  padding: 0.5rem;
  border-radius: 0.5rem;
  display: inline-block;
}

.chat-message.self {
  text-align: right;
}

.chat-message.self p {
  background-color: var(--secondary-green);
}

.chat-message.other p {
  margin-left: -3rem;
}

.chat-message img {
  position: relative;
  top: 1rem;
}

.chat-message span {
  font-size: 0.75rem;
  opacity: 0.5;
  position: relative;
  top: -1.8rem;
  right: 0.5rem;
}

.chat-message img {
  width: 2rem;
  height: 2rem;
  border-radius: 1rem;
  margin-right: 1rem;
  float: left;
}

.chat-message.self img,
.chat-message.self span {
  display: none;
}

.chat {
  padding-top: 1.5rem;
  height: calc(100vh - 16rem);
  overflow-y: scroll;
}

.chat::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.chat {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

.pinned > * > .post {
  border-color: var(--last-green);
}

.pin-icon {
  float: right;
  width: 1.5rem;
}

.main-post {
  text-align: center;
}

.main-post > .post {
  text-align: left;
}

.pinned {
  margin-top: 3.2rem;
}

.pinned[data-pinned=""] {
  display: none;
}

.info {
  background-color: #ed4c4c;
  border: 2px solid #8c5353;
  border-radius: 0.35rem;
  padding: 0.5rem;
  width: 30rem;
  margin-left: calc(50% - 15rem);
  margin-top: 1rem;
  margin-bottom: 1rem;
}

select {
  font-family: "Space Grotesk", sans-serif;
  border: 0.1rem solid var(--last-green);
  padding: 0.45rem;
  margin-right: 0.25rem;
  cursor: pointer;
  text-decoration: none;
  color: white;
  outline: 0px;
  border: 0px;
  background-color: var(--secondary-green);
  border-radius: 0.3rem;
  padding-right: 1rem;
}

.icon.small {
  height: 1.25rem;
  width: 1.25rem;
  position: relative;
  top: -0.1rem;
}

.profile-box {
  text-align: left;
  margin-top: 4rem;
  margin-left: 10%;
  margin-right: 10%;
}

.profile-box > h1 {
  display: inline-block;
  position: relative;
  top: -3rem;
  margin-left: 1rem;
}

.profile-box > .buttons {
  float: right;
  position: relative;
  top: -5.5rem;
  text-align: right;
}

.profile-box {
  border-color: var(--secondary-green);
  height: 10rem;
}

.banner {
  margin-left: -1rem;
  margin-right: -1rem;
  margin-top: -1rem;
  margin-bottom: 1rem;
  height: 4rem;
  background-color: var(--main-green);
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
}

.grinch {
  height: 70vh;
  position: fixed;
  left: 3vw;
  bottom: -6vh;
}

[class*="reported-"] {
  text-align: center;
}

.user[class*="reported-"] {
  background-color: var(--secondary-dark);
  display: inline-block;
  padding: 0.5rem;
  border-radius: 0.25rem;
  border: 3px solid var(--outline);
  margin: 0.25rem;
  padding-top: 0.75rem;
  width: 16.5rem;
  text-align: left;
  height: 8rem;
}

[class*="reported-"] > a {
  height: 8rem;
}

.bell {
  height: 1.25rem;
  position: relative;
  top: 0.35rem;
  margin-top: -1rem;
  filter: invert(1);
}

.post > p img {
  max-width: 100%;
}

.post-buttons button {
  width: 2rem;
  text-align: center;
}

.post-buttons {
  padding-left: 1.3rem;
  text-align: left;
}

.repost {
  max-width: 100%;
}

.repost .post {
  max-width: 100%;
  margin-left: .5rem;
  margin-right: .5rem;
}

.reposts {
  margin-top: 2rem;
}

.repost-count img {
  width: 1rem;
  margin-right: 0.25rem;
  cursor: pointer;
}

.repost-count {
  padding-top: 0.5rem;
  opacity: 0.75;
  display: inline-block;
  margin-left: .5rem;
}

.repost-count span {
  position: relative;
  top: -0.1rem;
}

.message .post {
  text-align: left;
  margin-left: .5rem;
  margin-right: .5rem;
  margin-top: 1rem;
  max-width: 100%;
}

.message .post p {
  color: white;
  text-decoration: none !important;
}

.message .post p:hover {
  color: white;
  text-decoration: none !important;
}

.post-link:hover {
  text-decoration: none !important;
  color: white !important;
}

.post-link > *:hover {
  text-decoration: none !important;
}

.post-link > * {
  text-decoration: none !important;
}

.author:hover {
  text-decoration: none !important;
}

.follow-data {
  float: right;
  position: relative;
  top: 0.75rem;
}

.follow-data a:hover {
  text-decoration: underline;
}

.reply-button {
  float: right;
  position: relative;
  top: -1rem;
  cursor: pointer;
}

.reply-button:hover {
  text-decoration: underline;
}

.post {
  transition: border-color .3s;
}

.glow-post {
  border-color: var(--main-green);
  transition: none;
}

.text-button {
  text-decoration: none;
  color: var(--main-green);
  cursor: pointer;
}

.text-button:hover {
  text-decoration: underline;
}

@media screen and (max-width: 600px) {
  
  .post {
    margin-left: 5%;
    margin-right: 5%;
  }

}

.profile-tag {
  font-size: .75rem;
    background: var(--secondary-green);
    padding: 0.25rem;
    border-radius: 0.15rem;
    position: relative;
    top: -0.35rem;
    cursor: pointer;
}

.left-side-profile {
  width: 75%;
  display: inline-block;
  margin-left: 10%;
}

.left-side-profile > .posts > a > .post, .left-side-profile > .pinned > a > .post, .left-side-profile > .admin-panel {
  width: 65%;
  margin-left: 0px;
  margin-right: 0px;
}

.right-side-profile {
  display: inline-block;
  width: 20%;
  margin-top: 1rem;
  background-color: var(--secondary-dark);
  padding: 1rem;
  position: absolute;
  right: 10%;
  border-radius: 0.5rem;
  border: 3px solid var(--outline);
}

.aboutme-edit {
  width: calc(100% - 2rem);
}

.pronouns {
  margin-top: 1rem;
}

.pronouns-input {
  width: calc(100% - 2rem);
}

.right-side-profile button {
  margin-left: .5rem;
}

.connections {
  margin-top: 1rem;
}

.connections .user {
  margin-top: .5rem;
  width: calc(100% - 2rem) !important;
}

[class^="connect-"] {
  margin-top: 1rem;
}