a {
  text-decoration: none;
  color: inherit;
}
.background {
    align-items: center;
    /*background-image: url(./logo/background.jpg);*/
    background-color: #353535;
}
.main {
    /*background-color: aqua;*/
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 1355px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 100px;
}
.headers{
    background-color: #222222;
    border-color: #1f1f1f;
    border-radius: 20px;
    border-width: 5px;
    border-style: solid;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 20px;
    width: 100%;
    height: 70px;
}
.player_search{
    /*background-color: lightgray;*/
    background-color: #333333;
    align-content: center;
    align-items: center;
    margin-left: 10px;
    height: 40px;
    width: 200px;
    margin-top: auto;
    margin-bottom: auto;
    border-radius: 20px;
    border-width: 2px;
    border-style: solid;
    border-color: #333333;
}
.player_search_input{
    color:#f1f1f1;
    font-size: 16px;
    border-radius: 20px;
    width: 100%;
    height: 100%;
    background-color: #00000000;
    border-color: #00000000;
}
.logo{
    /*background-color: red;*/
    width: 75%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}
.discord{
    display: flex;
    /*background-color: green;*/
    margin-left: auto;
    align-content: center;
    align-items: center;
    margin-left: 200px;
    margin-right: 10px;
    transition: 0.3s ease;
}
.tierlist{
    margin-top: 50px;
    /*background-color: yellow;*/
    display: flex;
    flex-direction: column;
    width: 100%;
}
.gamemodes{
    /*background-color: lightblue;*/
    display: flex;
    flex-direction: row;
}
.gamemode{
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    border-color: #1f1f1f;
    background-color: #222222;
    border-width: 3px;
    border-bottom-width: 0px;
    border-style: solid;
    /*background-color: lightgreen;*/
    display: flex;
    margin-right: 20px;
    width: 90px;
    height: 70px;
    display: flex;
    align-items: center;
    flex-direction: column;
}
.list{
    /*background-color: orange;*/
    background-color: #222222;
    border-color: #1f1f1f;
    border-radius: 5px;
    border-width: 5px;
    border-style: solid;
    display: flex;
    flex-direction: column;
    height: 9000px;
    margin-bottom: 40px;
}
.list_{
    /*background-color: orange;*/
    background-color: #222222;
    border-color: #1f1f1f;
    border-radius: 5px;
    border-width: 5px;
    border-style: solid;
    display: flex;
    flex-direction: column;
    margin-bottom: 40px;
}
.info{
    /*background-color: purple;*/
    display: flex;
    flex-direction: row;
    margin-top: 15px;
    height: 35px;
    margin-left: 35px;
    margin-right: 35px;
}
.info_{
    /*background-color: purple;*/
    display: flex;
    flex-direction: row;
    margin-top: 15px;
    height: 35px;
    margin-left: 35px;
    margin-right: 35px;
}
.players{
    /*background-color: pink;*/
    margin-left: 35px;
    margin-right: 35px;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.tiers_{
    /*background-color: pink;*/
    margin-left: 35px;
    margin-right: 35px;
    display: flex;
    flex-direction: row;
}
.tier_{
    /*background-color: pink;*/
    margin-left: 5px;
    margin-right: 5px;
    display: flex;
    flex-direction: column;
    width: 100%;
}
.indicator_tier1{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 85px;
    background-color: #ffd000;
    color: black;
    font-weight: bolder;
    font-size: 30px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-color: #c9c500;
    border-width: 2px;
    border-style: solid;
    border-bottom-width: 0px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    margin-bottom: 7px;
}
.indicator_tier2{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 85px;
    background-color: #8b969e;
    color: black;
    font-weight: bolder;
    font-size: 30px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-color: #4c5f63;
    border-width: 2px;
    border-style: solid;
    border-bottom-width: 0px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    margin-bottom: 7px;
}
.indicator_tier3{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 85px;
    background-color: #ff7b00;
    color: black;
    font-weight: bolder;
    font-size: 30px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-color: #aa4401;
    border-width: 2px;
    border-style: solid;
    border-bottom-width: 0px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    margin-bottom: 7px;
}
.indicator_tier4{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 85px;
    background-color: #444444;
    color: black;
    font-weight: bolder;
    font-size: 30px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-color: #1f1f1f;
    border-width: 2px;
    border-style: solid;
    border-bottom-width: 0px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    margin-bottom: 7px;
}
.indicator_tier5{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 85px;
    background-color: #444444;
    color: black;
    font-weight: bolder;
    font-size: 30px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-color: #1f1f1f;
    border-width: 2px;
    border-style: solid;
    border-bottom-width: 0px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    margin-bottom: 7px;
}
.players_{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}
.player_{
    height: 35px;
    width: calc(100% + 4px);
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 3px;
    border-radius: 10px;
    color: black;
    cursor: pointer;
    transition: 0.3s ease;
}
.player_:hover{
    background-color: #ff7b00;
    cursor: pointer;
    scale: 1.1;
}
.high_tier{
    background-color: #ffd000;
}
.low_tier{
    background-color: #929292;
}
.player{
    width: 100%;
    height: 75px;
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: #333333;
    transition: 0.15s ease;
    border-radius: 15px;
    margin-bottom: 4px;
    margin-top: 4px;
    border-color: #1f1f1f;
    border-width: 2px;
    border-style: solid;
    cursor: pointer;
}
.num{
    margin-left: 15px;
    margin-right: 20px;
    font-size: 25px;
    font-weight: bolder;
    max-width: 25px;
    width: 30px;
}
.name{
    display: flex;
    flex-direction: row;
    margin-left: 15px;
    margin-right: 20px;
    font-size: 25px;
    font-weight: bolder;
    max-width: 200px;
    width: 250px;
}
.bust{
    width:65px;
    height:65px;
}
.points{
    margin-left: 40px;
    font-size: 15px;
    font-weight: lighter;
}
.sep{
    width: 400px;
}
.tier{
    margin-left:0px;
    margin-right: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 50px;
    /*background-color: red;*/
}
.retired{
    background-color: #8d36ff;
    color:black;
    border-radius: 5px;
    font-weight: bold;
    width: 42px;
    display: flex;
    justify-content: center;
}
.t1{
    background-color: #ffd000;
    color:black;
    border-radius: 5px;
    font-weight: bold;
    width: 40px;
    display: flex;
    justify-content: center;
    z-index: 1;
}
.t1::before{
    content: "";
    background: linear-gradient(
        45deg,
        #ffd000ff,#ffd00000,#ffd00000,#ffd000ff,#ffd00000,#ffd00000,#ffd000ff,#ffd00000,#ffd00000,#ffd000ff
    );
    position:absolute;
    top:-1px;
    left:-1px;
    background-size: 600%;
    z-index: -1;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    filter: blur(8px);
    animation: shine 20s linear infinite;
    border-radius: 5px;
    opacity: 0.65;
}
@keyframes shine {
    0% {background-position: 0 0;}
    100% {background-position: 400% 0;}
}
.t2{
    background-color: #07d2ec;
    color:black;
    border-radius: 5px;
    font-weight: bold;
    width: 40px;
    display: flex;
    justify-content: center;
}
.t3{
    background-color: #ff6600;
    color:black;
    border-radius: 5px;
    font-weight: bold;
    width: 40px;
    display: flex;
    justify-content: center;
}
.t4-5{
    background-color: #646464;
    color:white;
    border-radius: 5px;
    font-weight: bold;
    width: 40px;
    display: flex;
    justify-content: center;
}
.unranked{
    color:white;
    border-radius: 5px;
    font-weight: bold;
    width: 44px;
    border-width: 3px;
    border-style:dashed;
    border-color: #855b00;
    display: flex;
    justify-content: center;
}
.banner{
    position: fixed;
    top: 5px;
    left: 5px;
    display: none;
}
.credits{
    position: relative;
    bottom: 1%;
    left: 5%;
    width: 90%;
    background: #22222200;
    height: 150px;
}
div{
    font-family:"JetBrains Mono", monospace;
    color: #f1f1f1;
}
.gamemode:hover{
    background-color: #333333;
    cursor: pointer;
    /*animation pour les players*/
}
.discord:hover{
    scale: 1.2;
    cursor: pointer;
}
.player:hover{
    background-color: #444444;
    border-color: #ffe600;
    cursor: pointer;
    translate: -15px 0px;
}



.tier {
  position: relative;
  cursor: pointer;
}

/* Le pseudo-élément qui affiche le tooltip */
.tier::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 125%; /* au-dessus du bouton */
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: white;
  padding: 6px 8px;
  border-radius: 4px;
  white-space: nowrap;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  z-index: 1000;
}

/* La petite flèche */
.tier::before {
  content: "";
  position: absolute;
  bottom: 115%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #333;
  opacity: 0;
  transition: opacity 0.3s;
}

/* Afficher le tooltip au survol */
.tier:hover::after,
.tier:hover::before {
  opacity: 1;
}

.search_result{
    display: flex;
    flex-direction: column;
    background-color: #222222f0;
    border-radius: 10px;
    border-color: #1f1f1f;
    border-width: 2px;
    border-style: solid;
    position: fixed;
    top: calc(50% - 250px);
    left: calc(50% - 200px);
    /*display: none;*/
    z-index: 3;
    width: 400px;
    height: 500px;
    align-items: center;
}

.search_result_bust{
    width: 100px;
    height: 100px;
    margin-top: 20px;
    border-radius: 50%;
}
.search_result_name{
    font-size: 25px;
    font-weight: bolder;
    max-width: 200px;
    margin-top: 10px;
}
.search_result_points{
    font-size: 18px;
    font-weight: bold;
    margin-top: 5px;
    color: gold;
}
.EU{
    background-color: rgb(0, 179, 0);
    color:black;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    width: 20px;
    font-size: 16px;
    height: 20px;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 10px;
}
.NA{
    background-color: rgb(206, 58, 22);
    color:black;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    width: 20px;
    font-size: 16px;
    height: 20px;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 10px;
}
.AS{
    background-color: rgb(4, 0, 255);
    color:black;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    width: 20px;
    font-size: 16px;
    height: 20px;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 10px;
}
.AF{
    background-color: rgb(255, 238, 0);
    color:black;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    width: 20px;
    font-size: 16px;
    height: 20px;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 10px;
}
.EU_{
    background-color: rgb(0, 179, 0);
    color:black;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    width: 40px;
    font-size: 20px;
    height: 30px;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 10px;
}
.NA_{
    background-color: rgb(206, 58, 22);
    color:black;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    width: 40px;
    font-size: 20px;
    height: 30px;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 10px;
}
.AS_{
    background-color: rgb(4, 0, 255);
    color:black;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    width: 40px;
    font-size: 20px;
    height: 30px;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 10px;
}
.AF_{
    background-color: rgb(255, 238, 0);
    color:black;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    width: 40px;
    font-size: 20px;
    height: 30px;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 10px;
}