.rank-icon-img {
    width: 300px;
    height: 300px;
    object-fit: cover;
}

    .rank-icon-img.copper {
        transition: transform 0.6s ease;
        filter: drop-shadow(0 0 20px #673700);
    }

        .rank-icon-img.copper:hover {
            transform: scale(1.05);
            filter: drop-shadow(0 0 20px #b87333);
        }


    .rank-icon-img.silver {
        transition: transform 0.6s ease;
        filter: drop-shadow(0 0 20px #c0c0c0);
    }

        .rank-icon-img.silver:hover {
            transform: scale(1.1);
            filter: drop-shadow(0 0 20px #c0c0c0);
        }

    .rank-icon-img.gold {
        transition: transform 0.6s ease;
        filter: drop-shadow(0 0 20px #ffd700);
    }

        .rank-icon-img.gold:hover {
            transform: scale(1.1);
            filter: drop-shadow(0 0 20px #ffd700);
        }

    .rank-icon-img.platinum {
        transition: transform 0.6s ease;
        filter: drop-shadow(0 0 20px #e5e4e2);
    }

        .rank-icon-img.platinum:hover {
            transform: scale(1.1);
            filter: drop-shadow(0 0 20px #f0f8ff);
        }

    .rank-icon-img.diamond {
        transition: transform 0.6s ease;
        filter: drop-shadow(0 0 20px #b9f2ff);
    }

        .rank-icon-img.diamond:hover {
            transform: scale(1.1);
            filter: drop-shadow(0 0 20px #b9f2ff);
        }

    .rank-icon-img.elite {
        transition: transform 0.6s ease;
        filter: drop-shadow(0 0 20px #9370db);
    }

        .rank-icon-img.elite:hover {
            transform: scale(1.1);
            filter: drop-shadow(0 0 20px #ba55d3);
        }

    .rank-icon-img.master {
        transition: transform 0.6s ease;
        filter: drop-shadow(0 0 20px #8a2be2);
    }

        .rank-icon-img.master:hover {
            transform: scale(1.1);
            filter: drop-shadow(0 0 20px #9932cc);
        }

    .rank-icon-img.challenger {
        transition: transform 0.6s ease;
        filter: drop-shadow(0 0 20px #00ced1);
    }

        .rank-icon-img.challenger:hover {
            transform: scale(1.1);
            filter: drop-shadow(0 0 20px #40e0d0);
        }

    .rank-icon-img.champion {
        transition: transform 0.6s ease;
        filter: drop-shadow(0 0 20px #ff8c00);
    }

        .rank-icon-img.champion:hover {
            transform: scale(1.1);
            filter: drop-shadow(0 0 20px #ffa500);
        }

    .rank-icon-img.supreme {
        transition: transform 0.6s ease;
        filter: drop-shadow(0 0 25px #ff1493);
        width: 330px;
        height: 330px;
    }

        .rank-icon-img.supreme:hover {
            transform: scale(1.12);
            filter: drop-shadow(0 0 25px #ff69b4);
        }



.rank-text {
    font-weight: 900;
    font-size: 1.5rem;
    font-family: "Roboto Mono", monospace;
}


    .rank-text.copper {
        color: #b87333;
        text-shadow: 0 0 4px #914f03;
    }

    .rank-text.silver {
        color: #c0c0c0;
        text-shadow: 0 0 4px #a9a9a9;
    }

    .rank-text.gold {
        color: #ffd700;
        text-shadow: 0 0 5px #b8860b;
    }

    .rank-text.platinum {
        color: #e5e4e2;
        text-shadow: 0 0 5px #afeeee;
    }

    .rank-text.diamond {
        color: #b9f2ff;
        text-shadow: 0 0 6px #87cefa;
    }

    .rank-text.elite {
        color: #9370db;
        text-shadow: 0 0 6px #ba55d3;
    }

    .rank-text.master {
        color: #8a2be2;
        text-shadow: 0 0 6px #9932cc;
    }

    .rank-text.challenger {
        color: #00ced1;
        text-shadow: 0 0 6px #40e0d0;
    }

    .rank-text.champion {
        color: #ff8c00;
        text-shadow: 0 0 6px #ffa500;
    }

    .rank-text.supreme {
        color: #ff1493;
        text-shadow: 0 0 7px #ff69b4;
    }