* { 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 {
    --bg-color: #222222;
    --generalheader-color: #ced0d0; 
    /* Landing */
    --landing-height: auto;
    --landing-bgnamefs: clamp(10px, 13rem, 25vh);
    --landing-nameheight: auto;
    --landing-namefs: clamp(10px, 4rem, 7vh);
    --landing-namemargin: 3rem;

    --landing-topfs: 6rem;
    --landing-topmargin: 3rem;
    --landing-topwidth: 16rem;
    --landing-topheight: 10rem;
    --sponsor-marginright: 1.2rem;
    --profile-socialsmargin: 2rem;
    --profile-socialsfs: 2rem;

    /* Stats */
    --page-max: 1000px; --gutter: clamp(12px, 4vw, 48px);
    --box-bgcolor: #0b1215;
    --box-statcolor: #162227;
    --box-borderradius: 1vh;
    --box-padding: 0.5rem;

    --profile-boxmargin: 0rem 2rem;
    --profile-headerfs: 2rem;
    --profile-headermargin: 1rem 0rem;

    --statbox-headerfs: 2rem;
    --statbox-headermargin: 0.8rem 0rem;
    
    --statbox-statfs: 1.8rem;
    --statbox-statpadding: 0.1rem 0.5rem;
    --statbox-statmargin: 0.5rem 0rem;

    /* Characters */

    --character-containergap: 0.2rem;
    --character-containerpadding: 1rem 2rem;
    --character-containermargin: 0rem 1rem;

    --character-iconwidth: 8rem;

    --character-usagepercentfs: 1.8rem;
    --character-usagegamesfs: 1.4rem;

    /* Tournaments */

    --tournament-maxheight: 30.5rem;
    --tournament-rowmargin: 0.5rem 0rem;
    --tournament-nameplacementfs: 2.2rem;
    --tournament-nameplacementpadding: 0.5rem;
    --tournament-statfs: 1.2rem;

    /* Sets */
    --sets-characterswidth: 2.2rem;
    --sets-playernamefs: 2.3rem;
    --sets-playernamepadding: 0.5rem;
    --sets-phasefs: 1rem;
    --sets-statfs: 0.8rem;
    --sets-statmargin: 1rem 0rem;
    --sets-scorefs: 5rem;
    --sets-scoreheight: 7rem;

    /* Modal Tournaments sets */

    --modal-tournament-maxheight: 10rem;
    --modal-tournament-rowmargin: 0.5rem 0rem;
    --modal-tournament-nameplacementfs: 2rem;
    --modal-tournament-nameplacementpadding: 0.5rem;
    --modal-tournament-statfs: 1rem;

    --modal-sets-characterswidth: 2.2rem;
    --modal-sets-playernamefs: 2.3rem;
    --modal-sets-playernamepadding: 0.5rem;
    --modal-sets-phasefs: 1rem;
    --modal-sets-statfs: 0.8rem;
    --modal-sets-statmargin: 1rem 0rem;
    --modal-sets-scorefs: 5rem;
    --modal-sets-scoreheight: 7rem;

    /* 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;

    /* Customization */
    --top-1color: #ffe323;
    --top-2color: #c0c0c0;
    --top-3color: #c7732b;
    --top-10color: #8C52FF;
    --top-25color: #40a9ff;
    --top-50color: #4fff2c;
    --top-50pluscolor: #9b9b9b;
}

body {
    background-color: var(--bg-color);
}

/* Main and Landing profile */

.landing {
    position: relative;
    display: flex;
    justify-content: center;
    justify-items: center;
    align-content: center;
    align-items: center;

    height: var(--landing-height);
    background-color: var(--color1);
}
.bg-name {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    font-family: 'Anton';
    font-size: var(--landing-bgnamefs);
    color: var(--color2);
    overflow: hidden;
    cursor: default;
}
.landing-main {
    position: relative;
    z-index: 1;
    object-fit: contain;
    height: clamp(1rem, 40rem, 70vh);
    width: auto;
}

.landing-name {
    height: var(--landing-nameheight);
    background: #8C52FF;
    background: linear-gradient(90deg, rgba(140, 82, 255, 1) 0%, rgba(92, 225, 230, 1) 100%);
    color: #0b1215;
    font-family: 'Anton';
    text-align: center;
    align-content: center;
    font-size: var(--landing-namefs);
    margin-bottom: var(--landing-namemargin);
}
.sponsor:not(:empty) {
    font-family: 'Anton';
    color: #fac932;
    font-weight: bolder;
    font-size: var(--landing-namefs); 
    margin-right: var(--sponsor-marginright);
}
.sponsor:empty {
    display: none;
}

.top {
    position: absolute;
    font-family: 'Anton';
    align-self: self-end;
    left: 70%;
    z-index: 2;
    font-size: var(--landing-topfs);
    margin: var(--landing-topmargin);
    width: var(--landing-topwidth);
    height: var(--landing-topheight);
    text-align: center;
    align-content: center;
    background-color: #ffffff;
    clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}
.back {
    all: unset;
    position: absolute;
    font-family: 'Anton';
    align-self: self-start;
    z-index: 4;
    text-align: center;
    align-content: center;
    margin: 1rem;
    left: 1%;
    font-size: 4rem;
    color: #ffffff;
    text-shadow: 0 4px 7px rgba(0,0,0,.8);
    cursor: pointer;
    transition: all 0.2s ease;
}

.back:hover {
    transform: translateX(5px);
    color: #e2e2e2;
}

.top1 {
    background-color: var(--top-1color);
}
.top2 {
    background-color: var(--top-2color);
}
.top3 {
    background-color: var(--top-3color);
}
.top10 {
    background-color: var(--top-10color);
}
.top25 {
    background-color: var(--top-25color);
}
.top50 {
    background-color: var(--top-50color);
}
.top50plus {
    background-color: var(--top-50pluscolor);
}

/* Stats */

main {
    width: min( calc(100% - var(--gutter)*2), var(--page-max) );
    margin-inline: auto;
}

/* Block Layouts */

.profile-doublebox {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.profile-doublebox > div {
    margin: var(--profile-boxmargin);
}

.profile-singlebox {
    display: grid;
    grid-template-columns: 1fr;
}
.profile-singlebox {
    margin: var(--profile-boxmargin);
}

.profile-header {
    font-family: 'Anton';
    text-align: center;
    align-content: center;
    color: var(--generalheader-color);
    font-size: var(--profile-headerfs);
    margin: var(--profile-headermargin);
}
.player-socials {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    text-align: center;
    align-content: center;
    align-items: center;
    justify-content: center;
    justify-items: center;
    margin: var(--profile-socialsmargin);
}
.player-socialslink {
    font-family: 'Anton';
    color: #ffffff;
    text-decoration: underline;
    font-size: var(--profile-socialsfs);
    transition: all 0.2s ease;
    cursor: pointer;
}
.player-socialslink:hover {
    color: #c4c4c4;
}

.player-socials img {
    height: var(--profile-headerfs);
    border: 1px solid white;
    border-radius: 0.4rem;
}

/* Common Stat box */

.stat-box {
    background-color: var(--box-bgcolor);
    grid-template-rows: 25% 25% 25% 25%;
    height: auto;
    padding: var(--box-padding);
    border-radius: var(--box-borderradius);
}
.stat-box-header {
    color: var(--generalheader-color);
    text-align: center;
    align-content: center;
    align-items: center;
    font-family: 'Anton';
    font-size: var(--statbox-headerfs);
    margin: var(--statbox-headermargin);
}
.stat-box-stat {
    display: flex;
    background-color: var(--box-statcolor);
    font-family: 'Anton';
    color: #ffffff;
    font-size: var(--statbox-statfs);
    padding: var(--statbox-statpadding);
    margin: var(--statbox-statmargin);
    justify-content: space-between;
}

/* Single boxes */

/* Character usage */
.characterusage-box {
    height: auto;
    padding: var(--box-padding);
    background-color: var(--box-bgcolor);
    border-radius: var(--box-borderradius);
}
.characterusage-grid {
    display: flex;
    flex-direction: row;
    justify-content: center;
    height: auto;
}
.character-container {
    display: flex;
    flex-direction: column;
    gap: var(--character-containergap);
    background-color: var(--box-statcolor);
    padding: var(--character-containerpadding);
    margin: var(--character-containermargin);
}

.character-icon {
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    justify-items: center;
}
.character-icon img {
    width: var(--character-iconwidth);
}
.character-usagepercent {
    font-family: 'Anton';
    font-size: var(--character-usagepercentfs);
    color: #ffffff;
    text-align: center;
    align-content: center;
}
.character-usagegames {
    font-family: 'Anton';
    font-size: var(--character-usagegamesfs);
    color: var(--generalheader-color);
    text-align: center;
    align-content: center;
}

.no-characters {
    font-family: 'Anton';
    font-size: var(--character-usagegamesfs);
    color: var(--box-statcolor);
    padding: 4rem 0rem;
}

/* Tournaments Box */

.tournament-box {
    height: auto;
    max-height: var(--tournament-maxheight);
    grid-auto-rows: auto;
    padding: var(--box-padding);
    background-color: var(--box-bgcolor);
    border-radius: var(--box-borderradius);
    overflow-y: auto;
}

.tournament-box{ scrollbar-width: thin; scrollbar-color:#2b3240 #121821; }
.tournament-box::-webkit-scrollbar{ width: 10px; }
.tournament-box::-webkit-scrollbar-thumb{ background:#2b3240; border-radius:8px; border:2px solid #121821; }
.tournament-box::-webkit-scrollbar-track{ background:#121821; }

.tournament {
    display: grid;
    background-color: var(--box-statcolor);
    margin: var(--tournament-rowmargin);
    padding: var(--box-padding);

    grid-template-columns: 15% 53% 7% 10% 5% 10%;
    grid-template-rows: 2fr 1fr 1fr;
    cursor: pointer;
}

.tournament-logo {
    grid-row: span 3;
}
.tournament-logo img {
    display: block;
    width: 100%;
    height: auto;
}
.tournament-name {
    grid-column: span 3;

    font-family: 'Anton';
    font-size: var(--tournament-nameplacementfs);
    color: #FFFFFF;
    text-align: left;
    padding-left: var(--tournament-nameplacementpadding);
    align-content: center;
    
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    min-width: 0;
    max-width: 100%;
}
.tournament-date {
    font-family: 'Anton';
    font-size: var(--tournament-statfs);
    color: var(--generalheader-color);
    text-align: right;
    overflow: none;
}
.tournament-placement {
    grid-row: span 2;

    font-family: 'Anton';
    font-size: var(--tournament-nameplacementfs);
    color: var(--generalheader-color);
    text-align: left;
    padding-left: var(--tournament-nameplacementpadding);
    align-content: center;
}
.tournament-statheader {
    font-family: 'Anton';
    font-size: var(--tournament-statfs);
    color: var(--generalheader-color);
    text-align: left;
    align-content: center;
}
.tournament-stat {
    font-family: 'Anton';
    font-size: var(--tournament-statfs);
    color: var(--generalheader-color);
    text-align: center;
    align-content: center;
}

/* Sets */

.sets-box {
    height: auto;
    grid-auto-rows: auto;
    padding: var(--box-padding);
    background-color: var(--box-bgcolor);
    border-radius: var(--box-borderradius);
}
.set-recent {
    display: grid;
    grid-template-columns: 44% 12% 44%;
    align-items: center;

    margin: var(--tournament-rowmargin);
    background-color: var(--box-statcolor);
}
.set-recent div {
    min-height: 0;
}
/**/
.set-player-left {
    display: grid;
    grid-template-columns: 80% 20%;
    grid-template-rows: auto auto;
}
.set-info-left {
    display: grid;
    grid-template-columns: 1fr;
}
.set-characters-left {
    align-content: center;
    padding-left: var(--sets-playernamepadding);
}
.set-characters-left img {
    width: var(--sets-characterswidth);
}

.set-tournament {
    display: grid;
    grid-template-rows: 90% 10%;
}
.set-score {
    font-family: 'Anton';
    display: flex;
    font-size: var(--sets-scorefs);
    height: var(--sets-scoreheight);
    align-content: center;
    justify-content: center;
    align-items: center;
    justify-items: center;
    grid-row: span 2;
}

.set-player-right {
    display: grid;
    grid-template-columns: 20% 80%;
    grid-template-rows: auto auto;
}
.set-info-right {
    display: grid;
    grid-template-columns: 1fr;
}
.set-characters-right {
    align-content: center;
    text-align: right;
    padding-right: var(--sets-playernamepadding);
}
.set-characters-right img {
    width: var(--sets-characterswidth);
}
/**/
.set-playername-left {
    font-family: 'Anton';
    font-size: var(--sets-playernamefs);
    color: #ffffff;
    padding-left: var(--sets-playernamepadding);
    overflow: hidden;
}
.set-playername-right {
    text-align: end;
    font-family: 'Anton';
    font-size: var(--sets-playernamefs);
    color: #ffffff;
    padding-right: var(--sets-playernamepadding);
    overflow: hidden;
}
.set-tournament-logo {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
}
.set-tournament-logo img {
    width: 80%;
}
.set-tournament-phase {
    font-family: 'Anton';
    font-size: var(--sets-phasefs);
    color: var(--generalheader-color);
    text-align: center;
}
.set-stat {
    font-family: 'Anton';
    font-size: var(--sets-statfs);
    color: var(--generalheader-color);
    text-align: center;
    align-self: flex-end;
    margin: var(--sets-statmargin);
}
/* Customization for sets */
.set-winlosers-score {
    background-color: #ff3131;
    color: #890a0a;
}
.set-winlosers-container {
    border: 1px solid #ff3131;
    background-color: #340000;
}

.set-winwinners-score {
    background-color: #00bf63;
    color: #00572d;
}
.set-winwinners-container {
    border: 1px solid #00bf63;
    background-color: #002714;
}

.set-loss-score {
    background-color: #a6a6a6;
    color: #545454;
}

.set-nodoubleelimination-score {
    background-color: #40a9ff;
    color: #28498d;
}
.set-nodoubleelimination-container {
    border: 1px solid #40a9ff;
    background-color: #0a1127;
}

/* General Customization */
.greentext {
    color: #00bf63;
}
.redtext {
    color: #ff3131;
}
.goldtext {
    color: #ffe323;
}
.graytext {
    color: var(--generalheader-color);
}

/* Modal for Tournament Sets */

.modal {
    display: none;
    position: fixed;
    z-index: 9999;
    padding-top: 60px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.3);
}
.modal-content {
    background-color: var(--box-bgcolor);
    margin: auto;
    padding: 20px;
    border-radius: 10px;
    width: 80%;
    max-width: 1000px;
    color: white;
}
.close {
    float: right;
    font-size: 22px;
    cursor: pointer;
    color: #aaa;
}
.close:hover { color: #ff3131; }

/* Tournamnet sets modal */


.modal-tournament {
    display: grid;
    margin: var(--modal-tournament-rowmargin);
    padding: var(--box-padding);

    grid-template-columns: 15% 53% 7% 10% 5% 10%;
    grid-template-rows: 2fr 1fr 1fr;
}

.modal-tournament-logo {
    grid-row: span 3;
}
.modal-tournament-logo img {
    display: block;
    width: 100%;
    height: auto;
}
.modal-tournament-name {
    grid-column: span 3;

    font-family: 'Anton';
    font-size: var(--modal-tournament-nameplacementfs);
    color: #FFFFFF;
    text-align: left;
    padding-left: var(--modal-tournament-nameplacementpadding);
    align-content: center;
    cursor: pointer;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    min-width: 0;
    max-width: 100%;
}
.modal-tournament-name:hover {
    text-decoration: underline;
}

.modal-tournament-date {
    font-family: 'Anton';
    font-size: var(--modal-tournament-statfs);
    color: var(--generalheader-color);
    text-align: right;
    overflow: none;
}
.modal-tournament-placement {
    grid-row: span 2;

    font-family: 'Anton';
    font-size: var(--modal-tournament-nameplacementfs);
    color: var(--generalheader-color);
    text-align: left;
    padding-left: var(--modal-tournament-nameplacementpadding);
    align-content: center;
}
.modal-tournament-statheader {
    font-family: 'Anton';
    font-size: var(--modal-tournament-statfs);
    color: var(--generalheader-color);
    text-align: left;
    align-content: center;
}
.modal-tournament-stat {
    font-family: 'Anton';
    font-size: var(--modal-tournament-statfs);
    color: var(--generalheader-color);
    text-align: center;
    align-content: center;
}

/* Modal Tournament Sets */

.modal-set-box {
    height: auto;
    grid-auto-rows: auto;
    margin: var(--modal-tournament-rowmargin);
    padding: var(--box-padding);
}
.modal-set {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: relative;
    overflow: visible;

    margin: var(--tournament-rowmargin);
    background-color: var(--box-statcolor);
}
.modal-set-recent div {
    min-height: 0;
}
.modal-set-phase {
    position: absolute;
    left: 50%;
    bottom: -4px;
    transform: translateX(-50%);
    padding: 2px 10px;
    border-radius: 1rem;
    background: #121821;
    color: #ffffff;
    font-family: 'Anton';
    font-size: var(--modal-sets-phasefs);
    line-height: 1;
    text-transform: uppercase;
    pointer-events: none;
    z-index: 5;
}
/**/
.modal-set-player-left {
    display: grid;
    grid-template-columns: 80% 20%;
    grid-template-rows: auto auto;
}
.modal-set-info-left {
    display: grid;
    grid-template-columns: 1fr;
}
.modal-set-characters-left {
    align-content: center;
    padding-left: var(--modal-sets-playernamepadding);
}
.modal-set-characters-left img {
    width: var(--modal-sets-characterswidth);
}

.modal-set-tournament {
    display: grid;
    grid-template-rows: 90% 10%;
}
.modal-set-score {
    font-family: 'Anton';
    display: flex;
    font-size: var(--modal-sets-scorefs);
    height: var(--modal-sets-scoreheight);
    align-content: center;
    justify-content: center;
    align-items: center;
    justify-items: center;
    grid-row: span 2;
}

.modal-set-player-right {
    display: grid;
    grid-template-columns: 20% 80%;
    grid-template-rows: auto auto;
}
.modal-set-info-right {
    display: grid;
    grid-template-columns: 1fr;
}
.modal-set-characters-right {
    align-content: center;
    text-align: right;
    padding-right: var(--modal-sets-playernamepadding);
}
.modal-set-characters-right img {
    width: var(--modal-sets-characterswidth);
}
/**/
.modal-set-playername-link {
    cursor: pointer;  
}
.modal-set-playername-link:hover {
    text-decoration: underline;
}
.modal-set-playername-left {
    font-family: 'Anton';
    font-size: var(--modal-sets-playernamefs);
    color: #ffffff;
    padding-left: var(--modal-sets-playernamepadding);
    overflow: hidden;
}
.modal-set-playername-right {
    text-align: end;
    font-family: 'Anton';
    font-size: var(--modal-sets-playernamefs);
    color: #ffffff;
    padding-right: var(--modal-sets-playernamepadding);
    overflow: hidden;
}
.modal-set-tournament-logo {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
}
.modal-set-tournament-logo img {
    width: 80%;
}
.modal-set-tournament-phase {
    font-family: 'Anton';
    font-size: var(--modal-sets-phasefs);
    color: var(--generalheader-color);
    text-align: center;
}
.modal-set-stat {
    font-family: 'Anton';
    font-size: var(--modal-sets-statfs);
    color: var(--generalheader-color);
    text-align: center;
    align-self: flex-end;
    margin: var(--modal-sets-statmargin);
}


/* 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: 10rem;
}
.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 (sos)*/

@media (max-width: 1024px) { 
    :root {
        --bg-color: #222222;
        --generalheader-color: #ced0d0; 
        /* Landing */
        --landing-height: auto;
        --landing-bgnamefs: clamp(10px, 5rem, 10vh);
        --landing-nameheight: auto;
        --landing-namefs: clamp(10px, 2rem, 7vh);
        --landing-namemargin: 3rem;

        --landing-topfs: 1.5rem;
        --landing-topmargin: 1rem;
        --landing-topwidth: 5rem;
        --landing-topheight: 3rem;
        --sponsor-marginright: 0.4rem;
        --profile-socialsmargin: 1rem;
        --profile-socialsfs: 0.8rem;

        /* Stats */
        --page-max: 1000px; --gutter: clamp(12px, 4vw, 48px);
        --box-bgcolor: #0b1215;
        --box-statcolor: #162227;
        --box-borderradius: 1vh;
        --box-padding: 0.5rem;

        --profile-boxmargin: 0rem 0.2rem;
        --profile-headerfs: 1rem;
        --profile-headermargin: 1rem 0rem;

        --statbox-headerfs: 1rem;
        --statbox-headermargin: 0.8rem 0rem;
        
        --statbox-statfs: 0.8rem;
        --statbox-statpadding: 0.1rem 0.5rem;
        --statbox-statmargin: 0.5rem 0rem;

        /* Characters */

        --character-containergap: 0.1rem;
        --character-containerpadding: 0.8rem 0.4rem;
        --character-containermargin: 0rem 0.1rem;

        --character-iconwidth: clamp(10px, 3rem, 7vh);

        --character-usagepercentfs: 0.6rem;
        --character-usagegamesfs: 0.5rem;

        /* Tournaments */

        --tournament-maxheight: 16rem;
        --tournament-rowmargin: 0.5rem 0rem;
        --tournament-nameplacementfs: 1rem;
        --tournament-nameplacementpadding: 0.3rem;
        --tournament-statfs: 0.6rem;

        /* Sets */
        --sets-characterswidth: 1.2rem;
        --sets-playernamefs: 1rem;
        --sets-playernamepadding: 0.2rem;
        --sets-phasefs: 0.6rem;
        --sets-statfs: 0.4rem;
        --sets-statmargin: 0.5rem 0rem;
        --sets-scorefs: 2rem;
        --sets-scoreheight: 3.5rem;

        /* Modal Tournaments sets */

        --modal-tournament-maxheight: 16rem;
        --modal-tournament-rowmargin: 0.5rem 0rem;
        --modal-tournament-nameplacementfs: 1rem;
        --modal-tournament-nameplacementpadding: 0.3rem;
        --modal-tournament-statfs: 0.45rem;
        
        --modal-sets-characterswidth: 1.2rem;
        --modal-sets-playernamefs: 1rem;
        --modal-sets-playernamepadding: 0.2rem;
        --modal-sets-phasefs: 0.6rem;
        --modal-sets-statfs: 0.4rem;
        --modal-sets-statmargin: 0.5rem 0rem;
        --modal-sets-scorefs: 2rem;
        --modal-sets-scoreheight: 3.5rem;

        
        /* 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;

        /* Customization */
        --top-1color: #ffe323;
        --top-2color: #c0c0c0;
        --top-3color: #c7732b;
        --top-10color: #8C52FF;
        --top-25color: #40a9ff;
        --top-50color: #4fff2c;
        --top-50pluscolor: #9b9b9b;
    }

    /* Landing */
    .landing {
        max-width: 100%;
    }

    .landing-main {
        position: relative;
        z-index: 1;
        object-fit: contain;
        height: clamp(1rem, 14rem, 50vh);
        width: auto;
        max-width: 100%;
    }

    .top {
        left: 70%;
    }

    .back {
        margin: 1rem;
        left: 1%;
        font-size: 2rem;
    }
    .back:hover {
        transform: none;
        color: #ffffff;
    }

    .player-socials img {
        border-radius: 0.1rem;
    }

    /* Tournaments */

    .tournament {
        grid-template-columns: 20% 20% 12% 18% 12% 18%;
    }
    .tournament-statheader {
        text-align: right;
    }

    .tournament-setsmodal {
        width: 1vh;
    }

    .tournament-logo img {
        width: 100%;
    }

    .modal-content {
        background-color: var(--box-bgcolor);
        margin: auto;
        padding: 20px;
        border-radius: 10px;
        width: 90%;
        max-width: 1000px;
        color: white;
    }
    .modal-tournament {
        grid-template-columns: 20% 36% 10% 13% 8% 13%;
    }

    /* 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;
    }
}