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


/* This uses the web font Roboto for the all of the body text within the web page */
body {
    font-family: 'BodyFont', sans-serif;
}

/* 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: "Macondo";
    src: url(webfonts/Macondo-Regular.ttf);
}
@font-face {
    font-family: "Astloch";
    src: url(webfonts/Astloch-Regular.ttf);
}


/* The heading tags uses the LuckiestGuy-Regular.ttf font */
h1 {
    text-align: center;
    font-family: 'Astloch';
    font-size: 60px;
}

/* Set the paragraph tag page margin */
.overviewText {
    margin: 50px auto;
    font-size: 18px;
    color:rgb(179, 243, 252);
    font-family: 'Macondo';
    width: 75%;
}
.subtitle{
    font-family: 'Macondo';
    color:rgb(59, 17, 99);
    font-size: 20px;
    margin-left: 50px;
    width: 75%;
}

ul, ol, li{
    font-family: 'Macondo';
    color:rgb(14, 72, 30);
    font-size: 18px;
    margin-left: 50px;
    width: 85%;
}

/* This code makes the images responsive */
.bodyimage{
    margin:5px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 99%;
    border: 10px solid black;
}
.responsive {
    width: 100%;
    max-width: 600px;
    height: auto;
    margin: auto;
    
}
.center img {
    margin:5px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 99%;
    border: 10px solid black;
}

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

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

/* Formats the date that resides in the footer */
#date {
    font-style: italic;
    font-size: 14px;
    text-align: center;
    color:rgb(59, 59, 59);
}

html{
    background-image:linear-gradient(to right, #ff9500, #ff0000, #695200);
    background-repeat: no-repeat;
}

.middle img{
    width: 250px;
    margin: auto;
    display: flex;
    justify-content: center;
    border-radius: 15%;
}