/*
    Name:   Lailee Bowman
    Course: ITWP 1050 
    Assignment: Homework 2 (Hooks and Loops Page)
*/


/*universal selector sets all text on the page to a warm brown color*/
* {
    color: saddlebrown;    
}

/*body style adds outer margin, sets font and size, centers text, and applies a soft gradient background*/
body {
    margin: 25px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    text-align: center;
    background: linear-gradient(to bottom, #c1ccff, #fdd1ff);
}

/*centers content within the header element*/
header {
    text-align: center;
    font-size: 1.4rem;
    font-family: Georgia, 'Times New Roman', Times, serif ;
    font-style: italic;
}

/*creates a rounded, framed content box for the main section with a translucent white background, sienna border, curved corners, padding, and centered*/
main {
    background-color: rgba(255,255,255,0.30);
    border: 3px solid #8b4f39;
    border-radius: 20px; 
    padding: 20px;
    margin: 20px auto;
    width: 90%;
    box-sizing: border-box;
}

/*adds spacing above and below the footer area*/
footer {
    margin-top: 50px;
    margin-bottom: 50px;
}

/*makes figure captions slightly smaller than normal text*/
figcaption {
    font-size: 0.8rem;
}

/*image styling adds thin brown border, rounded corners, responsive scaling, and centers images on page*/
img {
    border: 1px solid brown;
    border-radius: 10px;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/*adds the word (external) after any link with this class. the text is styled in dark green and italicized*/
.external-link::after {
    content: " (external)";
    color:darkgreen;
    font-style: italic;
}

/* media query that hides the image when the screen size is @ 550 pixels or lower */
@media only all and (max-width: 550px) {

    img {
        display: none;
    }
}