/* +------------------------╔═════════════════════╗-------------------------+ */
/* |::::::::::::::::::::::::║ Top Level Variables ║:::::::::::::::::::::::::| */
/* +------------------------╚═════════════════════╝-------------------------+ */

:root {
    font-family: Consolas, monaco, monospace;
    --font: Consolas, monaco, monospace;
    color: #f2f3f4;
    --text-color: #f2f3f4;
    background-color: #191b1c;
    --bg-color: #191b1c;
    --dimmed: #131516;
    --card-width: 420px;
}

html, body {
    height: 100%;
    width: 100%;
}

body {
    margin: 0px;
}

/* +------------------------------╔═══════════╗-----------------------------+ */
/* |::::::::::::::::::::::::::::::║ HTML Tags ║:::::::::::::::::::::::::::::| */
/* +------------------------------╚═══════════╝-----------------------------+ */

a {
    text-decoration: none;
    color: var(--text-color);
}

.button {
    border: var(--text-color) solid 2px;
    background-color: var(--bg-color);
    color: var(--text-color);
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
}

.button:hover {
    background-color: var(--text-color);
    color: var(--bg-color);
}

/* +----------------------------╔═════════════╗-----------------------------+ */
/* |::::::::::::::::::::::::::::║ Tag Classes ║:::::::::::::::::::::::::::::| */
/* +----------------------------╚═════════════╝-----------------------------+ */

.hyperlink {
    margin: 0px 20px 0px 0px;
    padding: 7px 12px;
    border: var(--text-color) solid 2px;
}

.hyperlink:hover {
    color: var(--bg-color);
    background-color: var(--text-color);
}

/* +----------------------------╔═════════════╗-----------------------------+ */
/* |::::::::::::::::::::::::::::║ Page Layout ║:::::::::::::::::::::::::::::| */
/* +----------------------------╚═════════════╝-----------------------------+ */

.page_layout {
    display: grid;
    min-height: 100vh;
    grid-template-columns: 100%;
    grid-template-rows: auto 1fr auto
}

.navbar, .footer {
    background-color: var(--dimmed);
    padding: 1rem;
}

.page_content {
    padding: 1rem;
}

.footer-contents {
    display: inline-block;
}
/* +-------------------------------╔════════╗-------------------------------+ */
/* |:::::::::::::::::::::::::::::::║ Navbar ║:::::::::::::::::::::::::::::::| */
/* +-------------------------------╚════════╝-------------------------------+ */

.topnav {
    overflow: hidden;
}

.topnav a {
    float: left;
    display: block;
}

.searchbar form {
    float: right;
    padding: 5px;
}

input[type="search"] {
    font: inherit;
    background-color: transparent;
    color: var(--text-color);
    border: none;
    border-bottom: dimgray 1px double;
    padding: 5px;
}

input[type="search"]:required:focus, input[type="text"]:required:focus {
    border-bottom: whitesmoke 1px double;
    outline: none;
}

button.search {
    background-color: transparent;
    color: dimgray;
    border: none;
}

button.search:hover {
    color: var(--text-color);
}

/* +----------------------------╔══════════════╗----------------------------+ */
/* |::::::::::::::::::::::::::::║ Stream Cards ║::::::::::::::::::::::::::::| */
/* +----------------------------╚══════════════╝----------------------------+ */

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--card-width), 1fr));
    justify-content: space-evenly;
    gap: 3rem 1rem;
}

.card {
    padding: 10px;
    display: grid;
    width: var(--card-width);
    background-color: #18181b;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    grid-template-columns: var(--card-width);
    grid-auto-flow: row;
    gap: 5px;
    grid-template-areas: "card-top" "card-mid" "card-bottom";
}

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

.card-top {
    display: grid;
    grid-template-columns: 75px minmax(0, 1fr) 75px;
    grid-template-rows: minmax(0, 1fr);
    gap: 0px 10px;
    grid-auto-flow: row;
    grid-template-areas: "profile_pic display_name channel_links";
    grid-area: card-top;
}

.profile_pic {
    grid-area: profile_pic;
}

.display_name {
    grid-area: display_name;
}

.channel_links {
    grid-area: channel_links;
}

.gg-comment, .gg-arrow-top-right-r {
    margin-top: 20px;
    margin-left: 10px;
}

.card-mid {
    grid-area: card-mid;
}

.card-bottom {
    display: grid;
    grid-template-columns: 75px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 0px 5px;
    grid-auto-flow: row;
    grid-template-areas: "box_art text_info";
    grid-area: card-bottom;
}

.box_art {
    grid-area: box_art;
}

.text_info {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas: "vid_title" "game_name" "vod_button";
    grid-area: text_info;
}

.vid_title {
    grid-area: vid_title;
}

.game_name {
    grid-area: game_name;
}

/* +----------------------╔═════════════════════════╗-----------------------+ */
/* |::::::::::::::::::::::║ Thumbnail Image Overlay ║:::::::::::::::::::::::| */
/* +----------------------╚═════════════════════════╝-----------------------+ */

.bl {
    bottom: 4px;
    left: 0px;
}

.br {
    bottom: 4px;
    right: 0px;
}

.tr {
    top: 0px;
    right: 0px;
}

.bl, .br, .tr {
    display: inline-flex;
    position: absolute;
    padding: 5px;
    background-color: rgba(0, 0, 0, 0.6);
}

.br b, .tr b, .bl b {
    padding-left: 5px;
}

.c {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: transparent;
    pointer-events: none;
}

.thumbnail {
    width: var(--card-width);
    aspect-ratio: 16/9;
    display: block;
    position: relative;
    color: inherit;
    text-align: center;
}

.thumbnail img {
    width: 100%;
    height: 100%;
    background: black;
}

.thumbnail img:hover {
    opacity: .4;
}

.thumbnail:hover .c {
    color: var(--text-color);
}

/* +----------------------------╔═══════════════╗---------------------------+ */
/* |::::::::::::::::::::::::::::║ Miscellaneous ║:::::::::::::::::::::::::::| */
/* +----------------------------╚═══════════════╝---------------------------+ */

.centered {
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    justify-items: center;
}

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

span.channel_name b {
    font-size: 2em;
}

input.setting {
    font: inherit;
    border: none;
    background-color: var(--dimmed);
    color: dimgray;
    border-bottom: dimgray 1px double;
    padding: 5px;
}

input.setting:focus {
    width: 40rem;
    color: var(--text-color);
    border-bottom: purple 1px double;
    outline: none;
}

div.settings {
    padding: 5px;
}

button.settings {
    padding: 4px;
    font: inherit;
    background-color: var(--dimmed);
    color: purple;
    border: purple 1px double;
}

button.settings:hover {
    color: var(--dimmed);
    background-color: purple;
    cursor: pointer;
}