@import url('https://fonts.googleapis.com/css2?family=Karla&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');
@import url('https://fonts.cdnfonts.com/css/montserrat');

#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}

#rr_modern-loneliness {
  --img-width: 130px;
  --img-height: 100px;
  --bg-main: #000000;
  --border-color: #fff;
  --title-color: #fff;
  --name-bg: #000000;
  --name-color: #fff;
  --info-bg: #fff;
  --info-color: #000;
  position: relative;
  margin-bottom: 60px;
  padding: calc(var(--img-margin) + 5px)
}

#rr_modern-loneliness a ~ .rcontainer {
  width: calc(var(--img-width)* 7 + var(--img-margin)* 1);
  padding: calc(var(--img-margin) + 5px);
  background: var(--bg-main);
  position: relative;
  outline: 2px solid var(--border-color);
  outline-offset: -13px;
}

#rr_modern-loneliness a ~ .rcontainer::after {
  content: "";
  width: 256px;
  height: 238px;
  background: url(https://static1.e621.net/data/f7/e7/f7e70ea9e11dc7ae3cc7c67a550a2b95.gif) center / cover;
  position: absolute;
  bottom: -80px;
  left: -79px;
}

#rr_modern-loneliness a ~ .rcontainer .rtitle {
  margin-bottom: 30px;
  font: 800 36px/100% 'Montserrat', sans-serif;
  text-transform: uppercase;
  color: var(--title-color);
  letter-spacing: -1px;
}

#rr_modern-loneliness a ~ .rcontainer .rimg {
  width: var(--img-width);
  margin: var(--img-margin);
  display: inline-block;
  box-sizing: border-box;
  position: relative;
  line-height: 0;
  outline: 1px solid var(--border-color);
  outline-offset: 3px;
}

#rr_modern-loneliness a ~ .rcontainer .rimg img {
  width: 100%;
  height: var(--img-height);
  object-fit: cover;
  margin-bottom: 3px;
}

#rr_modern-loneliness a ~ .rcontainer .rdata {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: var(--info-bg);
}

#rr_modern-loneliness a ~ .rcontainer .rdata > b {
  width: 100%;
  box-sizing: border-box;
  padding: 5px 8px;
  background: var(--name-bg);
  font: 800 14px / 110% 'Karla', sans-serif;
  text-transform: uppercase;
  color: var(--name-color);
}

#rr_modern-loneliness a ~ .rcontainer .rdata i {
  padding: 6px 5px;
  text-align: justify;
  font: 12px / 100% 'Quicksand', serif;
  color: var(--info-color);
}

#rr_modern-loneliness a {
  height: 12px;
  position: absolute;
  z-index: 5;
  bottom: 0;
  left: 0;
  right: 0;
}