:root {
  --text: #fcfcfc;
  --bg-100: #232629;
  --bg-200: #313639;
  --accent: #ea81e8;
  --warning: #fdbc4b;
  --plyr-color-main: var(--accent);
  --purple: #290164;
}

body {
  background-color: var(--bg-100);
  background-image: url('/static/img/861c6291044c997464bdaa59cde2f226a5216a3ac8f7c1329ccbf59fc6243b2f.png');
  background-attachment: fixed;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif; 
}

.center {
  display: flex;
  justify-content: center;
}

a {
  color: var(--accent);
  text-decoration: none;
  word-break: break-word
}

p {
  word-break: break-word
}

.jsonData {
  display: none;
}

header {
  background-size: cover;
  background-color: rgba(160,0,255,.5);
  border: 4px solid #ff00ff;
  border-radius: 4px;
  backdrop-filter: blur(17px);
  padding: 8px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  margin: 0 15vw 0 15vw;
}

.searchBar {
  background-color: #232629;
  color: #fcfcfc;
  height: 16px;
  font-size: 14px;
  padding: 0.5em;
  border: none;
  border-radius: 6px;
  outline: none;
  color: var(--text);
  background-color: var(--bg-100);
}

main {
  background-size: cover;
  background-color: rgba(160,0,255,.5);
  border: 4px solid #ff00ff;
  border-radius: 4px;
  padding: 8px;
  backdrop-filter: blur(17px);
  margin: 0 15vw 0 15vw;
}

.settingsIcon {
  color: var(--text);
  font-size: 24px;
}

.sectionHeader {
  margin-top: 0;
}

.videoDesc__meta {
  display: flex;
  gap: 10px;
}

.videoDesc__meta__item-btn div, .videoDesc__meta__item {
  display: flex;
  align-items: center;
  gap: 4px;
  border-radius: 6px;
}

.sectionHeader {
  margin-top: 0;
}

.btn {
  display: flex;
  align-items: center;
  gap: 4px;
  border: none;
  border-radius: 6px;
  font-size: 1em;
  color: var(--text);
  background-color: var(--bg-100);
  padding: 0.5em;
  cursor: pointer;
}

.btn:hover {
  background-color: var(--bg-200);
}

.actionBar {
  display: flex;
  gap: 4px;
  width: 100%;
}

.claimsGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

.claimLink {
  color: var(--text);
}

.claimMeta {
  display: flex;
  font-weight: 600;
  font-size: 14px;
  justify-content: space-between;
}

.pfp {
  border-radius: 100%;
  object-fit: cover;
  aspect-ratio: 1/1;
}

.pfp--default {
  background-color: var(--accent);
}

.thumbnailWrapper {
  padding: 28.125%;
  position: relative;
  box-sizing: border-box;
}

.description {
  overflow: hidden;
  max-height: 8.5em;
}

.videoDesc__data, .videoDesc__channel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.videoDesc__meta {
  display: flex;
  gap: 10px;
}

.videoDesc__meta__item-btn div,
.videoDesc__meta__item {
  display: flex;
  align-items: center;
  gap: 4px;
  border-radius: 6px;
}

.videoDesc__meta__item .material-icons-outlined {
  font-size: 1em;
}

.videoDesc__data,
.videoDesc__channel {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.videoDesc__data {
  justify-content: space-between;
}

#expandBtn {
  display: none;
}

#expandBtn~label>a::after {
  content: "Show more";
}

label {
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
}

#expandBtn:checked~label>a::after {
  content: "Show less";
}

#expandBtn:checked~div {
  overflow: unset;
  max-height: none;
  height: 100%;
}

.thumbnailWrapper {
  padding: 28.125%;
  position: relative;
  box-sizing: border-box;
}

.thumbnail {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.channelThumbnail {
  object-fit: scale-down;
}

.duration {
  position: absolute;
  background-color: rgba(35, 35, 35, 0.75);
  color: white;
  border-radius: 2px;
  padding: 2px;
  font-size: 16px;
  right: 0.25em;
  bottom: -0.75em;
}

.pageSelector {
  display: flex;
  justify-content: space-between;
}

footer {
  display: flex;
  justify-content: center;
  flex-direction: row;
  gap: 10px;
}

@media only screen and (max-width: 812px) {
  main, header {
    margin: 0;
  }

  .actionBar {
    flex-wrap: wrap;
    justify-content: normal;
  }

  .videoData {
    flex-direction: column;
  }

  .videoData__side {
    width: 100%;
  }

  .videoMeta {
    width: 100%;
  }

  .videoMeta__wrapper {
    flex-direction: column;
  }

  .videoMeta__thumbs {
    display: flex;
    flex-direction: row;
    gap: 6px;
    margin-top: -1.75em;
    height: 1.5em;
  }

  .videoDesc {
    width: 100%;
  }

  .videoDesc__meta__item-btn div {
    padding: 0.35em;
  }

  footer {
    flex-direction: column;
    text-align: center;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --text: #fff;
    --bg-100: #414141;
    --bg-200: #515151;
  }

  body {
    background-color: #000;
    color: #fff;
  }

  .logo {
    filter: invert(1) hue-rotate(180deg);
  }
  .searchBar {
    background-color: black;
    color: #d2d2d2;
  }
}