body { /*Using the body selector here makes it so that all styles within will apply to the entire document*/
    font-family: Arial, sans-serif; /*Simply setting the font family for the content displayed on the HTML files where this .css file is called*/
    background-color: #9b9b9b; /*Setting the background colour to a lightish grey. Like much of styling, not necessary but I felt it looks better than a bright white page*/
    margin: 5px; /*Margin is what sets the spacing outside of the element in question, in this case just the one body element, so is quite pointless here*/
    padding: 5px; /*Padding is what sets the spacing inside of the element in question, same as margin in this case, as there is only one element specified, not really needed*/
    display: flex; /*Setting the display property to flex I find often works the best. It allows the content to scale and move accordingly to how the user resizes their window in which the content is displayed*/
    justify-content: center; /*This property packs the items in question around the center of the page*/
    height: 50vh; /*This property specifies at which location the content should be displayed. The vh parameter is for viewport height, this could also be replaced with px but the value would need to change if you wanted to keep the items in the same place.*/
    /*The vh parameter is a % rather than a specific lcoation for a number. For example, in this project I used px with numbers like 500, to specify the width of content*/
}