:root {
    /* Navigation */
    --nav-height: 10vh;
    --nav-padding: 1vh;
    --nav-marginbottom: 2vh;

    --nav-gap: 1vh;
    --nav-img: 8vh;
    --nav-fontsize: 3vh;
    --nav-column1: 8vh;
    --nav-column2: 0.9fr;

    /* General */

    --generalheader-margintop: 2vh;

    /* Character */
    --character-height: auto;

    --band-color: #0b1215;
    --band-color2: #0b1215;
    --band-angle: -14deg;
    --band-thickness: 38%;
    --band-radius: 10px; 

    /* Name */
    --name-margintop: 2vh;
    --name-fontsize: 6vh;

    /* Ranking stats */
    --rsheader-fontsize: 4vh;

    /* Characters */
    --characters-guideheaderfontsize: 3vh;
    --characters-icon: 7vh;

    /* Tourneys */
    --tourney-height: 10vh;

    --tourney-infofontsize: 3vh;
    --tourney-variationheaderfontsize: 1.5vh;
    
    --tourney-crownfontsize: 2vh;
    --tourney-crownmarginright: 1vh;
    
}

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

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

a { all: unset; }

/**/

/* Nav bar */

nav {
    height: var(--nav-height);
    width: 100%;

    padding: var(--nav-padding);
    margin-bottom: var(--nav-marginbottom);
    background-color: #0b1215;
    clip-path: polygon(100% 0, 100% 92%, 49% 97%, 50% 90%, 0 100%, 0 0);
}
.nav {
    display: grid;
    grid-template-columns: var(--nav-column1) var(--nav-column2);
    justify-content: left;
    justify-items: left;

    text-align: center;
    align-items: center;
    gap: var(--nav-gap);
}
nav img {
    height: var(--nav-img);
    width: var(--nav-img);
}
nav h1 {
    font-family: 'Anton';
    color: #ffffff;
    font-size: var(--nav-fontsize);
    font-weight: lighter;
}
a {
    all: unset;
    opacity: 0.8;
    cursor: pointer;
}

/**/

main {
    height: auto;
}

/* Character */

.character-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--character-height);

    background:
    linear-gradient(var(--band-angle),
      transparent calc(50% - var(--band-thickness)/2),
      var(--band-color) 0,
      var(--band-color) calc(50% + var(--band-thickness)/2),
      transparent 0);
}
.character-container img {
    width: 80%;
}

/* General header */
.header {
    display: flex;
    align-content: center;
    justify-content: center;
    margin-top: var(--generalheader-margintop);

    font-family: 'Anton';
    color: #545454;
    font-size: var(--rsheader-fontsize);
}

/* Player name */
.name {
    display: flex;
    align-content: center;
    justify-content: center;
    margin-top: var(--name-margintop);

    font-family: 'Anton';
    color: var(--band-color);
    font-size: var(--name-fontsize);
    overflow: hidden;
}
.sponsor:not(:empty) {
    display: flex;
    align-content: center;
    justify-content: center;
    margin-right: 2vh;

    font-family: 'Anton';
    font-weight: bold;
    color: #33b8f1;
    font-size: var(--name-fontsize);
    overflow: hidden;
}
.sponsor:empty {
    display: none;
}

.top {
    display: flex;
    align-content: center;
    justify-content: center;

    font-family: 'Anton';
    color: #545454;
    font-size: var(--rsheader-fontsize);
}
.top1 {
    color: #ffdb3b;
}
.top2 {
    color: #c1c1c1;
}
.top3 {
    color: #c7732b;
}

/* Ranking Stats */

.rankingstats-container {
    display: flex;
    width: 100%;
    height: auto;
    align-content: center;
    justify-content: center;
}

.rankingstats-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    margin-top: var(--generalheader-margintop);

    background-color: #d9d9d9;
    font-family: 'Anton';
    height: auto;
    width: 80%;
    border-radius: 1vh;
}
.rankingstats-title {
    display: flex;
    justify-content: left;
    align-items: center;
    padding: 0.5vh 2vh;
    font-size: 3vh;
    color: #0b1215;
}
.rankingstats-stat {
    display: flex;
    justify-content: right;
    align-items: center;
    padding: 0.5vh 2vh;
    font-size: 3vh;
    color: #0b1215;
}
.rankingstats-rankcolor {
    color: #0b1215;
}

/* Characters */

.characters-container {
    display: flex;
    width: 100%;
    height: auto;
    align-content: center;
    justify-content: center;
}

.characters-guide {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 60%;
}
.characters-guideheader {
    display: flex;
    justify-content: left;
    align-content: center;

    font-family: 'Anton';
    font-size: var(--characters-guideheaderfontsize);
}
.characters-guideheader2 {
    justify-content: right;
}

.characterspj-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    align-content: center;
    justify-content: center;
    justify-items: center;
    align-items: center;
}
.characters-pj {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border-radius: 4vh;
    width: 80%;
    margin-top: var(--generalheader-margintop);
    padding: 1vh 0vh;
    
    background-color: #d9d9d9;
}

.characters-mostused {
    background-color: #ffde59;
}

.characters-pj img {
    height: var(--characters-icon);
}
.characters-pjheader {
    display: flex;
    justify-content: center;
    align-items: center;

    font-family: 'Anton';
    font-size: var(--characters-guideheaderfontsize);
}

/* Performance */

.performance-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    width: 100%;
}

.performance-boxcontainer {
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    justify-items: center;
}
.performance-boxcontainer3 {
    grid-column: span 2;
}

.performance-box {
    display: grid;
    grid-template-rows: 1fr 1fr;
    width: 80%;
    padding: 2vh 0vh;
    background-color: #d9d9d9;
    margin: var(--generalheader-margintop);
    border-radius: 1vh;
}
.performance-boxtxt {
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    justify-items: center;

    font-family: 'Anton';
    font-size: 4vh;
    color: #0b1215;
}
.performance-boxheader {
    opacity: 0.8;
}

.wins {
    background-color: #00bf63;
}
.losses {
    background-color: #ff5757;
}
.winrate {
    background-color: var(--band-color);
}
.winrate-txt {
    color: var(--band-color2);
}

/* Tourneys */
.tourney-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-content: center;
    justify-items: center;

    height: auto;
    width: 100%;
    cursor: pointer;
}

.tourney {
    all: unset;
    display: grid;
    grid-template-columns: var(--tourney-height) 1fr;

    background-color: #d9d9d9;
    width: 95%;
    margin-top: var(--generalheader-margintop);
    height: var(--tourney-height);
    border-radius: 1vh;
}

.tourney img {
    height: var(--tourney-height);
}

.tourney-infocontainer {
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 0.4fr 1fr;
    font-family: 'Anton';
    color: #0b1215;
    height: var(--tourney-height);
}
.tourney-info {
    display: flex;
    justify-content: left;
    margin-left: 1vh;
    align-items: center;
    align-content: center;
    font-size: var(--tourney-infofontsize);
}
.tourney-infoname {
    grid-column: span 2;
}
.tourney-standing {
    opacity: 0.7;
}

.crown {
    font-size: var(--tourney-crownfontsize);
    margin-right: var(--tourney-crownmarginright);
    color: #ffc400;;
}
.crowndtier {
    font-size: var(--tourney-crownfontsize);
    margin-right: var(--tourney-crownmarginright);
    color: #0b1215;;
}

.tourney-variation {
    display: grid;
    grid-template-columns: 0.2fr 0.5fr 0.1fr 0.5fr;
    grid-template-rows: 1fr 1fr;
    margin-left: 0.3vh;
    margin-bottom: 0.3vh;
    opacity: 0.5;
}

.tourney-variationheader {
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    justify-items: center;
    font-size: var(--tourney-variationheaderfontsize);
}

.dtier-label {
    display: flex;
    font-size: var(--tourney-infofontsize);
    background-color: #d4a600;
    color: #ffffff;
    padding: 2vh;
    padding: 0vh 1vh;
    margin-left: 1vh;
    border-bottom-left-radius: 1vh;
    border-bottom-right-radius: 1vh;
}
.dtier-background {
    background-color: #fdc601;
}

.eloup {
    color: #00bf63;
    margin-left: 1vh;
}
.elodown {
    color: #ff5757;
    margin-left: 1vh;
}

/* Footer */

footer {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas: "center" "left" "right";

    height: auto;
    padding-top: 1vh;
    padding-bottom: 3vh;
    margin-top: 2vh;
    background-color: #0b1215;
}

footer > div {
    margin-top: 0.4vh;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    justify-items: center;
}

footer img {
    height: 5vh;
}

.section-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    justify-items: center;
    align-items: center;
    justify-content: center;
    align-content: center;
}

.footer-header {
    display: block;
    margin: 0;
    line-height: 1;

    font-family: 'Anton';
    color: #ffffff;
    font-size: 1rem;
}

.footer-logo {
    border-right: none;
    border-left: none;
}
.socials {
    display: flex;
    gap: 2vh;
    align-items: center;
}
.socials img {
    height: 1.5rem;
    display: block;
    opacity: 1;
}

.footer-logo {
    grid-area: center;
}
.footer-socials {
    grid-area: right;
}
.footer-contact {
    grid-area: left;
}

/**/

@media (min-width: 1200px) {

    :root {
        /* Navigation */
        --nav-height: clamp(60px, 7vw, 200px);
        --nav-padding: clamp(1px, 1vw, 40px);
        --nav-marginbottom: clamp(10px, 2vw, 140px);

        --nav-gap: clamp(5px, 1vw, 500px);
        --nav-img: clamp(50px, 5vw, 150px);
        --nav-fontsize: clamp(1px, 3.3rem, 100px);
        --nav-column1: clamp(30px, 5vw, 500px);
        --nav-column2: 1fr;

        /* General */

        --generalheader-margintop: 1vh;

        /* Character */
        --character-height: auto;

        --band-color: #0b1215;
        --band-color2: #0b1215;
        --band-angle: 8deg;
        --band-thickness: 50%;
        --band-radius: 40px; 

        /* Name */
        --name-margintop: 1.5vh;
        --name-fontsize: 8vh;

        /* Ranking stats */
        --rsheader-fontsize: 4vh;

        /* Characters */
        --characters-guideheaderfontsize: 3vh;
        --characters-icon: 7vh;

        /* Tourneys */
        --tourney-height: 10vh;

        --tourney-infofontsize: 3vh;
        --tourney-variationheaderfontsize: 1.5vh;
        
        --tourney-crownfontsize: 2vh;
        --tourney-crownmarginright: 1vh;
        
    }


    /**/

    main {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 0.1fr 0.1fr 0.1fr 1fr 1fr;
    }

    .character-container {
        display: flex;
        align-items: center;
        justify-content: center;
        height: var(--character-height);
        background: none;
        grid-row: span 3;
    }
    .character-container img {
        display:block;
        width:auto;              /* importante para tall/skinny */
        max-width:100%;
        height:auto;
        /* no más alto que la ventana menos la barra */
        max-height: calc(100vh - var(--nav-height) - var(--nav-marginbottom) - 2vh);
        object-fit: contain;     /* encajar sin recortar */
    }

    /* Performance */

    .performance-box {
        padding: 1vh 0vh;
    }

    /* Tourney */

    .tourney-variation {
        display: grid;
        grid-template-columns: 0.2fr 0.1fr 0.1fr 0.1fr;
        grid-template-rows: 1fr 1fr;
        margin-left: 1vh;
        margin-bottom: 0.3vh;
        opacity: 0.5;
    }

    /* Footer */

    footer {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr;
        grid-template-areas: "left center right";

        height: auto;
        padding-top: 1vh;
        padding-bottom: 1vh;
        margin-top: 2vh;
        background-color: #0b1215;
    }
    footer > div {
        margin-top: 0.4vh;
        display: flex;
        align-items: center;
        align-content: center;
        justify-content: center;
        justify-items: center;
    }

    footer img {
        height: 4rem;
        cursor: pointer;
    }

    .section-container {
        display: grid;
        grid-template-rows: 1fr 1fr;
        grid-template-columns: 1fr;
        justify-items: center;
        align-items: center;
        justify-content: center;
        align-content: center;
    }

    .footer-header {
        font-family: 'Anton';
        color: #ffffff;
        font-size: 1rem;
    }

    .socials {
        display: flex;
        gap: 2vh;
        justify-content: center;
        align-items: center;
    }
    .socials img {
        cursor: pointer;
        opacity: 1;
        height: 2rem;
    }

    .footer-logo {
        grid-area: center;
    }
    .footer-logo {
        border-right: solid 1px #ffffff;
        border-left: solid 1px #ffffff;
    }
    .footer-socials {
        grid-area: right;
    }
    .footer-contact {
        grid-area: left;
    }

}