:root {
  --color-bg: #f7f4ff;
  --color-bg2: #edf6ff;
  --color-text: #26262c;
  --color-text2: #3a2a99;
  --color-link: #bda7ff;
  --color-border: #c3e2ff;
}

body {
  font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  background-color: var(--color-bg);
  color: var(--color-text);
}
#search-input {
  font-size: 1.225rem;
  padding: 0.5rem;
  width: 100%;
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 6px;
}
a {
  color: var(--color-link);
  text-decoration: none;
}
a:hover {
  color: var(--color-link);
  text-decoration: underline;
}
.search_item {
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
}
.search_item:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}
.search_time {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  display: inline;
  margin-right: 0.225rem;
  opacity: 0.5;
}
.search_text {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}
.search_link {
  display: inline;
  font-size: 0.875rem;
}
#sorting {
  margin-top: 1rem;
  font-size: 0.875rem;
  display: flex;
  gap: 0.5rem;
  align-items: center;
 }
#sorting span {
  color: var(--color-text2);
}
.sort-button {
  font-size: 1rem;
  cursor: pointer;
}
.wrapper {
  display: block;
  max-width: 600px;
  margin: 0 auto;
  word-wrap: break-word;
}
.flex-wrap {
  display: flex;
  flex-direction: column;
}
.tweet {
  background-color: var(--color-bg);
  max-width: 600px;
  padding: 1rem;
  font-size: 1.225em;
  line-height: 1.4;
  border: 1px solid var(--color-border);
  border-radius: 6px;
}
.tweet img {
  max-height: 100%;
  vertical-align: bottom;
  width: 100%;
  object-fit: cover;
}
.tweet video {
  max-height: 100%;
  vertical-align: bottom;
  width: 100%;
}
.tweet ul {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
  gap: 8px;
  padding-left: 0px;
  
}
.tweet li {
  height: fit-content;
  width: 20vh;
  flex-grow: 1;
}
.tweet .display_name {
  margin-bottom: 0;
  margin-top: 0;
}
.tweet .user_name {
  margin-top: 4px;
}
.tweet .favorite_count {
  display: inline-block;
  margin-bottom: 0;
  font-size: 0.8rem;
}
.tweet .retweet_count {
  display: inline-block;
  margin-left: 16px;
  margin-bottom: 0;
  font-size: 0.875rem;
}
.tweet .created_at {
  margin-bottom: 0;
  font-size: 0.875rem;
}
.tweet .permalink {
  margin-left: 16px;
  font-size: 0.875rem;
}
.child {
  margin-top: 16px;
  margin-left: 64px;
  max-width: calc(600px - 64px);
  background-color: var(--color-bg2);
}
.parent {
  margin-bottom: 16px;
  margin-right: 64px;
  max-width: calc(600px - 64px);
  background-color: var(--color-bg2);
}
@media screen and (max-width: 599px) {
  .tweet li {
    height: 15vh;
    width: 15vh;
    flex-grow: 1;
  }
}
@media(prefers-color-scheme: dark) {
  :root {
    --color-bg: #1a0023;
    --color-bg2: #000b1f;
    --color-text: #fafafb;
    --color-text2: #3a2a99;
    --color-border: #3a2a99;
  }
}