/*variables*/
/*buttons*/
/*nav*/
/*alert*/
/*displays*/
/*chengyu*/
/*login*/
/*stats*/
/*account*/
/*saved*/
/*flashcards*/
/*cards*/
/*elements*/
/*sets*/
/*inspect_reports*/
/*search*/
/*misc*/
/*profile*/

/* Containers and Sections */
html, body {
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--mainBG);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    position: relative;
}

main {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}
section {
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 25px;
}
.column {
    /*padding: 10px;*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 25px;
}

.row {
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: no-wrap;
    gap: 20px;
    padding: 0px;
}
@media (max-width: 768px) {
    .row {
        min-width: 95%;
        max-width: 95%;
    }
}

.two_columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.three_columns {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}









/* Page Title and information center on each page */

#page_title_container {
    overflow-x: hidden;
    margin-bottom: -0.5rem;
}
.page_title_card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 25px;
    margin-top: 2rem;
    /*margin-bottom: -1rem;*/
    width: 350px;
    padding: 25px;
    cursor: pointer;
    
}

.page_title_card.focused {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translate(-50%, 0%);
    width: 350px;
    z-index: 998;
    height: max-content;
    overflow-y: auto;
    border: var(--defaultBorder);
    border-radius: 10px;
    background-color: var(--elementBG);
}
.page_title_row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}
.page_title_text {
    font: var(--normalFont);
    font-size: 2rem;
    color: var(--pageTitleColor);
}
.toggle_page_title_extra {
    width: 2rem;
    height: 2rem;
    border: none;
}
.title_toggle {
    font-size: 2rem;
    margin-top: 3px;
    color: var(--pageTitleColor);
}
#page_title_extra {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
}
.page_title_card.focused #page_title_extra {
    display: flex;
}
.page_title_extra_box {
    /**/
}
.page_title_extra_text {
    text-indent: 2rem;
    color: var(--pageTitleColor);
    /*flex-grow: 1;*/
}
.page_title_extra_text_no_indent {
    color: var(--pageTitleColor);
}

.page_title_extra_icon {
    width: 60px;
    height: 50px;
    padding-right: 25px;
    float: left;
    border-radius: 50px;
}
.title_icon {
    font-size: 3rem;
    width: 50px;
    height: 50px;
    color: var(--pageTitleColor);
}

.title_card_separator {
    min-width: 95%;
    height: 2px;
    background-color: var(--pageTitleColor);
    border-radius: 1px;
}



@media (max-width: 999px){
    .page_title_text {
        font-size: 1.5rem;
    }
    .toggle_page_title_extra {
        width: 1.5rem;
        height: 1.5rem;
    }
    .title_toggle {
        font-size: 1.5rem;
        margin-top: 4px;
    }
}