#banner {
  --banner_background_color: var(--text_color_primary);
  --banner_avatar_background_color: var(--background_color_container);
  --banner_info_name_color: #fff;
  --banner_subinfo_color: var(--text_color_secondary);
  --banner_name_font_size: var(--font_size_grande);
  --banner_subinfo_font_size: var(--font_size_short);
}

#banner {
  --banner_post_avatar_offset: 50px;
  --banner_post_lr_offset: 25px;
  --banner_info_bottom: -12px;
  --banner_info_avatar_size: 60px;
  --banner_info_name_offset: 15px;
  --banner_subinfo_height: 20px;
  --banner_subinfo_bottom_offset: 10px;
  position: relative;
  height: 300px;
}
:root.mobile #banner {
  --banner_post_lr_offset: 20px;
  --banner_info_avatar_size: 68px;
}

#banner-background {
  width: 100%;
  height: 100%;
  background-color: var(--banner_background_color);
  background-position-x: 0;
  background-repeat: no-repeat;
  background-size: cover;
}

#banner-background.nobg {
  background-image: url(../img/banner.nobg.svg);
  background-position: 50% 50%;
}

#banner-background.existbg {
  background-image: var(--banner_background_image);
  background-position-y: var(--banner_background_image_position);
}
:root.darkmode #banner-background.existbg {
  background-image: var(--banner_background_image_dark, var(--banner_background_image));
  background-position-y: var(--banner_background_image_position_dark, var(--banner_background_image_position));
}

#banner-info {
  position: absolute;
  z-index: 1;
  right: var(--banner_post_lr_offset);
  bottom: var(--banner_info_bottom);
  width: calc(100% - var(--banner_post_lr_offset));
}

#banner-info > div.name {
  position: relative;
  width: calc(100% - var(--banner_info_avatar_size) - var(--banner_info_name_offset));
  height: 24px;
  margin: 12px 0 0 0;
  color: var(--banner_info_name_color);
  font-weight: 500;
  font-size: var(--banner_name_font_size);
  line-height: 24px;
  letter-spacing: 1px;
  text-align: right;
}
:root.mobile #banner-info > div.name {
  margin-top: 15px;
}

#banner-info > div.name > strong {
  display: inline-block;
  height: 100%;
  cursor: pointer;
}

@keyframes banner-info-name-anim {
  0% {background-position-x: 0;}
  100% {background-position-x: -20px;}
}
#banner-info > div.name > strong:hover {
  background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 4"%3E%3Cpath d="M0 3.5c5 0 5-3 10-3s5 3 10 3 5-3 10-3 5 3 10 3" fill="none" stroke="rgba(255, 255, 255, 0.9)" /%3E%3C/svg%3E') 0 100% repeat-x;
  background-size: 20px auto;
  animation: banner-info-name-anim 1s infinite linear;
}

#banner-info > div.avatar {
  width: var(--banner_info_avatar_size);
  height: var(--banner_info_avatar_size);
  border-radius: 7px;
  background-color: var(--banner_avatar_background_color);
  overflow: hidden;
}

#banner-subinfo {
  position: absolute;
  z-index: 1;
  right: var(--banner_post_lr_offset);
  bottom: calc(var(--banner_info_bottom) - var(--banner_subinfo_height) - var(--banner_subinfo_bottom_offset));
  width: calc((100% - var(--banner_post_lr_offset) - var(--banner_post_avatar_offset) - var(--banner_post_lr_offset)) * 2 / 3);
  height: var(--banner_subinfo_height);
  color: var(--banner_subinfo_color);
  font-size: var(--banner_subinfo_font_size);
  line-height: var(--banner_subinfo_height);
  text-align: right;
}