:root {
    --bright: #0aa454;
    --vivid: #077d49;
    --dark: #254740;
    --main: #60b98f;
    --accent: #d4e7f7;
}

#RemoveListnumber {
    list-style: none;
    }

/*
Colours:
#A09ABC
#B6A6CA
#D5CFE1
#E1DEE9 -- Background
#D4BEBE
#7f6dd1 -- Hyperlinks
*/
body {
    font-family: "Figtree", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: normal;
    background-color: var(--accent);
    max-width: 800px;
    margin: 0 auto;
}

h1,
h3 {
    color: black;
    font-weight: normal;
}
/* homepage */
.gridTitle {
    display: grid;
    gap: 1rem;
    grid-template-rows: 1fr;
}
.gridBodyIndex {
    display:grid;
    gap: 1rem;
    grid-template-columns: 1fr 70%;
}
.banner{
    width: 110%; height: 120px; object-fit: cover
}
.container {
  grid-template-columns: ...  ...;
  /* e.g. 
      1fr 1fr
      minmax(10px, 1fr) 3fr
      repeat(5, 1fr)
      50px auto 100px 1fr
  */
  grid-template-rows: ... ...;
  /* e.g. 
      min-content 1fr min-content
      100px 1fr max-content
  */
}
a:link {
    color: var(--sat-purple);
}
a:visited{
    color: var(--sat-purple);
}
#contact
{
    line-height: 2em;
}
.status
{
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 7px;
    padding-right: 7px;
    background-color: var(--main);
}
.titles
{
    border: black;
    border-top-style: solid;
    border-bottom-style: solid;
    border-width: .08em;
}
#top-pic-index{
    object-fit: hidden;
    width: 100%;
    max-height: 100%;
   padding-right: 30px;
   padding-bottom: 1px;
}
p.indent {
    text-indent: 40px;
}
.blockquote
{
    background-color: #d7b7b6;
    padding-left: 40px;
    padding-right: 20px;
    border-left: 3px solid black;
    left: 50%
}

/*blog*/
.gridcontainer
{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows:  .5fr .25fr auto .25fr 1.5fr .25fr 1.5fr;
    justify-items: center;
    align-items: top;
    row-gap: 1em;
}
.title
{
    /* grid-area: row-start / col-start / row-end / col-end*/
    grid-area: 1/1/1/7;
}
.navBar
{
    grid-area: 2/1/2/7;
}
.headerFlex
{
    grid-area: 3/1/3/7;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    min-height: 100%;
    background-color: #d7b7b6;
}
.blogImage
{
    height:100px;
}
.thoughtsHead
{
    grid-row: 4/5;
    grid-column: 1/7;
    display: flex;
    flex-direction: column;
    min-width: 100%;
    margin-right: 5px;
    flex-wrap: nowrap;
}
.thoughtsHead h3 {
    color: black;
    font-weight: normal;
    font-size:x-large;
    background-color: #beaa8a;
    margin-bottom: 5px;
    margin-top: 0px;

}
.thoughtsHead h4{
    font-weight: normal;
    margin-top: 0px;
    margin-bottom: 0px;
}

.thoughts
{
    /*grid-area: 4/1/6/4*/ 
    grid-row: 5/6;
    grid-column: 1/7;
    display: flex;
    flex-direction: column;
    min-width: 100%;
    margin-right: 5px;
    flex-wrap: nowrap;
    overflow-y:scroll;
    scrollbar-color: #665e52 #D4BEBE ;
    scrollbar-width:thin;
    scrollbar-highlight-color: #665e52;
    max-height:200px;
    padding: 5px;
}
.projectsHead
{
    grid-area: 6/1/7/7;
    display: flex;
    flex-direction: column;
    justify-content: start;
    min-width: 100%;
    flex-wrap: nowrap;
    margin-left:10px;
}
.projectsHead h3 {
    color: black;
    font-weight: normal;
    font-size:x-large;
    background-color: #beaa8a;
    margin-bottom: 5px;
    margin-top: 0px;
}
.projectsHead h4{
    font-weight: normal;
    margin-top: 0px;
}

.projects
{
    grid-area: 7/1/8/7;
    display: flex;
    flex-direction: column;
    justify-content: start;
    min-width: 100%;
    flex-wrap: nowrap;
    margin-left:10px;
    overflow-y:scroll;
    scrollbar-color: #665e52 #D4BEBE;
    scrollbar-width:thin;
    scrollbar-highlight-color: #665e52;
    max-height:200px;
    padding: 5px;
}

.blogCard
{
    background-color: #d7b7b6;
    margin-bottom: 10px;
}
.blogCard h4{
    font-size:larger;
    padding-left: 5px;
    padding-bottom: 0px;
}
.blogCard p{
    padding-left: 20px;
    padding-top: 0px;
}

.date {
    font-size:small;
    text-align: right;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-right: 10px;
}