:root {
    --primary-bg: #121212;
    --secondary-bg: #181818;
    --text-color-1: #d4d4d4;
    --text-color-2: #adadad;
    --text-color-3: #525252;

    --color-1: #4f6f91;
    --color-2: #bebe9f;
    --color-3: #d86784;
    --color-4: #98d38d;
    --color-5: #e5a08a;

    --page-width: 800px;
    --body-margin: 3rem auto;
    --h2-font-size: 2.5rem;
    --h2-margin: 3rem auto 0.2rem;

    --header-radius: 12px;
    --header-profile-pic-url: url('img/swemoney.png');
    --header-grid-col-template: 4fr repeat(4, 1fr);
    --header-grid-row-template: 3fr 1fr;
    --header-grid-gap: 10px;
    --header-box-icon-font-size: 4rem;
    --header-content-padding: 2rem;
    --header-h3-font-size: 2rem;
    --header-h1-font-size: 5rem;
    --header-h1-line-height: 4rem;
    --header-h1-margin-top: -1rem;
    --header-p-font-size: 1.2rem;
    --header-p-margin-top: -2rem;

    --platforms-radius: 12px;
    --platforms-grid-col-template: 1fr 4fr;
    --platforms-grid-gap: 10px;
    --platforms-listed-padding: 20px 50px;
    --platforms-followers-grid-col-template: repeat(3, 1fr 2fr);
    --platforms-followers-grid-row-template: 1fr 4fr 4fr;
    --platforms-followers-grid-gap: 5px;
    --platforms-numbers-font-size: 2.2rem;
    --platforms-numbers-grid-col-template: 1fr;
    --platforms-numbers-grid-row-template: 4fr 1fr;
    --platforms-numbers-label-font-size: 0.75rem;
    --platforms-numbers-label-margin-top: -10px;
    --platforms-numbers-note-font-size: 0.9rem;
    --platforms-numbers-note-margin: 0 15px;
    --platforms-link-line-height: 0.5rem;
    --platforms-link-font-size: 0.8em;

    --platforms-twitch-col: 1;
    --platforms-twitch-row: 1;
    --platforms-youtube-col: 3;
    --platforms-youtube-row: 1;
    --platforms-tiktok-col: 5;
    --platforms-tiktok-row: 1;

    --icon-size: 64px;
    --icon-radius: 7px;
    --icon-twitch-bg: #6441a5;
    --icon-twitch-url: url('img/icon-twitch.png');
    --icon-youtube-bg: #eeeeee;
    --icon-youtube-url: url('img/icon-youtube.png');
    --icon-tiktok-bg: #2e2e2e;
    --icon-tiktok-url: url('img/icon-tiktok.png');

    --demographics-grid-col-template: 1fr 8fr;
    --demographics-grid-row-template: repeat(4, 1fr);
    --demographics-grid-gap: 5px;
    --demographics-label-font-size: 1.0rem;
    --demographics-bar-height: 30px;
    --demographics-bar-width: 100%;
    --demographics-bar-text-padding: 3px 0px;
    --demographics-tag-margin: 3px;
    --demographics-bar-radius: 10px;
    --demographics-bar-font-size: 1.0rem;

    --games-grid-col-template: repeat(4, 1fr);
    --games-grid-col-gap: 10px;
    --games-cover-radius: 10px;
    --games-game-grid-col-template: 1fr;
    --games-game-grid-row-template: 9fr 1fr;
    --games-stats-grid-col-template: 1.5fr 1fr;
    --games-stats-grid-row: 2;
    --games-stats-font-size: 0.9rem;
    --games-stats-margin: -1.5rem 0px;
    --games-stats-padding: 0px 7px;
    --games-stats-font-color: #ffffff;
    --games-stats-bg-color: #1818188f;
}

* { box-sizing: border-box; }

@media screen and (max-width: 800px) {
    :root {
        --page-width: 95%;
        --body-margin: 2rem auto;
        --h2-font-size: 1.7rem;
        --h2-margin: 2rem auto 0.2rem;

        --header-radius: 5px;
        --header-grid-gap: 5px;
        --header-box-icon-font-size: 2.5rem;
        --header-content-padding: 10px;
        --header-h3-font-size: 1.4rem;
        --header-h1-font-size: 2.3rem;
        --header-h1-line-height: 2.1rem;
        --header-h1-margin-top: -1rem;
        --header-p-font-size: 0.9rem;
        --header-p-margin-top: -1rem;

        --platforms-radius: 6px;
        --platforms-followers-grid-row-template: 1fr 2fr 2fr;
        --platforms-grid-gap: 5px;
        --platforms-listed-padding: 15px;
        --platforms-numbers-font-size: 1.6rem;
        --platforms-numbers-label-font-size: 0.7rem;
        --platforms-numbers-label-margin-top: -5px;
        --platforms-numbers-note-font-size: 0.7rem;
        --platforms-numbers-note-margin: 0 7px;
        --platforms-link-line-height: 0.8rem;

        --icon-size: 42px;
        --icon-radius: 7px;

        --demographics-grid-col-template: 1fr 7fr;
        --demographics-grid-row-template: repeat(6, 1fr);
        --demographics-label-font-size: 0.7rem;
        --demographics-bar-height: 25px;
        --demographics-bar-text-padding: 3px;
        --demographics-tag-margin: 1px;
        --demographics-bar-radius: 5px;
        --demographics-bar-font-size: 0.7rem;

        --games-grid-col-gap: 5px;
        --games-cover-radius: 5px;
        --games-game-grid-row-template: 4fr 1fr;
        --games-stats-grid-row: 2;
        --games-stats-font-size: 0.7rem;
        --games-stats-margin: -1.1rem 0px;
        --games-stats-padding: 1px 6px;
        --games-stats-bg-color: #1818188f;
    }
    
    .hide-when-small { display: none; }
}

body {
    font-family: "Segoe UI", sans-serif;
    background: var(--primary-bg);
    color: var(--text);
    max-width: var(--page-width);
    margin: var(--body-margin);
    color: var(--text-color-1);
}

h3 { color: var(--color-3); }
h2 { font-size: var(--h2-font-size); margin: var(--h2-margin); }

/* Header Start */

header .container {
    display: grid;
    grid-template-columns: var(--header-grid-col-template);
    grid-template-rows: var(--header-grid-row-template);
    gap: var(--header-grid-gap);
}

header .blurb {
    grid-column: 1;
    grid-row: 1 / span 2;
    background-color: var(--secondary-bg);
}

header .profile-pic {
    grid-column: 2 / span 3;
    grid-row: 1;
    background: var(--color-1);
    background-image: var(--header-profile-pic-url);
    background-size: cover;
    background-position: center;
}

header .box-right {
    grid-column: 5;
    grid-row: 1 / span 1;
    background: var(--color-4);
}

header .box-bottom-1 {
    grid-column: 2;
    grid-row: 2;
    background: var(--color-3);
    font-size: var(--header-box-icon-font-size);
    text-align: center;
}

header .box-bottom-2 {
    grid-column: 3 / span 3;
    grid-row: 2;
    background: var(--color-5); 
}

header h1 { 
    font-size: var(--header-h1-font-size); 
    line-height: var(--header-h1-line-height); 
    margin-top: var(--header-h1-margin-top); 
}

header p { 
    font-size: var(--header-p-font-size); 
    margin-top: var(--header-p-margin-top);
}

header .flair { height: 100%; width: 100%; }
header .content { padding: var(--header-content-padding); }
header h3 { font-size: var(--header-h3-font-size); }
header .box-round { border-radius: var(--header-radius); }

/* Header End */

/* Platforms Start */

#platforms .container {
    display: grid;
    grid-template-columns: var(--platforms-grid-col-template);
    gap: var(--platforms-grid-gap);
}

#platforms .listed {
    grid-column: 1 / span 2;
    background-color: var(--secondary-bg);
    padding: var(--platforms-listed-padding);
}

#platforms .followers {
    display: grid;
    grid-template-columns: var(--platforms-followers-grid-col-template);
    grid-template-rows: var(--platforms-followers-grid-row-template);
    gap: var(--platforms-followers-grid-gap);
    align-items: left;
    justify-content: left;
}

#platforms .number {
    display: grid;
    grid-template-columns: var(--platforms-numbers-grid-col-template);
    grid-template-rows: var(--platforms-numbers-grid-row-template);
    max-height: var(--icon-size);
    font-size: var(--platforms-numbers-font-size);
    font-weight: bold;
}

#platforms .number-label { 
    text-align: left;
    font-size: var(--platforms-numbers-label-font-size);
    margin-top: var(--platforms-numbers-label-margin-top);
    color: var(--text-color-2);
}

#platforms .note { 
    text-align: right; 
    font-size: var(--platforms-numbers-note-font-size); 
    margin: var(--platforms-numbers-note-margin); 
    color: var(--text-color-3); 
}

.number p { margin: 0; padding: 0; }
#platforms .link-twitch { grid-column: var(--platforms-twitch-col) / span 2; grid-row: var(--platforms-twitch-row); }
#platforms .link-youtube { grid-column: var(--platforms-youtube-col) / span 2; grid-row: var(--platforms-youtube-row); }
#platforms .link-tiktok { grid-column: var(--platforms-tiktok-col) / span 2; grid-row: var(--platforms-tiktok-row); }
#platforms .link { line-height: var(--platforms-link-line-height); color: var(--color-4) }
#platforms .number.twitch { grid-column: calc(var(--platforms-twitch-col) + 1); grid-row: calc(var(--platforms-twitch-row) + 2); }
#platforms .number.youtube { grid-column: calc(var(--platforms-youtube-col) + 1); grid-row: calc(var(--platforms-youtube-row) + 2); }
#platforms .number.tiktok { grid-column: calc(var(--platforms-tiktok-col) + 1); grid-row: calc(var(--platforms-tiktok-row) + 2); }
#platforms a { text-decoration: none; color: var(--link-color); font-size: var(--platforms-link-font-size); }
#platforms .box-round { border-radius: var(--platforms-radius); }

.icon {
    width: var(--icon-size); height: var(--icon-size);
    border-radius: var(--icon-radius);
    background-size: cover;
    background-origin: padding-box;
    background-repeat: no-repeat;
}

.icon.twitch { 
    grid-column: var(--twitch-icon-col); 
    grid-row: var(--twitch-icon-row);
    background-image: var(--icon-twitch-url);
    background-color: var(--icon-twitch-bg);
}

.icon.youtube { 
    grid-column: var(--youtube-icon-col); 
    grid-row: var(--youtube-icon-row);
    background-image: var(--icon-youtube-url); 
    background-color: var(--icon-youtube-bg);
}

.icon.tiktok { 
    grid-column: var(--tiktok-icon-col); 
    grid-row: var(--tiktok-icon-row);
    background-image: var(--icon-tiktok-url); 
    background-color: var(--icon-tiktok-bg);
}

/* Platforms End */

/* Demographics Start */

#demographics .container {
    display: grid;
    grid-template-columns: var(--demographics-grid-col-template);
    gap: var(--demographics-grid-gap);
    align-items: center;
}

#demographics .bar-container {
    width: var(--demographics-bar-width);
}

#demographics .bar, #demographics .tag {
    height: var(--demographics-bar-height);
    display: inline-block;
    text-align: center;
    padding: var(--demographics-bar-text-padding);
    font-size: var(--demographics-bar-font-size);
}

#demographics .label {
    font-size: var(--demographics-label-font-size);
    font-weight: bold;
}

.bar:first-child {
    border-radius: var(--demographics-bar-radius) 0px 0px var(--demographics-bar-radius);
}

.bar:last-child {
    border-radius: 0px var(--demographics-bar-radius) var(--demographics-bar-radius) 0px;
}

.tag {
    border-radius: var(--demographics-bar-radius);
    margin: var(--demographics-tag-margin);
}

.ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Demographics End */

/* Games Start */

#games .container {
    display: grid;
    grid-template-columns: var(--games-grid-col-template);
    column-gap: var(--games-grid-col-gap);
}

#games .container img {
    width: 100%;
    border-radius: var(--games-cover-radius);
}

#games .game-container {
    display: grid;
    grid-template-columns: var(--games-game-grid-col-template);
    grid-template-rows: var(--games-game-grid-row-template);
}

#games .game-stats {
    display: grid;
    grid-template-columns: var(--games-stats-grid-col-template);
    grid-row: var(--games-stats-grid-row);
    font-size: var(--games-stats-font-size);
    margin: var(--games-stats-margin);
    padding: var(--games-stats-padding);
    color: var(--games-stats-font-color);
    background-color: var(--games-stats-bg-color);
}

#games .game-ccv {
    text-align: right;
}

/* Games End */