body {
    background: #F8FAFC;
    background-repeat: repeat-x;
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

header {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
    background-color:#D9EAFD;
    display: flex;
    align-items: center;
}

header img {
  margin-left: 30px;
}

.container {
    display: grid;
    grid-template-columns: 30px 800px;
    grid-template-rows: 35px 18px 200px 50px 170px auto;
    width: 830px;
    margin: 0; 
}

nav {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    background-color: #3f3f3f;
    display: flex;
    align-items: center;
}

nav a.active  p {
  background-color: #D9EAFD;
  color: #9AA6B2;
}

.active {
  background-color: #D9EAFD;
  color: #9AA6B2;
  padding: 3px;
  margin: 0px;
}

.page_nav {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
    background-color: #F9F4F5;
    display: grid;
    grid-template-columns: 600px 200px;
    grid-template-rows: 200px 30px;  
}

.banner {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    background-image: url("https://file.garden/ZgDkGxdyQ318TtXf/gabe.'s%20website/headers/journalblogheader(11_9_2025).png");
    background-size: contain;
    background-repeat: no-repeat;
}

.title {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    background-color: #F9F4F5;
}

.banner_square {
    grid-column: 2 / 2;
    grid-row: 1 / 3;
    background-color: #F9F4F5;
    background-image: url("https://file.garden/ZgDkGxdyQ318TtXf/gabe.'s%20website/rightads/journal%20soundtrack%20ad%20(11_9_2025).png");
    background-size: contain;
    background-repeat: no-repeat;
}

h1 {
    font-family: arial;
    padding: 6px;
    font-size: 20px;
    color: #9AA6B2;
}

p {
    font-family: arial;
    padding: 6px;
    font-size: 10px;
    color: #F8FAFC;
}

main {
    grid-column: 2 / 3;
    grid-row: 4 / 5;
    background-color: #F8FAFC;
    display: grid; 
    grid-template-columns: 250px 550px; 
    grid-template-rows: 30px 10px 100px 1000px;
 }
 
.main_title {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    background-color: #F8FAFC;
    display: grid;
    grid-template-columns: 0px 250px 600px;
    grid-template-rows: 30px;
}

.main_titlescroll {
    grid-column: 2 / 2;
    grid-row: 1 / 2;
    background-color: #9AA6B2;
    display: grid;
    grid-template-columns: 0px 550px 600px;
    grid-template-rows: 30px;
}

#title_text{
    background-color: #D9EAFD;
    grid-column: 2 / 3;
    padding: 0px;
}

#title_text p {
    font-size: 12px;
    color: #F8FAFC;
    padding-left: 6px;
}

#title_textscroll {
    background-color: #9AA6B2;
    grid-column: 2 / 3;
    padding: 0px;
}

#title_text p {
    font-size: 12px;
    color: #9AA6B2;
    padding-left: 6px;
}

#center_grey {
    background-color: #9AA6B2;
    grid-column: 3 / 4;
}

.left_header{
    grid-column: 1 / 2;
    grid-row: 3 / 4;
    border-right: #7c7c7c 2px solid;
}

.left_content{
    grid-column: 1 / 2;
    grid-row: 4 / 5;
    border-right: #7c7c7c 2px solid;
    margin: 0px 0px 10px 10px;
}

.left_content a {
    color: #F8FAFC;;
}

.left_content .category{
    font-family: visitor1;
    width: 220px;
    font-size: 12px;
    padding: 2px 2px 2px 25px;
    background-color: #b8c035;
    color: #F9F4F5;
}

.tab_header, h3 {
    margin: 3px 0px 0px 0px;
    width: 220px;
    height: 20px;
    background-color: #BCCCDC;
    font-size: 12px;
    font-family: arial;
    color: #F8FAFC;
    padding: 5px 0px 0px 2px;
}

.tab_body {
    width: 220px;
    overflow-y: auto;
    background-repeat: repeat-y;
    background-color: #BCCCDC;
    font-family: MSPGothic;
    font-size: 12px;
    padding: 0px 0px 0px 2px;
}

.nowplaying  h2 {
  padding: 0px;
  font-family: arial;
  color: #9AA6B2;
}

.tab_body img {
    width: 60px;
    margin: 0px 3px 3px 0px;
    float: left;
}

.tab_footer p {
    margin: 0px 0px 3px 0px;
    width: 220px;
    height: 15px;
    background-color: #BCCCDC;
    color: #9AA6B2;
    font-size: 10px;
    padding: 0px 0px 0px 2px;
}

.tab_footer img{
    padding: 0px 0px 0px 0px;
}

.right_main {
    grid-column: 2/ 3;
    grid-row: 3 / 5;
    display: grid;
    grid-template-columns: 275px 275px;
    grid-template-rows: 100px 200px 200px 100px 200px 200px;
}

.right_main a {
    color: #3f6a95;
}

#main_hello {
    grid-column: 1 / 2;
    grid-row: 2/ 3;
    margin: 10px;
}

#main_blogheader {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
    margin: 10px;
}

footer {
    grid-column: 2 / 3;
    grid-row: 5 / 6;
    background-color: #F9F4F5;
    font-family: MSPGothic;
    font-size: 12px;
    margin: 50px 10px;
    border-bottom: #7c7c7c 2px solid;
    border-top: #7c7c7c 2px solid;
}