/* 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: 'Mrs_Eaves', sans-serif;
    background-color: #2f2f2f;
    color:white;
    margin-left: 75px;
    margin-right: 75px;
    margin-bottom: 25px;
    
}

main {
    font-size: 18px;
}

/* 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: "BD_Plakatbau";
    src: url("fonts/BD_Plakatbau.otf");
}
@font-face {
    font-family: "Mrs_Eaves";
    src: url("fonts/Mrs-Eaves.ttf");
}


/* The heading tags uses the LuckiestGuy-Regular.ttf font */
h1 {
    text-align: center;
    font-family: "BD_Plakatbau";
    font-size: 56px;
    color: #d62121;
}

h2 {
    font-family: "BD_Plakatbau";
    font-size: 42px;
}

h3 {
    font-family: "BD_Plakatbau";
    font-size: 24px;
}

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

/* This code makes the images responsive */

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

/* Formats the list of sources */
.sources {
    font-size: 16px;
    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: 14px;
    text-align: center;
}

a:link {
    color: #d62121;
}
  
  /* visited link */
a:visited {
    color: #c141ec;
}
  
  /* mouse over link */
a:hover {
    color: #c5c5c5;
}

#img_flex {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: -25px;
    align-items: center;
}

#bio_img {
    float:right;
    width: 100%;
    max-width: 300px;
    height: auto;
    margin: auto;
}