/* Joshua McBrantie
ITWP-1050 
Assignment name: module 4 homework 3
assignment description:
style a html page using css learned from chapters 5-6 using a separate styles.css file.
 must include 4 paragraphs 50 words per and 2 images total word count should be 200 words
 styler the page within the requirements and to your own personal liking. 

 i have modeled this off a page for the company i work for home depot i have made slight changes and used what we have learned for the key concepts. 

*/

/* --------------------------------------------------- */
:root {/* setting up vars inside the root */
    --thd-orange: #F96302;
    --bs-body-font-family: "Neue Helvetica W01", "HelveticaNeueLT Std Condensed", HelveticaNeueLT Std, "HelveticaNeueLT Std", "Helvetica Neue", Helvetica Neue, Helvetica, Arial, sans-serif;
}
/* setting up fonts to use within the page */
@font-face {
    font-family: roboto-black;
    src: url(/itwp1050/homework3/fonts/Roboto/Roboto-Black.ttf)format('ttf');
    font-weight: 600;
}
@font-face {
    font-family: roboto-reg;
    src: url(/itwp1050/homework3/fonts/Roboto/Roboto-Regular.ttf)format('ttf');
    font-weight: 400;
}
 body { /* giving the body the orientation of column for stacking content within the body */
    display: flex;
    flex-direction: column;
    margin: 0;
    line-height: 1.6rem; /* using line height to make it easier to read the  text within the document */
}
 
.header-img {
    background-image: url(/itwp1050/homework3/images/Bernie-BFS-3000.jpg); /* used a background image to give the header area a nice view of Bernie */
    
    background-color: white; /* i believe if the image fails to load it should dispaly this color as the background */
    height: 500px;
    background-position: center; /* centers the background and the following stops the image from repeating */
    background-repeat: no-repeat;
    background-size:  cover;
    box-shadow: 2px 2px 10px inset;
    
    
    
    
}
.article { /* this class allows you to directly edit the content in the main stage */
    margin: 0 10%;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: solid lightgray 1px ; /* gave the bottom a separation line from the text to the footer navigation */
}
.article-title h1 { /* targeting only the h1 that are inside the class article-title */
    font-size: 2rem;
    font-weight: bolder;
    font-family: roboto-black, Arial, sans-serif; /* using a downloaded font to clean up the words and for clear reading love roboto fonts */
    text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.274); 
    letter-spacing: normal;
    font-variant: small-caps; /* was a requirement but i actually like how this changed the look by making only the first character of each word large capitals while the rest of the characters are small capitols */
    white-space: nowrap;
}
/* the next two targets show how adding a class can change the look of two of the same elements. */
.article-title h3 {
    color: var(--thd-orange); 
    
}
.article-text h3 {
    text-decoration: underline;
}
.thd-logo { /*task 1 using linear-gradient to decorate the background of the home depot banner. */
    position: relative;
    background-image: linear-gradient( var(--thd-orange), rgba(255, 136, 0, 0.945), var(--thd-orange));
    width: 60vw;
    transform: translateX(-70%); /* gives the look of an element coming off from the edge of the page. */
    padding: 10px;
    margin-top: 20px;
    
}
.thd-logo h2 { /* stylizes the text with in the logo class. */
    text-align: right; /* aligning the text to the right keeps the text on the page with the look i am going for */
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    margin: 0;
    font-family: roboto-black, Arial, sans-serif;
}

p {
    font-family: roboto-reg, Arial, sans-serif;
}
.gallery {
    display: flex; /* display flex is declared here so that i can change the flex direction to row for image galleries. */
    flex-direction: row;
    justify-content: space-between; /* takes any remaining space and divides it between the objects within this class spacing them out evenly. */
    

}
.gallery img {

    width: 25%;
    height: 25%;
    box-shadow: 5px 5px 10px black;
    border-radius: 2px;

}

footer {
    text-align: center;
    padding: 10px;
} 

.external-link::after {
    content: "(External)";
    color: var(--thd-orange);
}
.thd-link { /* used this to stylize the link in the content p tags to give it a thd look while removing the underline */
    color: var(--thd-orange);
    text-decoration: none;
}
a {
    text-decoration: none;
}
.article-text span { /* gave significance to the book Bernie wrote by giving it a font style and a color  */
    color: var(--thd-orange);
    font-style: italic;
}