@charset "UTF-8";

html {
    background-color: lightskyblue;
    font-family: "Trebuchet MS", Verdana, sans-serif;
    color: black;
    font-size: 10px;
}

body {
    margin: 0 auto;
    min-width: 768px;
    max-width: 1024px;
}

header {
    font-size: 1.8rem;
}
/* STEP 1: Float the HEADER IMG to the left */
header img {
    float: left;
}

header a {
    text-decoration: none;
}
/* STEP 2: Set the text-align for both the HEADER H1 and the HEADER H2 to right */
header h1,
header h2 {
    text-align: right;
}
/* STEP 3a: Reduce the margin-bottom of the HEADER H1 to zero, so that the following H2 sit up a bit closer to the H1 */
header h1 {
    margin-bottom: 0;

}
/* STEP 3b: The HEADER H2 has a margin-top by default, set that also to zero to bring it up a bit closer to the H1 */
header h2 {
    margin-top: 0;
    text-transform: uppercase;
}

/* STEP 4d: There's a bit of padding-left on the UL element that contains the LI elements - set it to zero */
header nav ul {
    padding-left: 0;
}

/* STEP 4a: Apply a 1px dashed red outline around each of the LI elements inside the HEADER NAV so that we can see that each LI is a box (border-width, border-style, and border-color) */
header nav li {
    /* STEP 4e: Comment out the properties and values for the red border in the above CSS rule - we don't need it any more */
    /* border: 1px dashed red; */ 
    /* STEP 4b: Set the above LI elements (which default to display: block as we can see in the browser), to display: inline-block so that they line up horizontally across the top of the page */
    display: inline-block;
    /* STEP 4c: Add a margin-right of 0.5em (half a font-size) to the above rule for the LI elements */
    margin-right: 0.5em;
}

/* This rule is now redundant as it's included in 'header nav li' above, but keeping it for completeness of the original file structure: */
/* li {
    margin-right: 0.5em;
} */


main {
    font-size: 1.8rem;
    line-height: 1.5;
    text-align: justify;
    background-color: white;
    /* Arrange the SECTION and the ASIDE elements side-by-side in columns */
    display: flex;
    flex-direction: row;
}

/* STEP 5a: Put a 1px dotted hotpink border around MAIN SECTION in the CSS rule below so we can see the box on the screen */
main section {
    /* STEP 5d: Comment out the borders for the MAIN SECTION and the MAIN ASIDE above - we don't need them anymore */
    /* border: 1px dotted hotpink; */
    width: 60%;
    /* STEP 5b: Add 1em of padding on the top, right, bottom, and left of the above MAIN SECTION element - watch the effect in the browser */
    padding: 1em;
}

main section time {
    padding: 1em;
    font-style: italic;
}

/* STEP 5c: After adding a colored border to the below MAIN ASIDE, go ahead and also add padding to the top, right, and bottom (not the left) */
main aside {
    /* border: 1px dotted blue; */ /* Example border for 5c/5d */
    padding: 1em 1em 1em 0; /* Top, Right, Bottom = 1em; Left = 0 */
    width: 40%;
}
/* STEP 5d: Comment out the borders for the MAIN SECTION and the MAIN ASIDE above - we don't need them anymore */

/* STEP 7a: This is a challenge! Build a selector that targets the images of the colored building blocks ONLY - you will need to use a selector that targets IMG elements inside ASIDE elements that have an 'alt' attribute where the value ends with the word, "block" (you may need to look back at the learning module that covered selectors) */
main aside img[alt$="block"] {
    position: relative;
    /* STEP 7b: Position block images a bit more to the left using 'position: relative' - then create a second declartion with the 'left' property equal to -3rem in the above rule you just completed - check how your pages look in the browser, and you are all finished with the lab! */
    left: -3rem; 
}


.new-feature {
    padding-left: 25px;
    background-image: url("../images/new.png");
    background-repeat: no-repeat;
    background-position: top left;
}

#emailAddress {
    font-weight: bold;
}

[rel="external"] {
    padding-right: 20px;
    background-image: url("../images/extlink.png");
    background-repeat: no-repeat;
    background-position: top right;
}
/* Thank you to 'pnx' at https://openclipart.org/detail/202731/external-link-icon for the very cool external link icon */

main a {
    text-decoration: none;
    color: lightskyblue;
    font-weight: bold;
}

main a:hover {
    text-decoration: underline;
    color: orange;
}

blockquote::first-letter {
    font-size: 2em;
}

/* STEP 6: The FOOTER is a bit too close to the MAIN - add a margin-top to the FOOTER of 2rem */
footer {
    margin-top: 2rem;
    font-size: 1.6rem;
}

footer p {
    text-align: right;
}

section > p {
    text-indent: 2em;
}

h1, h2, footer {
    color: white;
}