/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   
/* hey look, a folder to serve as a better way to organize things, how fun! */



body {
  
  /* might wanna find a cooler font. */
  font-family: 'Courier New', Courier, monospace;
  
    /* Setting background image. Just note that you can, indeed, use pngs, so the line color can be changed.*/
  background-image: url("/images/plargDead_NightClear.png");
  background-color: #2F0000;
  background-size: 400px 250px;
  
  /* trying to animate the background. */
  position: relative;
  animation: diagScroll 18s linear infinite;
  background-repeat: repeat;
}



h1 {
    /* Yes, you can set more specific colors with hex codes! Neato. */
    color: #FF0000;
    text-align: center;
    width: 900px;
    
    /* Based on that one video, I'm not sure using auto margin is the best idea, but it'll do for now, I suppose. */
    margin: auto;
    
    /* This determines the line spacing in pixels. Might need to create another class if I need to change things, or just use "<br>" in the HTML doc. */
    line-height: 100px;
}

p {
    color: #ba1004;
    text-align: center;
    background-color: rgba(0,0,0, 0.5);
    width: 900px;
    line-height: 25px;
    margin: auto;
    
}

img {
  /* This is, somehow, the only way an image can be centered. Not sure why, it seems somewhat inefficient.
  Still, w3Schools has spoken, and I am but a pawn in its game, so I have no choice but to blindly follow.
  
  ...This is a fun project anyways, so I don't care. I'm just glad things look... alright.*/
  display: block;
  margin-left: auto;
  margin-right: auto;
  
  
}

iframe {
  margin:auto;
}

/* The animation code */
@keyframes diagScroll {
  from {
    background-position: 0px 0px;
  }
  
  to {
    background-position: 800px 250px;
  }
}