@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap');
/* RESPONIVE STYLING */
@media (max-width:1200px){

 #tierlistTrue .main .subtitle{
  font-size:12px;
 }
 
 #tierlistTrue .main .tierPostion .headIcon{
  height:8% !important;
  width:7% !important;
 }
 
 #tierlistTrue .tiers h2{
  font-size:19px;
 }
 
 #tierlistTrue .tiers img{
  width:21px;
  height:21px;
 }
 
}
@media (max-width:950px){

    /* Tierlist */
    .tierlist {
        width: 95vw;
        height: auto;
    }

    /* Tier position */
    .tierPostion{
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-left: 0;
        padding-top: 2vw;
    }

    #tierlistTrue .main .tierPostion{
        padding-top:0px;
    }

    /* Tier rank */
    .tierRank{
        position: static;
        margin-bottom: 1vw;
    }

    .tierRankRegular{
        position: static;
        margin-bottom: 1vw;
    }

    #tierlistTrue .main .tierRank{
        width:60px;
        height:60px;
        font-size:21px;
    }

    .tierRankRegular{
        width:60px;
        height:60px;
        font-size:21px;
    }
    /* Player info */
    #tierlistTrue .main .playerInfo{
        margin-right:238px;
    }

    /* Tiers */
    #tierlistTrue .main .tiers{
        margin-left:0px;
        margin-right:128px;
    }

    #tierlistTrue .tiers h2{
        font-size:20px;
    }

    #tierlistTrue .tiers img{
        width:20px;
        height:20px;
    }

    /* Subtitle */
    #tierlistTrue .main .subtitle{
        font-size:12px;
    }

    /* Head icon */
    #tierlistTrue .main .tierPostion .headIcon{
        height:40px;
        width:53px !important;
    }

    #tierlistTrue .main .headIcon{
        transform:translatex(41px) translatey(94px);
    }

    /* Heading */
    #tierlistTrue .main h1{
        margin-top:0px;
    }
     #tierlistTrue{
  min-height:2770px;
  width:418px;
 }

}

@media (max-width:786px){

     #tierlistTrue{
  min-height:2723px;
  transform:translatex(0px) translatey(0px);
 }

 /* Tier postion */
 #tierlistTrue .main .tierPostion{
  padding-left:143px;
  transform:translatex(0px) translatey(0px);
 }
 
 /* Head icon */
 #tierlistTrue .main .headIcon{
  transform:translatex(50px) translatey(78px);
 }
 
 /* Tiers */
 #tierlistTrue .main .tiers{
  margin-right:188px;
 }
  #tierlistTrue .subtitle span{
  font-size:12px;
 }
  header h1{
  font-size:40px;
 }
 
 /* Subtitle */
 header .subtitle{
  font-size:12px;
 }
}

@media (max-width:600px){
    .tierRank{
        display: none !important;
    }
    .tierRankRegular{
        display: none !important;
    }
     #tierlistTrue{
  min-height:2643px;
 }
 
}





*{
    text-align: center;
    font-family:'Arial Black','Arial Bold',Gadget,sans-serif;
}

body{
    background-color: #d8e5ff;
    margin: 0;
    padding: 2vw;
    min-height: 100vh;
    color: #111;
}

header h1{
    margin: 0 0 1.5vw;
    font-size: 3.2vw;
    color: #082b61;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.12);
}

/* Tiers | NOT AI I JUST SORT WITH COMMENTS OMD BRUH */
.tierlist{
        width: 70vw;
        height: 200vw;
        margin: auto;
        background-color: #e3f2fd;
        padding: 0.25vw;
        border-radius: 10px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.headIcon{
  display:inline-block;
  width:3vw;
  height:3vw;
  object-fit:cover;

  padding:1vw;  
  filter:drop-shadow(0 4px 8px rgba(0,0,0,0.3));
}
.tiers{
    margin-left: auto;
    margin-right: 1vw;
    margin-top: 1vw;
    display: flex;
    gap: 1vw;
}
.tierIcon{
 border-style:solid;
 border-width:4px;
 padding: 5px;
 border-radius: 100%;
 float: left;
 background-color: rgb(53, 53, 53);
 width: 2vw;
 height: 2vw;
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
.tierPostion{
 background: linear-gradient(135deg, #ffffff, #e3f2fd);
 margin: 2vw;
 margin-top: 2vw;
 display: flex;
 align-items: center;
 border-radius: 10px;
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
 position: relative;
 padding-left: 7vw;
}
.tierRank{
 position: absolute;
 left: 1.5vw;
 top: 50%;
 transform: translateY(-50%);
 width: 3vw;
 height: 3vw;
 display: grid;
 place-items: center;
background: linear-gradient(135deg, #f9a825, #ffbd52);
 color: #2f1b00;
 border-radius: 50%;
 font-size: 1vw;
 font-weight: 700;
}
.tierRankRegular{
 position: absolute;
 left: 1.5vw;
 top: 50%;
 transform: translateY(-50%);
 width: 3vw;
 height: 3vw;
 display: grid;
 place-items: center;
background: linear-gradient(135deg, #bbbbbb, #5a5a5a);
 color: #2f1b00;
 border-radius: 50%;
 font-size: 1vw;
 font-weight: 700;
}
.tierPostion h1{
 color: #2a2a2a;
 text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
 margin-bottom: 0px;
}
.tierPostion h2{
    margin-bottom: 20px;
}
.points{
    font-size: 0.9vw;
    color: #bcbcbc;
    text-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
    font-family: "Geist", sans-serif;
}
.playerInfo{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25vw;
}
.subtitle{
    font-family: "Geist", sans-serif;
    font-size: 1vw;
    color: #898989;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    text-shadow: 0px 0px 0px rgba(0, 0, 0, 0) !important;
}
/* Tiers Colors */
.tierPostion h2{
 text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}
.HT1{
 border-color:#fed24c;
 color:#fed24c;
}
.LT1{
 border-color:#ffe186;
 color:#ffe186;
}
.HT2{
 border-color:#c0c0c0;
 color: #c0c0c0;
}
.LT2{
 border-color:#c0c0c0;
 color: #c0c0c0;
}
.HT3{
 border-color:#cd7f32;
 color: #cd7f32;
}
.LT3{
 border-color:#cd7f32;
 color: #cd7f32;
}
.HT4{
 border-color:#06ff76;
 color: #06ff76;
}
.LT4{
 border-color:#01843c;
 color: #01843c;
}
.HT5{
 border-color:#492000;
 color: #492000;
}
.LT5{
 border-color:rgb(56, 14, 0);
 color: rgb(56, 14, 0);
}

button {
 background-color: #082b61;
 color: #d8e5ff;
 border: 2px solid #0a4a8f;
 padding: 0.6vw 1.5vw;
 font-size: 0.9vw;
 cursor: pointer;
 border-radius: 5px;
 margin-top: 1vw;
 margin-bottom: 1.5vw;
}

button:hover {
 background-color: #0a4a8f;
}