* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

body {
    background: url(./img/bg/0.png) no-repeat center center/cover;
}

/* Main Body Grid Configuration */

.main-body {
    display: grid;
    width: 100%;
    height: 100%;
    grid-template-rows: 75px 1fr;
    grid-template-columns: 1fr minmax(250px, 25%);
    grid-template-areas:
        "navbar chat"
        "stream chat";
    gap: 5px;
    padding: 5px;
}

/* Navbar */

.navbar {
    grid-area: navbar;
    background: rgba(0, 0, 0, 0.25);
    display: grid;
    grid-template-areas:
        "logo channels options chatfunc";
    grid-template-rows: 100%;
    grid-template-columns: minmax(200px, 300px) 1fr auto auto;
    color: white;
    gap: 5px;
    padding: 5px;
    overflow: hidden;
}

.logo {
    background: url(https://i.imgur.com/PQPB7PG.png) no-repeat center center/contain;
    min-width: 10px;
    max-width: 300px;
    height: 100%;
    transition: background 1s;
}

.channels,
.options {
    display: flex;
    flex-flow: row nowrap;
    gap: 5px;
    align-items: center;
    justify-content: center;
}

.channel-button {
    width: 60px;
    height: 60px;
    cursor: pointer;
}

.channel-button:hover {
    box-shadow: 0px 0px 0px 2px white;
}

.channel-button:active {
    box-shadow: 0px 0px 0px 2px pink;
}

#twitch {
    background: url(./img/icon/twitch.png) no-repeat center center/cover;
    border-bottom: 5px solid blue;
}

#nimble {
    background: url(./img/icon/rat.png) no-repeat center center/cover;
    border-bottom: 5px solid blue;
}

#void {
    background: url(./img/icon/void.png) no-repeat center center/cover;
}

.live {
    border-bottom: 5px solid lime !important;
}

.offline {
    border-bottom: 5px solid red !important;
}

.site-active {
    box-shadow: 0px 0px 0px 2px pink;
}

.options-button {
    border-bottom: 5px solid white;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    background: black;
    font-size: clamp(9px, 1.5vw, 14px);
    min-height: 65px;
    max-height: 65px;
    display: flex;
    align-items: center;
}

.options-button:hover {
    filter: invert(100);
}

.chat-functions {
    grid-area: chatfunc;
    display: flex;
    flex-flow: column nowrap;
    gap: 5px;
    align-items: center;
    align-content: center;
    justify-content: center;
}

.chat-func-button {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: black;
    cursor: pointer;
}

.chat-func-button:hover {
    filter: invert(100);
}

#chat-refresh {
    background: black url(./img/icon/refresh.png) no-repeat center center/24px;
}

#site-settings {
    background: black url(./img/icon/settings.png) no-repeat center center/24px;
}

/* Stream */

.stream {
    grid-area: stream;
    background: black no-repeat center center/cover;
    overflow: hidden;
}

/* Chat */

#datchat-container {
    grid-area: chat;
    width: 100%;
    height: 100%;
}

/* Settings */

.settings-bg {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
}

.settings-window {
    width: 480px;
    height: 500px;
    background: rgba(0, 0, 0, 0.75);
    display: grid;
    grid-template-areas:
        "settings-opts"
        "settings-buttons";
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 50px;
    gap: 5px;
    grid-gap: 5px;
    padding: 10px;
    color: white;
}

.settings-opts {
    grid-area: settings-opts;
    overflow: auto;
}

.settings-opts h3,
.settings-opts h2,
.settings-opts label {
    margin-bottom: 5px;
}

.settings-opts input[type="url"],
.settings-opts input[type="number"] {
    width: 100%;
    padding: 5px;
    margin-bottom: 5px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.settings-opts input[type="url"]::placeholder,
.settings-opts input[type="number"]::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.bg-gallery {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    justify-content: center;
    gap: 5px;
    margin-bottom: 5px;
}

.bg-thumb {
    width: 50px;
    height: 50px;
    background-size: cover;
    cursor: pointer;
}

.dummy {
    cursor: default;
}

.cz-thumb {
    width: 50px;
    height: 50px;
    background-size: cover;
    cursor: pointer;
    background: black;
}

.settings-buttons {
    grid-area: settings-buttons;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
}

.set-btn {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    border-bottom: 5px solid white;
    height: 100%;
    background: black;
    cursor: pointer;
    padding: 5px;
}

.set-btn:hover {
    filter: invert(100);
}

/* Mobile View - Portrait Orientation Only */

@media screen and (orientation: portrait) {
    .main-body {
        display: grid !important;
        height: 100dvh; /* Dynamic viewport height - accounts for mobile browser UI */
        height: 100vh; /* Fallback for older browsers */
        width: 100vw;
        grid-template-rows: 75px minmax(200px, 40vh) 1fr !important;
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "navbar"
            "stream"
            "chat" !important;
        gap: 0 !important;
        padding: 0 !important;
    }

    .navbar {
        grid-template-columns: minmax(100px, 200px) 1fr auto auto;
        grid-area: navbar;
    }

    .logo {
        min-width: 100px;
        max-width: 200px;
        width: auto;
    }

    .stream {
        grid-area: stream !important;
        width: 100%;
        height: 100%;
        min-height: 200px;
        overflow: hidden;
    }

    #datchat-container {
        grid-area: chat !important;
        width: 100%;
        height: 100%;
        min-height: 200px;
        max-height: 100%;
        overflow: auto;
        display: flex;
        flex-direction: column;
    }
}

/* Background & Chat Size Thumbnails */

.bg0 {
    background-image: url(./img/bg/0.png);
}

.bg1 {
    background-image: url(./img/bg/1.png);
}

.bg2 {
    background-image: url(./img/bg/2.png);
}

.bg3 {
    background-image: url(./img/bg/3.png);
}

.bg4 {
    background-image: url(./img/bg/4.png);
}

.bg5 {
    background-image: url(./img/bg/5.png);
}

.bg6 {
    background-image: url(./img/bg/6.png);
}

.bg7 {
    background-image: url(./img/bg/7.png);
}

.bg8 {
    background-image: url(./img/bg/8.png);
}

.bg9 {
    background-image: url(./img/bg/9.png);
}

.bg10 {
    background-image: url(./img/bg/10.png);
}

.bg11 {
    background-image: url(./img/bg/11.png);
}

.bg12 {
    background-image: url(./img/bg/12.png);
}

.bg13 {
    background-image: url(./img/bg/13.png);
}

.cz-small {
    background-image: url(./img/icon/cz-small.png);
}

.cz-medium {
    background-image: url(./img/icon/cz-medium.png);
}

.cz-large {
    background-image: url(./img/icon/cz-large.png);
}