*{
box-sizing: border-box;
margin: 0;
padding: 0;
}

body{
margin: 0;
background-color: #A8BBA3;
color: #254F22;
font-family: "Instrument Serif", serif;
padding: 20px;
font-size: 23px;
}

.title{
padding-left: 0.5rem;
font-size: 40px;
line-height: 30px;
position: relative;
z-index: 1;
}

.container{
display: flex;
flex-direction: row;
gap: 1rem;
}



.block-1{
flex-grow: 1.5;
flex-basis: 0;
padding: 20px;
display: flex;
flex-direction: column;
row-gap: 10px;
background-color: #EDE4C2;
}

.block-2{
flex-grow: 8;
flex-basis: 0;
}

.pfp{
max-width: 200px;

}

.headers{
font-family: "Instrument Serif", serif;
}

.block-1 ul{
padding-left: 2.5em;
}

.block-1 li{
font-style: italic;
}

.content{
display: flex;
flex-direction: column;
row-gap: 1rem;
}

.area{
background-color: #EDE4C2;
padding: 1rem;
border-left: 4px solid #F5824A;
display: flex;
flex-direction: column;
row-gap: 1rem;
}

.area ul{
  padding-left: 1.0em;}

.postheadwrapper{
display: flex;
justify-content: space-between;
}

.posthead{
align-self: center;
}

.posth2{
font-size: 25px;
}

.date{
font-size: 20px;
}

.icon{
width: 75px;
opacity: 1;
align-self: center;
}

.art{
max-width : 300px;
  height : auto;
  object-fit : cover;
  object-position: center;
  align-self: center;
}

.inside{
  max-width: 300px;
  height: auto;
  float: left;
  }

@media(max-width:480px){
.container{
flex-direction: column;
}
.block-1{
height: auto;
text-align: center;
}
.pfpwrapper{
display: flex;
justify-content: center;
}
.pfp{
width: 50%;
}

.block-1 ul, li{
display: inline;
padding: 0;
}
.block-1 li{
margin-left: 5px;
}
.title{
text-align: center;
font-size: 50px;
}
}

a{
color: #254F22;
text-decoration: underline;
}

a:visited{
color: #A03A13;
}

a:hover{
font-weight: bold;
}

a:active{
font-weight: normal;
}

::-webkit-scrollbar{
width: 6px; 
}
    
::-webkit-scrollbar-track{
background-color: transparent;
}

::-webkit-scrollbar-thumb{
background-color: #F5824A;
}

#credit{
font-size: 12px;
position: fixed;
bottom: 0;
right: 0;
}