:root {
    /* Fonts */
    --FontGoogle: 'Google Sans', sans-serif;
    --FontRoboto: 'Roboto', sans-serif;

    /* Colors */
    --Color0: 233, 30, 99;
    --Color1: 156, 39, 176;
    --Color2: 63, 81, 181;
    --Color3: 3, 169, 244;
    --Color4: 0, 150, 136;
    --Color5: 139, 195, 74;
    --Color6: 205, 220, 57;
    --Color7: 255, 193, 7;
    --Color8: 121, 85, 72;
    --Color9: 121, 85, 72;
    --Color10: 96, 125, 139;
    --Color11: 66, 66, 66;
    --Color12: 197, 40, 40;
    --Color13: 128, 211, 249;
    --Color14: 0, 171, 192;

    --Light0: 51, 51, 51;
    --Light1: 156, 39, 176;
    --Light2: 255, 235, 59;
    --Dark0: 0, 0, 0;
    --Dark1: 103, 58, 183;
    --Dark2: 255, 193, 7;

    /* Light Mode */
    --LightHeader: #FFFFFF;
    --LightContentArea: #F0F0F0;
    --LightText: #333333;
    --LightTextSubheader: #9E9E9E;

    /* Dark Mode */
    --DarkHeader: #2D3A41;
    --DarkContentArea: #263238;
    --DarkText: #FFFFFF;
    --DarkTextSubheader: #9E9E9E;

    /* UI */
    --ShareButton: #3F51B5;
    --ShareButtonFocus: #384BA0;
    --ChannelButton: #6C0000;
    --ChannelButtonFocus: #640101;
    --GameButton: #F44336;
    --GameButtonFocus: #df3f34;
    --BorderRadius: 5px;
}

/* Fonts */
@font-face {
    font-family: 'CF0';
    src: url('../fonts/ChannelFont\ 0\ \(Roboto-Medium\).ttf') format('truetype');
}

@font-face {
    font-family: 'CF1';
    src: url('../fonts/ChannelFont\ 1\ \(ComicSans\).ttf') format('truetype');
}

@font-face {
    font-family: 'CF2';
    src: url('../fonts/ChannelFont\ 2\ or\ logo\ \(Pacifico\).ttf') format('truetype');
}

@font-face {
    font-family: 'CF3';
    src: url('../fonts/ChannelFont\ 3\ \(Kenney\ Mini\).ttf') format('truetype');
}

@font-face {
    font-family: 'CF4';
    src: url('../fonts/ChannelFont\ 4\ \(LANENAR\).ttf') format('truetype');
}

@font-face {
    font-family: 'CF5';
    src: url('../fonts/ChannelFont\ 5\ \(Stentiga\).ttf') format('truetype');
}

@font-face {
    font-family: 'CF6';
    src: url('../fonts/ChannelFont\ 6\ \(Top\ Secret\).ttf') format('truetype');
}

@font-face {
    font-family: 'CF7';
    src: url('../fonts/ChannelFont\ 7\ \(BlackMetalSans\).ttf') format('truetype');
}

@font-face {
    font-family: 'CF8';
    src: url("../fonts/ChannelFont\ 8\ \(Some\ Time\ Later\).otf") format("opentype");
}

@font-face {
    font-family: 'CF9';
    src: url('../fonts/ChannelFont\ 9\ \(Product\ Sans\ Bold\).ttf') format('truetype');
}

@font-face {
    font-family: 'CF10';
    src: url('../fonts/ChannelFont\ 10\ \(AmaticSC-Bold\).ttf') format('truetype');
}

@font-face {
    font-family: 'CF11';
    src: url('../fonts/ChannelFont\ 11\ \(BalooBhai-Regular\).ttf') format('truetype');
}

@font-face {
    font-family: 'CF12';
    src: url('../fonts/ChannelFont\ 12\ \(CinzelDecorative-Bold\).ttf') format('truetype');
}

@font-face {
    font-family: 'CF13';
    src: url('../fonts/ChannelFont\ 13\ \(Fascinate-Regular\).ttf') format('truetype');
}

@font-face {
    font-family: 'CF14';
    src: url('../fonts/ChannelFont\ 14\ \(Righteous-Regular\).ttf') format('truetype');
}

@font-face {
    font-family: 'CF15';
    src: url('../fonts/ChannelFont\ 15\ \(SedgwickAveDisplay-Regular\).ttf') format('truetype');
}

@font-face {
    font-family: 'CF16';
    src: url('../fonts/ChannelFont\ 16\ \(PlayfairDisplay-BoldItalic\).ttf') format('truetype');
}

@font-face {
    font-family: 'CF17';
    src: url('../fonts/ChannelFont\ 17\ \(SpicyRice-Regular\).ttf') format('truetype');
}

@font-face {
    font-family: 'CF18';
    src: url('../fonts/ChannelFont\ 18\ \(SupermercadoOne-Regular\).ttf') format('truetype');
}

* {
    font-family: var(--FontGoogle);
}

body {
    background-color: #000000 !important;
    touch-action: pan-y;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 400 !important;
}

h1 {
    color: #FFFFFF;
}

p {
    font-size: 11pt;
}


/* Override Bootstrap */
.card {
    border: none !important;
    background-color: transparent !important;
}

.card-img-top {
    border-top-right-radius: var(--BorderRadius) !important;
    border-top-left-radius: var(--BorderRadius) !important;
    display: flex;
    height: 159px;
    background-size: auto 159px;
    background-position: center;
}

.card-header {
    padding: 17px 19px !important;
    border: none !important;
    border-top-right-radius: var(--BorderRadius) !important;
    border-top-left-radius: var(--BorderRadius) !important;
}

.card-body {
    padding: 8px 14px !important;
    border-bottom-right-radius: var(--BorderRadius) !important;
    border-bottom-left-radius: var(--BorderRadius) !important;
}

.dropdown-menu a:hover {
    cursor: pointer;
}

#gameButton,
#headerShare,
#channelSubmit {
    border: none !important;
    color: #FFFFFF !important;
    padding: 0.40rem 1.25rem;
    border-radius: 5px !important;
    font-weight: 500 !important;
    font-size: 13pt !important;
}

button:hover,
button:focus {
    outline: none !important;
}

#headerShare {
    background-color: var(--ShareButton) !important;
}

#headerShare:hover,
#headerShare:focus {
    background-color: var(--ShareButtonFocus) !important;
}

#gameButton {
    background-color: var(--GameButton) !important;
}

#gameButton:hover,
#gameButton:focus {
    background-color: var(--GameButtonFocus) !important;
}

#channelSubmit {
    padding-left: 0 !important;
    padding-right: 0 !important;
    height: 38px;
    width: 38px;
    background-color: var(--ChannelButton) !important;
}

#channelSubmit:hover,
#channelSubmit:focus {
    background-color: var(--ChannelButtonFocus) !important;
}

#channelRandom {
    border: none !important;
    color: #FFFFFF !important;
    padding: 0.40rem 1.25rem;
    border-radius: 5px !important;
    font-size: 13pt !important;
    background-color: var(--ChannelButton) !important;
}

#channelRandom:hover,
#channelRandom:focus {
    background-color: var(--ChannelButtonFocus) !important;
}

#channelHelp {
    border: 0;
    height: 38px; 
    color: #b9b9b9;
    border-radius: 0 4px 4px 0;
    background-color: white;
}

#channelHelp span {
    vertical-align: middle;
    display: inline-block;
}

#channelHelp:hover {
    color: #a7a7a7;
    box-shadow: none;
}

#channelId:focus,
#channelHelp:focus {
    box-shadow: none;
}

.form-control {
    border: none !important;
}

.alert-danger {
    border-radius: var(--BorderRadius) !important;
    background-color: rgb(var(--Color12)) !important;
    color: #FFFFFF !important;
    margin: 0 0 16px 0 !important; 
    width: 100%;
    border: none !important; 
}

.modal-content {
    border: none !important;
    background-color: transparent !important;
    border-radius: var(--BorderRadius) !important;
}

.modal-header {
    padding: 17px 19px !important;
    border: none !important;
    border-top-right-radius: var(--BorderRadius) !important;
    border-top-left-radius: var(--BorderRadius) !important;
}

.modal-body {
    padding: 8px 14px !important;
}

.modal-footer {
    border: none !important;
    border-bottom-right-radius: var(--BorderRadius) !important;
    border-bottom-left-radius: var(--BorderRadius) !important;
}

.modal-content .close {
    padding: 0 !important;
    margin: auto 0 !important;
    color: #FFFFFF;
}

.modal-content .close:hover {
    color: #FFFFFF;
}

#modal-logo {
    height: 24px;
}


/* Top-bar */
#top-bar {
    height: 76px;
}

#logo {
    height: 30px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.dark-logo #logo {
    filter: invert(1);
}

/* Header */
#headerTitle {
    margin: auto;
    padding: 0.5rem 0.7rem;
    background-color: rgb(0, 0, 0, 0.5);
    border-radius: var(--BorderRadius);
    font-size: 50px;
}

#headerAvatar {
    border-radius: 50%;
    height: 68px;
    width: 68px;
}

#headerImage {
    background-position: center;
}

.headerPattern {
    background-size: 155px !important;
}

#headerShare {
    margin-right: 0;
}


/* Stats */
#stats .card-body {
    padding: 10px 18px !important;
}

.statsViews td,
.statsMoney td,
.statsVideos td {
    height: 2rem;
}

.md-32 {
    font-size: 32px !important;
}

.statsViews {
    color: rgb(var(--Color0));
}

.statsMoney {
    color: rgb(var(--Color5));
}

.statsVideos {
    color: rgb(var(--Color3));
}

#statsMoney:not(:empty)::after {
    content: 'Ŧ';
}

#stats tr {
    font-size: 19px;
}


/* Videos */
#videos .card-body {
    padding: 16px 20px !important;
}

#videoThumbnail {
    min-width: 173px;
    height: 98px;
    border-radius: var(--BorderRadius);
    background-color: pink;
    display: flex;
}

#video {
    display: flex;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

#videoTime {
    color: #FFFFFF;
    margin: auto 0.25rem 0.25rem auto;
    text-align: right;
    padding: 0.1rem 0.4rem;
    background-color: rgb(0, 0, 0, 0.65);
    border-radius: 2px;
}

#videoName {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; 
    overflow: hidden;
}

#videos .row:not(:first-child) {
    margin-top: 20px;
}

/* Welcome */
#profileImagesRow1,
#profileImagesRow2,
#profileImagesRow3 {
    overflow: hidden;
}

#profileImagesRow1,
#profileImagesRow2 {
    margin-bottom: 25px;
}

#profileImagesRow1 img,
#profileImagesRow2 img,
#profileImagesRow3 img {
    border-radius: 15px;
}

#steampowered {
    width: 50%;
}

/* Const right column size */
@media (min-width: 768px) {
    #videos {
        flex: 1;
    }

    #stats {
        flex: 0 0 280px;
    }
}

@media (min-width: 992px) {
    #stats {
        flex: 0 0 330px;
    }
}

/* One column */
@media (max-width: 767px) {
    #headerShare {
        margin: 0 0 0 -50px;
    }

    .card-img-top {
        height: 110px;
        background-size: auto 110px;
    }

    #headerTitle {
        padding: 0.4rem 0.6rem;
        font-size: 34px;
    }

    .headerPattern {
        background-size: 115px !important;
    }
    
    #steampowered {
        width: 100% !important;
    }

    #profileImagesRow3 {
        visibility: hidden;
        height: 0px !important;
    }

    #profileImagesRow1 {
        margin-bottom: 25px;
    }

    #profileImagesRow2 {
        margin-bottom: 45px;
    }
}

/* One column videos */
@media (max-width: 1199px) {
    #video:not(:first-child) {
        margin-top: 20px;
    }

    #videos .row {
        margin-top: 0;
    }

    #steampowered {
        width: 70%;
    }
}

/* Mobile */
@media (max-width: 575px) {
    :root {
        --BorderRadius: 0px !important;
    }

    body {
        overflow-x: hidden;
    }
    
    #videoThumbnail {
        min-width: 125px;
        height: 70px;
    }

    #videoThumbnail {
        border-radius: 5px;
    }
}

/* Smaller thumbnails */
@media (max-width: 330px) {
    #videoThumbnail {
        min-width: 104px;
        height: 59px;
    }
    #video {
        min-height: 70px;
    }
}