.container {
  position: absolute;
  top: 11rem;
  right: 4rem;
  left: 22rem;
  bottom: 4rem;
  display: inline;
  --gap: 1rem;
}

.title {

    margin: 0;
    margin-bottom: 1rem;

    color: #ffffff;
    font-weight: 600;
    font-size: 3rem;

    z-index: 2;
}

.fullDescription {

    margin: 1rem;
    margin-top: 3rem;

    color: #dadada;
    font-size: 1.2rem;
}

.content {
  position: absolute;
  top: 0;
  bottom: 0;

  width: calc(70% - var(--gap));
  min-height: 20rem;

  padding: 3rem;

  background-color: #1a1a1a;
  color: #eaeaea;

  border: #3a3a3a solid;
  border-width: .1em;
  border-radius: .5rem;

  overflow: scroll;
}

.infosPanel {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(70% + var(--gap) + 7rem);
  right: 0;

  padding: 2rem;
  min-height: 20rem;
  align-items: center;

  background-color: #1a1a1a;
  color: #eaeaea;

  border: #3a3a3a solid;
  border-width: .1em;
  border-radius: .5rem;
  display: inline;

  overflow: scroll;
}

.backgroundImage {
  position: absolute;
  top: 0;
  right: 0%;

  height: 30%;
  width: 70%;

  background: url("https://resources.oblic-parallels.fr/example.jpg");
  background-size: cover;
  border-top-right-radius: .4rem;
  -webkit-mask-image: radial-gradient(ellipse at top right, black 0%, #00000010 50%, transparent 70%);

  z-index: 0;
}

.profilePicture {
/*TODO keep it center when overlapping*/
  margin-top: 1em;
  margin-bottom: 1em;
  display: block;
  margin-left: auto;
  margin-right: auto;

  width: 7em;
}

.author {
    margin: 0;
    margin-bottom: 1rem;

    color: #c5c5c5;
    font-weight: 600;
    font-size: 2rem;
    text-align: center;
}

.panelTitle {
    margin-top: 2rem;

    color: #eaeaea;
    font-weight: 600;
    font-size: 1.2em;
}

.countsContainer {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
}

.count {

    padding: .5em;
    margin: 0 .5rem;
    min-width: 3em;

    color: #cacaca;
    background-color: #2a2a2a;
    border: #3a3a3a .1rem solid;
    border-radius: .5rem;
}

.countIcon {
    margin-bottom: -.4em;
    margin-right: .5em;
}

.timeline {
    position: relative;
}

.timeline::after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: .2em;

    margin-left: -.2rem;
    margin-top: 1em;
    margin-bottom: 1em;

    width: .1rem;

    background-color: #3a3a3a;

    content: '';
}

.version {
    margin-bottom: 2em;
    margin-left: 1em;

    padding: .2em;

    color: #8a8a8a;
    font-size: 1.3em;
    border-radius: .5em;

    transition: 200ms;
}

.versionDot {
    position: absolute;
    margin-left: -.66em;
    margin-top: .7em;

    height: 1.5em;
    width: 1.5em;

    z-index: 2;
}

.versionDot > circle {
    transition: 200ms;
}

.versionDot > circle:hover {
    fill: #eaeaea;
}

.version:hover {
    background-color: #3a3a3a;
}