/*Every CSS rule must have a { bracket after the element name and a } bracket the end of the attribute and properties list */

*{ /*turn the default margings and padding of the web browser to 0*/
  margin: 0px;
  padding:0px;
  display: border-box;
}
h1{
  color: black; /*sets the text color*/
  background-color:black; /*sets the background color*/
  text-shadow: 2px 2px silver;
  padding: 50px 0px 50px 0px;/*sets the padding starting in this order top|right|bottom|left*/
  text-align:center;/*aligns the text to center*/
  font-size: 4em;/*changes the font size the em setting changes the font to 4 times its default size*/
}
main{
  background-color:black;
  min-height: 700px;/*sets the minimum height of the main content area in pixels but the area can be bigger if neccessary to fit the content*/
}
h2{
  font-size: 3em;
  color:white;
  font-family:Times New Roman;/*sets the font family for a list of web safe built in font name go to https://www.w3schools.com/cssref/playit.asp?filename=playcss_font-family*/
  text-align:center;
  text-shadow: ;/*adds a drop shadow to the text only in this order h-shadow|v-shadow|color you can also add a blur if needed in this order h-shadow|v-shadow|blur raius|color */
  margin-top: 25px; /*adds a margin space at the top*/
  padding: 100px 0px 100px 0px;
background-image: url(https://images.hdqwalls.com/download/assassins-creed-syndicate-logo-dark-4k-ax-1366x768.jpg);/*grabs an image hosted online and places in the background behind the text*/
  background-repeat:no-repeat; /*keeps the image from repeating across the screen*/
  background-size:cover;/*enlarges the image to cover container*/
  background-position:100% 10%; /*When the image is enlarge this attribute and properties set the X and Y axis to what will be viable in the browser you can set the property to by simply using top, bottom, left, right and many more options */
}
p{
  padding: 25px;
  font-size: 14pt;
}
h3{
  padding: 25px;
  color: black;
  font-size: 1.5em;
}
ul{
  margin-left: 50px;/*adds a margin space on the left*/
  font-size: 14pt;
  display:inline-grid;/*All direct children the <li> tags of the grid container <ul> automatically become grid items. */
  grid-template-columns: repeat(4, 1fr); /*create 4 columns and size each column to be 1 fraction or in this case 25% of the screens width */
  grid-template-rows: auto;/*creates the number of rows need to fit the content into the columns created */
  grid-gap: 30px; /*adds a space between the rows and columns in the grid*/
}