/*
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;
  
  font-family: LightOut;
  font-size: large;
}

body
{
  background-color: #070707;
  background-image: url('img/background.png');
  background-size: 20%;
  color: #ff3399;
}

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

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

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

.header_text
{
  background: #ff3399;
  color: #070707;
  
  margin: 0;
  padding: 0;
  font-family: Gothic;
  font-weight: bold;
}

.header_text:hover
{
  color: #ffffff;
}

.main-content
{
  display:flex;
}

.main-elements
{
  width: 33%;
}

.aboutme
{
  background-image: url("img/background.glitched.png");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  height: 999px;
}

.pfp
{
  height: 100px;
  width: 100px;
  border-radius: 50%;
  
image-rendering: optimizeSpeed;
-ms-interpolation-mode: nearest-neighbor;
}

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

.icon
{
  height: 40px;
  width: 40px;
  
  image-rendering: optimizeSpeed;
-ms-interpolation-mode: nearest-neighbor;
}

.featured_sign
{
  height: 0%;
  width: 100%;
  
  display: flex;
  justify-content: center;
  align-items: center;
}

.featured_txt
{
  background-color:#ff3399;
  color:#070707;
  
  border-radius: 3px;
  font-family: Square;
  
  text-align: center;
  padding: 25px 80px;
}

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

.spoiler:hover
{
  background-color: #070707;
  color: #ff3399;
}

.browse
{
  background-image: url("img/Untitled.png");
  background-size: cover;
  
  font-family: Console1;
  color: white;
  overflow: auto;
}

.window-header
{
  background-image: url("img/background.glitched.png");
}

.window-content
{
  background-image:#ffffff;
}

.window-content-interior
{
  
}

@font-face
{
   font-family: Square;
   src: url("rsrc/Square.ttf");
}

@font-face
{
  font-family: Square;
  font-weight: bold;
  src: url("rsrc/Squareo.ttf");
}

@font-face
{
  font-family: Anke;
  font-weight: normal;
  font-style: normal;
  src: url("rsrc/Anke Print.woff");
}

@font-face
{
  font-family: Gothic;
  src: url("rsrc/ScribbleGothic.otf");
}

@font-face
{
  font-family: LightOut;
  src: url("rsrc/lightout.ttf");
}

@font-face
{
  font-family: Console1;
  src: url("rsrc/WebPlus_IBM_VGA_8x16.woff");
}

@font-face
{
  font-family: Console2;
  src: url("rsrc/Web437_IBM_VGA_8x16.woff");
}

.pixelart
{
  image-rendering: optimizeSpeed;
-ms-interpolation-mode: nearest-neighbor;
}