* { padding: 0; margin: 0; box-sizing: border-box; }
a { all: unset; }

@font-face {
    font-family: 'Anton';
    src: url('../Media/Anton-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Garet';
    src: url("../Media/Garet-Book.otf") format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Desktop first (cry about it) */

:root {
    /* Header */
    --header-imgsize: clamp(10px, 15rem, 35vh);
    --header-fs: clamp(10px, 2rem, 5vh);
    --header-margin: 1rem 0rem;
    --header-padding: 1rem 0rem;

    /* Search bar and info */
    --lastupdated-fs: clamp(10px, 1.2rem, 3vh);
    --lastupdated-margin: 1rem;

    --showing-fs: clamp(10px, 1.2rem, 3vh);
    --showing-margin: 2rem;

    /* Players Container */
    --playercontainer-padding: 1rem 0rem;

    /* Player row */
    --playerrow-height: clamp(10px, 6vw, 200px);

    --playerrow-width: 70%;
    --playerrow-bg: #0b1215;
    --playerrow-margin: 0.5rem 0rem;

    --playerinfo-gap: 1rem;
    /* Top variations */
    --top-fs: clamp(20px, 3.5vw, 100px);
    --top-10color: #8C52FF;
    --top-25color: #40a9ff;
    --top-50color: #4fff2c;
    --top-50pluscolor: #9b9b9b;
    
    --name-fs: clamp(20px, 2.6vw, 100px);
    --sponsor-fs: clamp(20px, 2.6vw, 100px);
    --sponsor-marginright: 0.2rem;
    --rank-fs: clamp(10px, 1.4vw, 50px);
    --rank-color: #0cc0df;
    --flag-height: clamp(10px, 2vw, 100px);
    --variation-fs: clamp(10px, 2vw, 100px);

    /* Pagination */
    --pag-width: 50%;
    --pag-borderradius: 10vh;
    --pag-padding: 1rem 2rem;
    --pag-circle: clamp(10px, 3rem, 8vh);
    --pag-fs: clamp(10px, 2rem, 6vh);
    --pag-margin: 4rem;

    /* Footer */
    --generalheader-color: #ced0d0;
    --footer-imgwidth: 10rem;
    --footer-padding: 2rem 20%;
    --footer-headerfs: clamp(10px, 1.6rem, 4vh);
    --footer-linkfs: 1rem;
    --footer-gap: 0.5rem;
    --footer-margintop: 2rem;
}

body {
    background: #222222;
}

/* Header */

.header-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    justify-items: center;
    align-content: center;
    align-items: center;
    text-align: center;
    height: auto;
    margin: var(--header-margin);
    padding: var(--header-padding);
    
    background: #8C52FF;
    background: linear-gradient(90deg, rgba(140, 82, 255, 1) 0%, rgba(92, 225, 230, 1) 100%);
}
.header-container img {
    width: var(--header-imgsize);
}
h1 {
    color: #ffffff;
    font-family: 'Garet';
    font-weight: bolder;
    font-size: var(--header-fs);
}

/* Search bar and info */

.input-container {
    display: flex;
    justify-items: center;
    align-items: center;
    justify-content: center;
    align-content: center;
}

.searchicon {
    color: #ffffff;
    font-size: 2rem;
    margin-right: 0.5rem;
}

input[type=text] {
    all: unset;
    border-radius: 1vh;
    background-color: #0b1215;

    padding: 0.3rem 2rem;
    padding-left: 0.4rem;

    color: #ffffff;
    font-family: 'Garet';
    font-size: 2rem;
}

.lastupdated {
    color: #ffffff;
    font-family: 'Garet';
    font-weight: bolder;
    text-align: right;
    opacity: 0.5;

    font-size: var(--lastupdated-fs);
    margin: var(--lastupdated-margin);
}

/* Showing from-to */
.showing {
    color: #ffffff;
    font-family: 'Garet';
    font-weight: normal;
    text-align: center;
    opacity: 0.5;
    font-style: italic;

    font-size: var(--showing-fs);
    margin-top: var(--showing-margin);
}

/* Players */

.players-container {
    display: flex;
    flex-direction: column;
    height: auto;
    width: 100%;
    justify-items: center;
    justify-content: center;
    align-items: center;
    align-content: center;
    padding: var(--playercontainer-padding);
}

.player-row {
    display: grid;
    height: var(--playerrow-height);
    width: var(--playerrow-width);
    background-color: var(--playerrow-bg);
    border-radius: 2vh;
    margin: var(--playerrow-margin);
    transition: all 0.2s ease;

    grid-template-columns: 10% 54% 6% 6% 24%;
}
.player-row:hover {
    cursor: pointer;
    box-shadow: 0 0 20px 5px #0b12156c;
    transform: translateY(-5px);
}

.top {
    text-align: center;
    justify-content: center;
    align-content: center;
    height: var(--playerrow-height);

    border-top-left-radius: 2vh;
    border-bottom-left-radius: 2vh;
    overflow: hidden;

    font-family: 'Anton';
    font-size: var(--top-fs);
    color: #0b1215;

    background-color: #8C52FF;
    clip-path: polygon(0 0, 93% 0, 100% 100%, 0% 100%);
}
/*Top 3*/
.first {
    overflow: hidden;
    position: relative;
    z-index: 0;

    background: #ffee33;
    background: linear-gradient(90deg, rgba(255, 238, 51, 1) 0%, rgba(255, 215, 18, 1) 50%, rgba(255, 174, 0, 1) 100%);
    
    transition: all 0.3s ease;
}
.first:hover {
    cursor: pointer;
    box-shadow: 0 0 20px 5px #ffae00;
}

.second {
    overflow: hidden;
    position: relative;
    z-index: 0;
    
    background: #c4c4c4;
    background: linear-gradient(90deg, rgba(196, 196, 196, 1) 0%, rgba(184, 184, 184, 1) 50%, rgba(135, 135, 135, 1) 100%);

    transition: all 0.3s ease;
}
.second:hover {
    cursor: pointer;
    box-shadow: 0 0 20px 5px #878787;
}

.third {
    overflow: hidden;
    position: relative;
    z-index: 0;


    background: #cf7430;
    background: linear-gradient(90deg, rgba(207, 116, 48, 1) 0%, rgba(181, 113, 31, 1) 50%, rgba(161, 67, 0, 1) 100%);

    transition: all 0.3s ease;
}
.third:hover {
    cursor: pointer;
    box-shadow: 0 0 20px 5px #A14300;
}

.top3 {
    background-color: #ffffff;
    color: #0b1215;
}
.top10 {
    background-color: var(--top-10color);
}
.top25 {
    background-color: var(--top-25color);
}
.top50 {
    background-color: var(--top-50color);
}
.top50plus {
    background-color: var(--top-50pluscolor);
}
.player-info {
    display: flex;
    align-items: center;
    gap: var(--playerinfo-gap);
    padding-left: var(--playerinfo-gap);
}
.name {
    text-align: left;
    justify-content: center;
    align-content: center;

    font-family: 'Anton';
    font-size: var(--name-fs);
    color: #ffffff;
        text-overflow: ellipsis;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
}
.name3 {
    color: #0b1215;
}
.sponsor:not(:empty) {
    font-family: 'Anton';
    color: #fac932;
    font-weight: bolder;
    font-size: var(--sponsor-fs);  
    margin-right: var(--sponsor-marginright);
}
.sponsor:empty {
    display: none;
}
.rank {
    text-align: left;
    justify-content: center;
    align-content: center;

    font-family: 'Anton';
    font-size: var(--rank-fs);
    color: var(--rank-color);
}
.rank3 {
    color: #0b1215;
}
.rank10 {
    color: var(--top-10color);
}
.rank25 {
    color: var(--top-25color);
}
.rank50 {
    color: var(--top-50color);
}
.rank50plus {
    color: var(--top-50pluscolor);
}

.flag {
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    justify-items: center;
}
.flag img {
    height: var(--flag-height);
    border: 1px solid #ffffff;
}

.variation {
    text-align: center;
    justify-content: center;
    align-content: center;

    font-family: 'Anton';
    font-size: var(--variation-fs);
    color: #ffffff;
}
.up {
    color: #4aff44;
}
.down {
    color: #ff3535;
}
.null {
    color: #50aaff;
}
.character {
    overflow: hidden;
    border-radius: 1.5vh;
}
.character img {
    display: block;
    height: var(--playerrow-height);
    z-index: auto;
    object-fit: cover;
}

/**/
.pagination {
    display: grid;
    grid-template-columns: var(--pag-circle) 1fr var(--pag-circle);
    width: var(--pag-width);
    border-radius: var(--pag-borderradius);
    background-color: #0b1215;
    padding: var(--pag-padding);
    margin-top: var(--pag-margin);
    align-items: center;
}

.pag-arrows {
    display: flex;
    width: var(--pag-circle);
    height: var(--pag-circle);
    font-size: var(--pag-fs);
    color: #5ce1e6;
    border-radius: 50%;
    background-color: none;
    justify-content: center;
    justify-items: center;
    align-items: center;
    align-content: center;
    text-align: center;
    cursor: pointer;

    transition: all 0.1s ease;
}
.pag-arrows:hover {
    background-color: #333333b4;
}

.pag-numbers {
    display: flex;
    font-family: 'Anton';
    width: var(--pag-circle);
    height: var(--pag-circle);
    font-size: var(--pag-fs);
    color: #ffffff;
    border-radius: 50%;
    background-color: none;
    justify-content: center;
    justify-items: center;
    align-items: center;
    align-content: center;
    text-align: center;
    cursor: pointer;

    transition: all 0.1s ease;
}
.pag-numbers.current-page {
    background-color: #5ce1e6;
    color: #0b1215;
}

.pag-numbers:hover {
    background-color: #333333b4;
}

.pages {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-content: center;
    justify-items: center;
    align-items: center;
}

/* Footer */

footer {
    height: auto;
    background-color: #0b1215;
    margin-top: var(--footer-margintop);

    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    padding: var(--footer-padding)
}
footer img {
    width: var(--footer-imgwidth);
}
.footer-header {
    font-family: 'Garet';
    font-size: var(--footer-headerfs);
    color: var(--generalheader-color);
    font-weight: bold;
}
.footer-link {
    all: unset;
    font-family: 'Garet';
    font-size: var(--footer-linkfs);
    color: var(--generalheader-color);
    cursor: pointer;
    transition: all 0.2s ease;
}
.footer-link:hover {
    text-decoration: underline;
    color: #eeeeee;
}

.footer-column {
    display: flex;
    flex-direction: column;
    align-content: center;
    text-align: left;
    gap: var(--footer-gap);
}

.footer-contact {
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
    justify-items: center;
    text-align: center;
    gap: var(--footer-gap);
}

/* Mobile */

@media (max-width: 1024px) { 
    :root {
        /* Header */
        --header-imgsize: 10rem;
        --header-fs: 1rem;
        --header-margin: 1rem 0rem;
        --header-padding: 1rem 0rem;

        /* Search bar and info */
        --lastupdated-fs: 0.6rem;
        --lastupdated-margin: 1rem;

        --showing-fs: 0.6rem;
        --showing-margin: 2rem;

        /* Players Container */
        --playercontainer-padding: 1rem 0rem;

        /* Player row */
        --playerrow-height: 8vw;

        --playerrow-width: 90%;
        --playerrow-bg: #0b1215;
        --playerrow-margin: 0.2rem 0rem;

        --playerinfo-gap: 1rem;
        /* Top variations */
        --top-fs: 3.5vw;
        --top-10color: #8C52FF;
        --top-25color: #40a9ff;
        --top-50color: #4fff2c;
        --top-50pluscolor: #9b9b9b;
        
        --name-fs: 4vw;
        --sponsor-fs: 4vw;
        --sponsor-marginright: 0.2rem;
        --rank-fs: 2vw;
        --rank-color: #0cc0df;
        --flag-height: 2.8vw;
        --variation-fs: 2vw;

        /* Pagination */
        --pag-width: 90%;
        --pag-borderradius: 10vh;
        --pag-padding: 0.5rem 1rem;
        --pag-circle: clamp(10px, 1.8rem, 8vh);
        --pag-fs: clamp(10px, 0.9rem, 6vh);
        --pag-margin: 2rem;

        /* Footer */
        --generalheader-color: #ced0d0;
        --footer-imgwidth: 4rem;
        --footer-padding: 3rem 5%;
        --footer-headerfs: 1rem;
        --footer-linkfs: 0.8rem;
        --footer-gap: 0.3rem;
        --footer-margintop: 1rem;
    }

    .lastupdated {
        text-align: center;
    }

    .first {
        width: 90%;
    }
    .first {
        transform: translateY(0);
    }
    .second {
        width: 90%;
    }
    .second:hover {
        transform: translateY(0);
    }
    .third {
        width: 90%;
    }
    .third:hover {
        transform: translateY(0);
    }

    .top {
        border-top-left-radius: 1vh;
        border-bottom-left-radius: 1vh;
    }
    .flag img {
        border: none;
    }

    .player-row {
        border-radius: 1vh;
    }
    .player-row:hover {
        transform: translateY(0);
        box-shadow: none;
    }

    input[type=text] {
        all: unset;
        border-radius: 1vh;
        background-color: #0b1215;

        padding: 0.1rem 1rem;
        padding-left: 0.2rem;

        color: #ffffff;
        font-family: 'Garet';
        font-size: 1.3rem;
    }

    .searchicon {
        color: #ffffff;
        font-size: 1.3rem;
        margin-right: 0.2rem;
    }

    .pag-arrows {
        background-color: #333333de;
    }
    .pag-numbers {
        background-color: #333333de;
    }

    /* Footer */

    footer {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr;
    }

    .footer-img {
        display: none;
    }
    footer img {
        display: none;
    }

    .footer-column {
        text-align: center;
    }
}