/*These are 'class'(es) that you can use to change what text looks like either with its own paragraph <div> or when its in the same line as other text <span>*/
.white{color:white;}
.name{color:#FF80AF;
      font-weight: bold;
}

/*This is the colour for 1) Link text color, and then what the link text color is when the cursor/mouse hovers over it.*/
a {color:#ff80ee;}
a:hover {	color:#f9ee70;}


/*This controls what the text and background colour look like in the website*/
body {
  text-align: left;
	line-height: 1.6;
	font-size: 18px;
	font-family: Monospace;
	background-color: #3a0055;
	color: #E6BDF9;
	padding-left: calc(100vw - 100%);
}

/*What images look like*/
img {
	width: 100%;
	height: auto;
}


/*What text looks like and where it is when using <hNUMBER> tags for headings*/
h1,h2,h3,h4,h5,h6{font-weight: bold;color: #ffffff;}
h1{margin-block-start: 0.67rem;
	margin-block-end: 0.67rem;
	font-size: 2.00rem;}
h2{	margin-block-start: 0.83rem;
	margin-block-end: 0.83rem;
	font-size: 1.50rem;}
	@media screen and (max-width: 480px) {
  h2 {
    font-size: 0.95rem;
  }
}
h3{	margin-block-start: 1rem;
	margin-block-end: 1rem;
	font-size: 1.17rem;}
h4{	margin-block-start: 1.33rem;
	margin-block-end: 1.33rem;
	font-size: 1.00rem;}
h5{	margin-block-start: 1.67rem;
	margin-block-end: 1.67rem;
	font-size: 0.83rem;}
h6{	margin-block-start: 2.33rem;
	margin-block-end: 2.33rem;
	font-size: 0.67rem;}

/*Still not super sure what an article is*/
article h1:first-of-type {
	margin-block-start: 1.67rem;
}

/*What the text in the footer looks like*/
footer{ opacity: 0.5;
  
}

#postedlistdiv ul, #header ul {	list-style-type: none;	list-style-type: none;}

#container {
	margin: 2.5rem auto;
	width: 90%;
	max-width: 60ch;
}
#postlistdiv ul {
	padding-left: 0;
}
#header ul {
	padding-left: 0;
}
#header li {
	display: inline;
	font-size: 1.2rem;
	margin-right: 1.2rem;
}


button
{
  border-radius: 50px;
  border: 2px solid black;
  background: pink;
font-family: sans-serif;
font-size: 1em;
color: black;
width: 200px;
}