.modal {
  display: none; 
  width: 20vw;
  height: 67vh;
  position: fixed;
  top: 15vh; 
  left: 0;
  background-color:var(--couleur-5);
  z-index: 999999;
  border: .1rem solid var(--couleur-3);
}
.modal.show { display: block; }

.modal-content {
  overflow: hidden;
  animation: fadein .25s ease;
}
@keyframes fadein { from{transform:translateY(-10px);opacity:0} to{opacity:1} }
.close {
  background: none;
  border: 0;
  color: #e06666;
  font-size: 2rem;
  cursor: pointer;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  padding-left: .5rem;
}
.modal-header h2 {
  color: var(--couleur-3);
  width:50%;
  font-family: var(--fairplay);
}
.modal-header button {
  color: var(--couleur-2);
  padding-left: .5rem;
  padding-right: .5rem;
}

.modal-body {
  color:var(--couleur-2);
  padding: 2rem;
}

.statbox-block {
    padding-bottom: .5rem;
}
.statbox-block p{
    margin-bottom: 0;
}
.statbox-welcome {
  display: flex;
  justify-content: space-between;
  padding-left:.5rem;
  padding-right:.5rem;
}
.statbox-welcome .avatar {
  height: 12rem;
  width: auto;
}
.statbox-welcome .welcome-text {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  text-align: end;
}
.statbox-welcome .welcome-text h3 {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  color: var(--couleur-2);
  font-size: 1.2rem;
  text-align: end;
}
.statbox-welcome .welcome-text h3>span:first-child {
  padding-bottom: .5rem;
}
.statbox-legend {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px; 
}
.badge{
    border-radius:0;
}
.badge.clueless{
    grid-area: 1 / 1 / 2 / 2;
    background-color:#ad437d;
}
.badge.dungeoneers {
     grid-area: 1 / 2 / 2 / 3;
    background-color:#084476;
}
.badge.between {
     grid-area: 2 / 1 / 3 / 2;
    background-color:#1a7226;
}
.badge.circlers {
    grid-area: 2 / 2 / 3 / 3;
    background-color:#944ca2;
}
.badge.slaves {
    grid-area: 3 / 1 / 4 / 3;
    background-color:#a27d4c;;
}
.openModalButton {
  position: fixed;
  left: 0;
  top: 15vh; 
  color: var(--couleur-2);
  padding: .6rem;
  font-size:2rem;
}

.openModalButton:hover,
.openModalButton:active,
.openModalButton:focus,
.openModalButton:focus-visible,
.openModalButton:focus-within,
.openModalButton:visited,
.openModalButton:target {
  color: var(--couleur-3);
}
.close:hover,
.close:active,
.close:focus,
.close:focus-visible,
.close:focus-within,
.close:visited,
.close:target {
  color: var(--couleur-3);
}

.modal-body,
.modal-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height:100%;
}

.modal-content .vip {
  margin: 3rem;
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
}
.modal-content .vip a {
  width: 5rem;
  height: 5rem;
  margin: .25rem;  
}
.modal-dialog{
    height:100%;
}
.modal-body .statbox,
.modal-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  margin-bottom: 2.5rem;
}
.statbox .user-line,
.statbox p {
    text-align:justify;
}
.statbox .statbox-block:nth-child(2) p {
  height: 10rem;
  overflow: auto;
  }
.statbox .vipFooter img {
    width:5rem;
    height:5rem;
    object-fit:cover;
}
.statbox .user-line,
.statbox p {
    text-align:justify;
}
.statbox .vipFooter img {
    width:5rem;
    height:5rem;
    object-fit:cover;
}
@media (max-width: 1200px) and (max-height: 900px){
.modal {
  width: 35vw;
  height: 70vh;
}
}
@media (max-width: 800px) and (max-height: 1000px){
.modal {
  width: 40vw;
  height: 60vh;
}
}
@media (max-width: 770px) and (max-height: 500px){
.modal {
  width: 60vw;
  height: 80vh;
  top: 5vh;
}
.openModalButton {
  top: 5vh;
}
.modal-body .statbox {
  overflow-y: auto;
}
}
@media (max-width: 400px) and (max-height: 500px) {
.modal {
  width: 100vw;
  height: 80vh;
  top: 5vh;
}
.openModalButton {
  top: 5vh;
}
.modal-body .statbox {
  overflow-y: auto;
}
}