/* CSS file for use with homework 7 */
/* ITWP-2750 */

/*spacing for li items*/
li {
    margin-bottom: 20px;
}

/*spacing between facts list and sources list*/
ul {
    margin-bottom: 30px;
    margin-top: 10px;
}


/* This uses the web font Helvetica Rounded Black for the all of the body text within the web page */
body {
    font-family: 'KirbyText', sans-serif;
    text-align: center;

    /*background image with overlay so its readable*/
     background-image: url("images/kirbybackground.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
}

/* If you wish to add any Google or Web fonts, you can use the @font-face property to do so.
	Here is a good reference for including web fonts in your web page: https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp
	
	I left my code in as an example. Note the font family name and how it's used.
*/

/* Downloaded Fonts from the Web */
@font-face {
    font-family: "KirbyTitle";
    src: url("fonts/HelveticaRoundedBlack.otf");
}

@font-face {
    font-family: "KirbyText";
    src: url("fonts/RodinPro.otf");
}

a:link {
    color: #FFD93B
}

a:visited {
    color: #FF69B4;
}

/*remove bullts from source list*/
.sources {
    list-style-type: none;
    margin-bottom: 40px;
}

/*put facts in smaller text area*/
.facts {
    max-width: 600px;
    margin: 0 auto;
}

/* the heading tags use the helvetica rounded black font */
h1 {
    text-align: center;
    font-family: "KirbyTitle";
}

h2 {
    font-family: "KirbyTitle";
    margin-top: 40px;
}

/* Set the paragraph tag page margin*/
p {
    margin: 1em;
}

/* This code makes the images responsive */

.responsive {
    width: 100%;
    max-width: 600px;
    height: auto;
    margin: auto;
    
}
.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

/* Formats the list of sources */
.sources {
    font-size: 11px;
    font-weight: bold;
}

/* ID that centers the validation text */
#validation {
    text-align: center;
}

/* Formats the date that resides in the footer */
#date {
    font-style: italic;
    font-size: 10px;
    text-align: center;
}