.card { position: relative; width: 85%; margin: 0 auto 20px; } .channelBanner { width: 100%; max-height: 200px; } .defaultChannelBanner { width: 100%; max-height: 200px; height:200px; background-color: black; background-image: url("images/defaultBanner.png"); } .channelInfoContainer { width: 100%; position: relative; background-color: var(--card-bg-color); margin-top: 10px; } .channelInfo { display: flex; flex-flow: row wrap; width: 100%; justify-content: space-between; } .channelThumbnail { width: 100px; height: 100px; border-radius: 200px 200px 200px 200px; -webkit-border-radius: 200px 200px 200px 200px; } .channelName { font-weight: bold; width: 100%; font-size: 25px; } .channelSubCount { color: var(--tertiary-text-color); top: 50px; left: 120px; } .subscribeButton { height: 50px; min-width: 150px; align-self: center; margin-bottom: 10px; } .channelSearch { width: 200px; align-self: flex-end; } .sortSelect { align-self: flex-end; } .channelInfoTabs { position: relative; width: 100%; margin-top: -16px; margin-bottom: -13px; } .tab { padding: 15px; font-size: 15px; cursor: pointer; align-self: flex-end; color: var(--tertiary-text-color); } .selectedTab { color: var(--primary-text-color); border-bottom: 3px solid var(--primary-color); margin-bottom: -3px; font-weight: bold; box-sizing: border-box; } .tab:hover { font-weight: bold; } .aboutTab { background-color: var(--card-bg-color); position: relative; margin-top: 0px; padding: 10px; z-index: 1; } .aboutInfo { font-family: 'Roboto', sans-serif; font-size: 17px; white-space: pre-wrap; } .channelSearch { margin-top: 10px; } .elementList { margin-top: 15px; } .elementListLoading { margin-top: 200px; } .message { color: var(--tertiary-text-color); } .getNextPage { background-color: var(--search-bar-color); width: 100%; height: 45px; line-height: 45px; text-align: center; cursor: pointer; margin-top: 16px; } .thumbnailContainer { display: flex } .channelLineContainer { display: flex; justify-content: center; flex-direction: column; padding-left: 1em; }