body {
  background: #f7d5f7 url("https://oleandermoth.neocities.org/images/pattern%20357.gif");
	background-size: 100px 100px;
	background-attachment: fixed;
  background-position:center;
	font-size: 15px;
  margin: 0;
background-color: #FDA0C3;
color: #5c3443;
	font-family: monospace;
padding: 20px;
  }
  
a {
  color: #c5006e;
  }

:root {
    --accent: #740080;
    
}

h1, h2, h3, h4, h5, h6, p  { 
	margin: 5px;
	line-height: 1.2;
}
h1 { 
	font-size: 1.4rem;
	letter-spacing: 2px;
	font-weight: normal;
	text-align: center;
	border-bottom: 2px ridge var(--border);
	padding-bottom: 5px;
}
h2 { 
	font-size: 1.25rem;
	font-weight: normal;
	text-align: center;
}
h3 { 
	font-size: 1.1rem;
}
h4 { 
	font-size: 1rem;
	color: var(--accent);
	padding-left: 12px;
}

.container{
display: flex;
flex-direction: row;
gap: 1rem;
  margin:0 auto; 
  	max-width: 50rem;

}

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

.headers{
	font-family: monospace;
}

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

.area{
background-color: #FFE4F5;
padding: 2rem;
border: 20px solid #C36B8D;
border-image: url("https://i.imgur.com/gTFIwdW.png") 11 fill round;
flex-direction: column;
}

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

.posthead{
align-self: center;
}

.posth2{
font-size: 26px;
}

@media(max-width:480px){
.container{
flex-direction: column;
}
}

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

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

.fit {
  max-width: 99%;
}

/* Add a black background color to the top navigation */
.topnav {
  background-color: #fcf0f7;
  background-clip: padding-box;
  border: 20px solid #C36B8D;
border-image: url("https://i.imgur.com/gTFIwdW.png") 11 fill round;
  overflow: hidden;
  max-width: fit-content;
    margin:0 auto; 

}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #efa1b5;
  color: #ffffff;
}

/* Add a color to the active/current link */
.topnav a.active {
  background-color: #efa1b5;
  color: #ffffff;
}