body{

  }
  .libFirst{
    width:100%;
    height:100vh;
    /* overflow: hidden;
    margin:0; */
    /* background-color: blue; */
    background-color: rgba(0,0,0,0.5);

    background-image:url("../imgLib/oriLibrary.jpg");
    background-size: cover;
  }
.librairyRope{
  display: flex;
  width:100%;
  color:#eaeaea;
  font-family: "Lato";
  /* height:calc(100vh - 15px); */
}
#game-container span:hover{
  background-color: rgba(234,234,234,0.8);
  box-shadow: 0 0 5px rgba(0,0,0,0.2);
  color:#171A21;
}
#game-container .active{
  background-color: rgba(10,65,89,0.8);
  box-shadow: 0 0 10px rgba(0,0,0,0.3)
  /* color:#; */
}
#game-container{
  width:20%;
  display: flex;
  flex-direction: column;
  padding-left:15px;
  padding-right: 15px;
  padding-top: 15px;
  background-color: rgba(234,234,234,0.15);
  backdrop-filter: blur(10px);
  height:calc(100vh - 15px);
}
#game-container span{
  margin-bottom: 5px;
  cursor: pointer;
  padding-left: 10px;
  border-radius: 5px;
  padding-top: 2px;
  padding-bottom: 2px;
  transition: all .2s ease;

}
.librairyWrapper{
  width:80%;
  display: block;
}
#librairyContainer{
  background-color: rgba(28,38,48,0.3);
  width:100%;
  height:100vh;
}
#librairyContainer .headerLib{
  display:flex;
  align-items: center;
  width: 100%;
  flex-direction: column;
}
#librairyContainer .logoGame{
  width:35%;
  /* height:100px; */
  /* background-color: blue; */

}
#librairyContainer .btnInstall{
font-size: 20px; /* height:100px; */
margin-top: 15px;
color:#171A21;
  /* background-color: red; */
  cursor: pointer;

}
.recentNewsLib a{
  color:#FCAB26;
}
#librairyContainer .btnInstall:hover{
  color: #171A21;
}
#librairyContainer .sectionLib{
  position: absolute;
  bottom:0;
  /* width:80%; */
  display: flex;
  align-items:flex-start;
  justify-content: space-between;

  /* justify-content: center; */
  /* height:400px; */
}
.sectionLib h3{
  margin-top:15px;
}

.friendAchivLiv{
  width:60%;
  display: flex;
  justify-content: space-evenly;
  /* padding-left: 15px; */
}
.friendsLib{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 15px;
  margin-right: 7.5px;
  /* background-color: green; */
}
  .friendsLibProf{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .friendsLibProf a{
    width:50px;
    height:50px;
    /* background-color: black; */
    margin-bottom: 15px;

  }
  .friendsLibProf img{
    width:50px;
    height:50px;
    overflow: hidden;
  }
.achievmentLib-wrapper{
  display: flex;
  flex-direction: column;
  /* justify-content: center; */
  align-items: center;
  margin-left: 7.5px;
  margin-right: 7.5px;
  /* background-color: yellow; */
}
.achievmentLib-container{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  width:130px;
  /* margin-left: 15px; */
  /* background-color: yellow; */
}
.achievmentLibItems{
  width:50px;
  height:50px;
  background-color: black;
  margin-bottom: 15px;
  margin-right: 7.50px;
  margin-left:7.5px

}
.achievmentLibItems img{
  width:50px;
  height:50px;
  overflow: hidden;
}
  )
#infoLib{
  /* display: flex;
  background-color:
  flex-direction: column; */
  width:60%;
  margin-left: 7.5px;
  margin-right:15px;
  /* justify-content: space-between; */
  /* background-color: rgba(255,0,0,0.4); */
  /* padding-left: 15px;
  padding-right:15px; */
}

.contentGameLib{
    /* height:30%; */
    margin-bottom: 15px;
    margin-right: 15px;
    margin-left: 7.5px;
}
.sectionLib div#infoLib h3{
  margin:0;

}
.contentGameLib h3{
  padding:15px;

}

.dlcLib{
  margin-top: 15px;
  margin-bottom: 15px;

  padding-left: 15px;
  padding-right: 15px;

  width:calc(100%-30px);
  background-color: rgba(234,234,234,0.15);
  backdrop-filter: blur(10px);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
}
.dlcItem{
  display:flex;
  padding-top:5px;
  padding-bottom:5px;

  justify-content: space-between;
  /* outline: 1px solid white; */
  color:white;

}
.dlcPriceBtn{
  display: flex;
justify-content: flex-end;
}
.panierLib{
  width:15px;
  height:15px;
  stroke:#FCAB26;
  margin-left: 5px;
}
.dlcBtn{

  display: flex;
  align-items: center;
}
.dlcBtn-container{
  color:#FCAB26;
padding-left: 15px;
  cursor: pointer;

}
.recentNewsLib{
  padding:15px;
  border-radius: 8px;

  background-color: rgba(234,234,234,0.15);
  backdrop-filter: blur(10px);
  /* height:100%; */
  overflow: hidden;
  margin-right: 15px;
  margin-left: 7.5px;
  margin-top: 15px;
  height: auto;
}