@font-face { font-family: AlfaSlabOne; src: url('AlfaSlabOne/AlfaSlabOne-Regular.ttf'); } 
@font-face { font-family: Oswald; src: url('Oswald/static/Oswald-Regular.ttf'); } 
/* Declares my custom fonts using the ttf files I downloaded */

h1 {
    color:rgb(115, 0, 0);
    font-family: 'AlfaSlabOne';
    font-size: 70px;
    -webkit-text-stroke:  1px black;
    /* Custom font is being used alongside a black text stroke */
  }

  h3 {
    color:rgb(115, 0, 0);
    font-family: 'AlfaSlabOne';
    font-size: 30px;
    font-style: italic;
  }

p {
    color: rgb(151, 151, 151);
    font-size: 20px;
    font-family: "Oswald";
}

label {
    color: rgb(151, 151, 151);
    font-size: 20px;
    font-family: "Oswald";
}

progress {
   border: none;
}

progress::-webkit-progress-value {
    background: red;
}

ul {
    color: rgb(151, 151, 151);
    font-size: 20px;
    font-family: "Oswald";
    list-style-type: square;
    list-style-position: inside;
    /* Inside style position keeps the points of the bullet list centered with the text */
}

body {
    background-color: black;
    background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(88, 0, 0, 0.5) ), url('brick.jpeg'); 
    /* Enhancement #3 I used the linear gradient style to add a red smoky haze to the background */
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-blend-mode: lighten();
    /* Credit to https://www.w3schools.com/html/html_images_background.asp. I used it to learn about background images. */
  }