html {
    position: absolute;
    height: 100vh;
    width: 100vw;
    font-family: calibri;
    background-color: rgb(68, 61, 68);
    color: white;
}

    body {
        position: aboslute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
        background-color: rgb(68, 61, 68);
    }

    .hidden {
        display: none;
    }

    ::-webkit-scrollbar {
        margin-right: 10px;
        width: 10px;
    }

    ::-webkit-scrollbar-track {
        background: ;
    }

    ::-webkit-scrollbar-thumb {
        border-radius: 8px;
        background: #555;
    }

    ::-webkit-scrollbar-thumb:hover {
        /*background: #777;*/
        background: rgba(218, 165, 47);
    }

    /* 

        Color scheme:
            (main) dark purple: rgb = 44, 2, 65 / hex = #2c0241 / name = Dark Purple
            (main) yellow: rgb = 218, 165, 47 / hex = #DAA52F / name = Curry

            lightgray: rgb = 230, 228, 231 / hex = #e6e4e7 / name = Placebo
            midgray = rgb = 148, 136, 148 / hex = #948894 / name = Femme Fatale
            darkgray: rgb = 68, 61, 68 / hex = #443d44 / name = Pitch Black
            lightpurple: rgb = 100, 18, 142 / hex = #64128e / name = Extraviolet
            
    */

        #mainWindowWrapper {
            height: 100%;
            width: 100%;
        }

            #mainWindowContainer {
                height: 100%;
                width: 100%;
                display: flex;
                flex-direction: column;
            }

                #titlebarWrapper {
                    max-height: 50px;
                    width: 100%;
                    background-color: rgba(44, 2, 65);
                }

                    #titlebarContainer {
                        width: 100%;
                        display: grid;
                        grid-template-columns: minmax(auto, 2fr) minmax(auto, 1fr);
                    }

                        #titleBar_logoWrapper {

                        }

                            #titleBar_logoContainer {

                            }

                                #titleBar_logoContainer img {
                                    display: block;
                                    max-height: 50px;
                                    object-fit: cover;
                                }

                        #titleBar_accessWrapper {
                            height: 100%;
                        }

                            #titleBar_accessContainer {
                                height: 100%;
                                width: 100%;
                                display: grid;
                                grid-template-columns: minmax(auto, 50%) minmax(auto, 50%);
                                text-align: center;
                                color: white;
                            }

                                #titleBar_accessContainer #titleBar_loginContainer:hover, #titleBar_accessContainer #titleBar_createAccContainer:hover{
                                    cursor: pointer;
                                    text-decoration: underline;
                                    color: rgba(218, 165, 47);
                                }

                                #titleBar_loginWrapper {
                                    height: 100%;
                                }

                                    #titleBar_loginContainer {
                                        position: relative;
                                        top: 50%;
                                        transform: translateY(-50%);
                                        transition: all 0.5s;
                                    }

                                #titleBar_createAccWrapper {

                                }

                                    #titleBar_createAccContainer {
                                        position: relative;
                                        top: 50%;
                                        transform: translateY(-50%);
                                        border-left: 2px solid white;
                                        transition: all 0.5s;
                                    }

                #mainContentWrapper {
                    height: inherit;
                    width: 100%;
                }

                    #mainContentContainer { 
                        display: grid;
                        grid-template-rows: 50% 50%;
                        overflow: hidden;
                    }

                        #aboutHLWrapper {
                            max-height: calc(100vh - 100px);
                            overflow-y: scroll;
                        }

                            #aboutHLContainer {
                                margin: 10px;
                                overflow-x: hidden;
                            }

                                #aboutHLContainer h2 {
                                    padding-top: 0;
                                    margin-top: 0;
                                }

                        #hlLiveFeedWrapper {
                            max-height: calc(100vh - 100px);
                            background-color: rgba(148, 136, 148);
                        }

                            #hlLiveFeedContainer {

                            }

                #footerWrapper {
                    position: absolute;
                    bottom: 0;
                    height: 50px;
                    width: 100%;
                    background-color: rgba(44, 2, 65);
                }

                    #footerContainer {
                        width: 100%;
                    }

        #loginUserError, #createUserError {
            padding-top: 15px;
            font-size: 15px;
            color: red;
        }

        #loginWrapper {
            position: absolute;
            top: 0;
            height: 100vh;
            width: 100vw;
            backdrop-filter: blur(2px);
            background-color: rgba(0, 0, 0, 0.6);
        }

            #loginContainer {
                height: 100%;
                width: 100%;
            }

                .acctUIWrapper {
                    position: relative;
                    top: 50%;
                    left: 50%;
                    transform: translateY(-50%) translateX(-50%);
                    max-height: 300px;
                    width: 80%;
                    max-width: 400px;
                    border-radius: 8px;
                    background-color: rgba(230, 228, 231);
                    color: black;
                }

                    .acctUIContainer {
                        height: 100%;
                        width: 100%;
                    }

                        .acctUITitleWrapper {
                            width: 100%;
                            font-size: 30px;
                            border-top-left-radius: 8px;
                            border-top-right-radius: 8px;
                            background-color: rgba(44, 2, 65);
                            color: white;
                        }

                            .acctUITitleContainer {
                                width: 100%;
                                text-align: center;
                                display: grid;
                                grid-template-columns: auto 20px;
                            }

                                .acctUITitleContainer section:nth-child(2) {
                                    position: relative;
                                    height: 20px;
                                    font-size: 20px;
                                    transition: all 0.5s;
                                }

                                    .acctUITitleContainer section:nth-child(2):hover {
                                        cursor: pointer;
                                        color: rgba(218, 165, 47);
                                    }

                        .acctUICredsWrapper {
                            margin: 10px;
                            font-size: 20px;
                            text-align: center;
                        }

                            .acctUICredsContainer {

                            }

                                .acctUICredsContainer input {
                                    border: none;
                                    border-bottom: 1px solid black;
                                    font-size: 15px;
                                    text-align: center;
                                    background-color: rgba(230, 228, 231);
                                }

                                    .acctUICredsContainer input:focus {
                                        outline: none;
                                        border: 2px solid #DAA52F;
                                        border-radius: 8px;
                                        background-color: white;
                                    }

                                #forgotLoginWrapper {
                                    width: 100%;
                                    padding-top: 20px;
                                    font-size: 13px;
                                    color: blue;
                                }

                                    #forgotLoginContainer {
                                        position: relative;
                                        left: 50%;
                                        transform: translateX(-50%);
                                        width: fit-content;
                                    }

                                        #forgotLoginContainer:hover {
                                            cursor: pointer;
                                            text-decoration: underline;
                                        }

                        .acctUIButtonsWrapper {
                            width: 100%;
                        }

                            .acctUIButtonsContainer {
                                width: 100%;
                                display: grid;
                                grid-template-columns: 50% 50%;
                            }

                                .acctUIButtonsContainer button {
                                    border: none;
                                    outline: none;
                                    font-size: 15px;
                                    background-color: rgba(230, 228, 231);
                                }

                                    .acctUIButtonsContainer button:nth-child(1) {
                                        border-bottom-left-radius: 8px;
                                        transition: all 0.5s;
                                    }

                                        .acctUIButtonsContainer button:nth-child(1):hover {
                                            cursor: pointer;
                                            color: white;
                                            background-color: rgba(100, 0, 0);
                                        }

                                    .acctUIButtonsContainer button:nth-child(2) {
                                        border-bottom-right-radius: 8px;
                                        transition: all 0.5s;
                                    }

                                        .acctUIButtonsContainer button:nth-child(2):hover {
                                            cursor: pointer;
                                            color: rgba(218, 165, 47);
                                            background-color: rgba(44, 2, 65);
                                        }

        #createAccountWrapper {
            position: absolute;
            top: 0;
            height: 100vh;
            width: 100vw;
            backdrop-filter: blur(2px);
            background-color: rgba(0, 0, 0, 0.6);
        }

            #createAccountContainer {
                height: 100%;
                width: 100%;
            }

@media screen and (orientation: landscape) {
        #mainWindowContainer {
            height: 100%;
            width: 100%;
        }

            #mainContentContainer { 
                display: grid;
                grid-template-columns: 50% 50%;
                overflow: hidden;
            }

                #aboutHLWrapper {
                    height: calc(100vh - 100px);
                    overflow-y: scroll;
                }

                #hlLiveFeedWrapper {
                    height: calc(100vh - 100px);
                    background-color: rgba(148, 136, 148);
                }
}