/* Full site CSS*/

body {
    color: antiquewhite;
    margin: 0px;
    padding: 0px;
    background-color: rgb(37, 37, 37);
    /*overflow-x: hidden;*/
    overscroll-behavior: none;
}

.header-main {
    position: sticky;
    top: 0;
    z-index: 20;
    width: 100vw;
    height: 55px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-bottom: 4px solid rgb(55, 55, 55);
    background-color: rgb(50, 50, 50);
    margin: 0;
    overflow-y: hidden;
}

#header-title {
    display: flex;
    gap: 20px;
    margin: 5px 0px 0px;
}

#tool-bar-header {
    display: flex;
    gap: 20px;
    margin: 5px 85px 0px;
}

.toolbar-button {
    width: fit-content;
    height: fit-content;
    padding: 10px;
    color: rgb(185, 174, 160);
    text-decoration: none;
    font-family: 'sono', monospace;
}

.toolbar-button:hover {
    width: fit-content;
    height: fit-content;
    padding: 9px 10px;
    color: rgb(196, 185, 170);
    text-decoration: none;
    font-family: 'sono', monospace;
    border-bottom: 2px solid rgb(255, 94, 0);
    background-color: rgb(55, 55, 55);
}

.toolbar-button-selected {
    width: fit-content;
    height: fit-content;
    padding: 10px;
    color: antiquewhite;
    text-decoration: none;
    font-family: 'sono', monospace;
}

#tool-bar {
    height: fit-content;
    flex-grow: 1;
    border: 0px solid black;
    margin: 0px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: left;
}

.link {
    text-decoration: none; 
    color: antiquewhite; 
    font: 'sono', monoscript;
}

/* Home Page */

#home-main-body {
    width: 100vw;
    display: flex;
    gap: 0px;
    height: calc(100vh - 59px);
    margin: 0px;
    padding: 0px;
}

#home-content {
    height: calc(100vh - 89px);
    width: calc(75vw - 45px);
    margin: 15px;
    display: grid;
    gap: 15px;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: repeat(4, 1fr);
    border: 0px solid red;
    padding: 0px;
    box-sizing: border-box;
}

#latest-blog {
    width: 100%;
    height: calc(100vh - 89px);
    margin: 0px;
    padding: 0px 15px;
    border: 2px solid rgb(52, 52, 52);
    background-color: rgb(30, 30, 30);
    grid-column: span 1;
    grid-row: span 4;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 15px;
    overflow-y: auto;
}

#chat {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    border: 2px solid rgb(52, 52, 52);
    background-color: rgb(30, 30, 30);
    grid-column: span 1;
    grid-row: span 2;
    box-sizing: border-box;
}

#current-project {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    border: 2px solid rgb(52, 52, 52);
    background-color: rgb(30, 30, 30);
    grid-column: span 1;
    grid-row: span 2;
    box-sizing: border-box;
}

.footer-main {
    width: 100%;
    height: fit-content;
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: center;
    gap: 10px;
    margin: 0px;
    padding: 0px;
    border: 0px solid blue;
    background-color: rgb(46, 46, 46);
}

/* Blog */

#blog-posts {
    display: flex;
    height: calc(100vh - 89px);
    flex-grow: 1;
    margin: 15px;
    padding: 0px;
    gap: 15px;
    overflow-y: hidden;
    flex-direction: column;
    border: 2px solid rgb(52, 52, 52);
    background-color: rgb(30, 30, 30);
    box-sizing: border-box;
}

#blog-post-box {
    display: flex;
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 15px;
    gap: 15px;
    overflow-y: auto;
    flex-direction: column;
    box-sizing: border-box;
}

.post {
    /* width: 100%; */
    height: fit-content;
    padding: 15px;
    background-color: rgb(50, 50, 50);
    border: 2px solid rgb(54, 54, 54);
    text-decoration: none;
    color: antiquewhite;
}