/*
How to change alignment of elements within elements: https://stackoverflow.com/questions/56998624/html-css-align-text-in-center-of-rectangle

*/

html, body
{
  /*This is to prevent objects(like rectangles) from
  being pushed away from the corners of the website lol*/
  margin: 0; 
  padding: 0;
}

body
{
  background-color: #070707;
  color: #ff3399;
  font-family: Verdana;
}

.highlight
{
  color: black;
  background-color: #ff3399;
  border-radius: 3px;
}

.rectangle
{
  height: 200px;
  width: 200px;
  background: white;
  color: black;
}

.header
{
  height: 100px;
  width: 100%;
  background: #ff3399;
  color: #070707;
  margin: 0;
  padding:0;
  
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.header_text
{
  margin: 0;
  padding: 0;
}

.pfp
{
  height: 100px;
  width: 100px;
  border-radius: 50%;
}

.pfpborder
{
  background-color: #ff3399;
  height: 110px;
  width: 110px;
  border-radius: 50%;
  
  display: flex;
  justify-content: center;
  align-items: center;
}