body {
  max-width: 100vw;
}

#TitleBanner {
  position: sticky;
  top: 0px;
  display: flex;
  width: 100%;
}

#TitleBanner > div {
  flex-grow: 1;
  flex-shrink: 0;
}

#TitleBanner h1 {
  display: inline-block;
  margin: 4px;
  margin-inline-end: 1.5em;
  font-size: 2em;
}

#TitleBanner h2 {
  display: inline-block;
  margin: 4px;
}

#TitleBanner a {
  text-decoration: none;
  color: inherit;
}

#AppLogo {
  height: 2em;
  vertical-align: bottom;
}

#TitleBannerCenter {
  text-align: center;
}

#TitleBannerRight {
  text-align: right;
  font-size: 2em;
}

#SettingsGear {
  cursor: pointer;
}

#InstanceName {
  text-align: center;
  border-bottom: #6666663a solid 1px;
}

#CardBox, .card_box {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px,1fr));
  width: 100%;
  max-width: 100%;
}

.video_card {
  padding: 3px;
  box-sizing: content-box;
}

.video_card img {
  display: block;
  max-width: 100%;
  width: 100%;
}

.video_card_title {
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.video_card_meta {
  font-size: 80%;
}

.video_card_user {
  margin-inline-end: 1.5em;
}

a.video_card_link {
  text-decoration: none;
  color: inherit;
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
}

.video_card_link img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background-color: #66666699;
}

.video_card_duration {
  position: absolute;
  bottom: 6px;
  right: 6px;
  background-color: rgba(0,0,0,0.75);
  color: #fff;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 0.75em;
  font-weight: 500;
  pointer-events: none;
}

.username_h {
  font-size: 250%;
  font-weight: bold;
  font-style: italic;
}

.usericon_small {
  height: 2.5em;
  max-width: 100px;
}

#UserDescriptionText {
  width: 100%;
  resize: none;
  border: 0px none;
}

#NoSuchUser {
  display: none;
}

#VideoArea video {
  margin: auto;
  max-width: 100%;
  max-height: 70vh;
}

.plyr:fullscreen video {
  max-width: none !important;
  max-height: none !important;
}

#VideoDescriptionText {
  outline: 0px none;
  resize: none;
  width: 100%;
  border: 1px solid #999;
  font-family: inherit;
  font-size: inherit;
}

#VideoReaction {
  display: none;
}

#LikeCount {
  display: inline-block;
  border: 1px solid #99999972;
  border-radius: 3px;
  padding: 3px;
  display: none
}

#NegativeReaction {
  margin-inline-start: 1.5em;
  display: none;
}

#UsersBox {
  display: flex;
}

.user_card {
  flex-basis: 350px;
  flex-shrink: 1;
  flex-grow: 1;
  max-height: 150px;
}

.user_card_wrapper {
  vertical-align: middle;
}

.usericon {
  width: 150px;
  max-width: 150px;
  max-height: 100%;
}

.user_card_username {
  font-size: 200%;
}

#PlayerAdditionalSection1, #PlayerAdditionalSection2 {
  width: 100%;
}

#SettingsScreen {
  position: fixed;
  width: 100dvw;
  height: 100dvh;
  top: 0px;
  left: 0px;
  display: none;
}

.modal_internal {
  max-width: 800px;
  margin: auto;
}

.right {
  text-align: right;
}

.thin_margin {
  margin-block-start: 0.3em;
}

/********** THEMES **********/

body {
  color: #333;
}

#TitleBanner {
  background-color: #fff;
  box-shadow: 0px 7px 5px -5px #9999994a;
}

#TitleBanner h1 {
  color: #FA833B;
}

a {
  color: #0e71f2;
}

.video_card_title, #VideoTitle {
  color: #000;
  cursor: default;
}

.video_card_date {
  color: #666;
}

textarea {
  background-color: transparent;
  color: inherit;
}

.reaction_button, .lovebox {
  border: 1px solid #333;
  border-radius: 5px;
  background-color: transparent;
  font-size: 28px;
}

.lovebox {
  display: inline-block;
  padding-left: 2.5em;
  padding-right: 2.5em;
}

#UserDescriptionText {
  background-color: #66666629;
}

#SettingsScreen {
  background-color: #fffffff8;
}

.form_btn {
  background-color: #fff;
  padding: 0.45em;
  font-size: 1.15em;
  border-radius: 8px;
  border-style: solid;
  outline: 0 none;
  font-weight: bolder;
}

.form_cancel {
  color: #ff7b39;
  border-color: #ff7b39;
}

.form_submit {
  background-color: #0564bd;
  border-color: #0564bd;
  color: #fff;
}

code {
  color: #f14e13;  
}


@media screen and (prefers-color-scheme: dark) {
  body, #TitleBanner {
    background-color: #0f0f0f;
    color: #fff;
  }

  .video_card_title, #VideoTitle {
    color: #fff;
  }

  .video_card_date {
    color: #ccc;
  }

  a {
    color: #f3d57d;
  }

  .reaction_button {
    border-color: #e8e8e8;
  }

  #SettingsScreen {
    background-color: #000000f7;
  }

  .form_btn {
    background-color: #0f0f0f;
  }

  .form_cancel {
    color: #ff9f39;
    border-color: #ff9f39;
  }

  .form_submit {
    background-color: #78b1e7;
    border-color: #78b1e7;
    color: #000;
  }

  code {
    color: #f29a48;  
  }
}

/********** Disabling **********/
#UserPlaylists { display: none; }

/********** Mobile **********/
@media screen and (max-width: 679px) {
  #TitleBanner h1, #TitleBannerRight {
    font-size: 1.35em;
  }

  .usericon {
    height: 2.5em;
    width: unset;
    max-width: 100px;
  }

  .user_card_username {
    font-size: 0.8em;
  }

  .username_h {
    font-size: 125%;
  }
}