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

/*variables to set primary text and border color, and background gradient colors*/
:root {
    --primary-color:rgb(255, 219, 238);
    --gradient-color-1: #322c32;
    --gradient-color-2: #392e3b;
}

/*load decorative webfont before anything tries to use it*/
@font-face {
    font-family: 'Fleur De Leah';
    src: url(fonts/Fleur_De_Leah/FleurDeLeah-Regular.ttf) format("truetype");
    font-weight: 400;
    font-style: normal;
}

/*universal selector sets all text on the page to the primary color variable*/
* {
    color: var(--primary-color);    
}

/*body style adds outer margin, sets font and size, centers text, and applies a soft gradient background using gradient variables*/
body {
    margin: 25px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    text-align: center;
    line-height: 1.5;
    background: linear-gradient(to bottom,var(--gradient-color-1) 5%, var(--gradient-color-2) 50%, var(--gradient-color-1) 95%);
}

/*centers content within the header element. adds background image and styling.*/
header {
    background-image: url(images/header4.jpg);
    background-position: center;
    background-size: cover;
    background-clip:border-box;
    border:8px dashed var(--primary-color);
    border-radius: 20px;
}

/*styles the main page title using my webfont, fallbacks, and a text shadow to improve readability. overflow hidden with ellipses shortens the header and adds ... if the header becomes too narrow on smaller screens.*/
h1 {
    font-family: "Fleur De Leah", "Brush Script MT", cursive;
    font-weight: 400;
    font-size: 4.5em;
    font-style: normal;
    text-align: center;
    text-shadow: 2px 2px 50px #000000;
    letter-spacing: normal;
    font-variant: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*underlines all h2 section headings*/
h2 {
    text-decoration: underline;
}

/*main container width*/
main {
    width: 100%;
}

/*creates the framed content boxes with translucent background, border, border color using primary color variable, padding, and centered layout*/
div {
    background-color: rgba(255,255,255,0.10);
    background-position: center;
    border:6px dashed var(--primary-color);
    width: 90%;
    border-radius: 20px; 
    padding: 20px;
    margin: 20px auto;
    box-sizing: border-box;
}

/* created this class to make the h2 subtitle small caps because when I made the h1 title small caps with the webfont it looked atrocious */
.small-caps {
    font-variant: small-caps;
}
/*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;
    margin-top: 10px;
}

/*image styling adds dashed border using primary color variable, rounded corners, margin, responsive scaling, and centers images on page*/
img {
    border: 2px dashed var(--primary-color);
    border-radius: 10px;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 10px;
}

/*styles the two historical images so they sit side-by-side with even spacing*/
.image-row img {
    width: 45%;
    display: inline-block;
    margin: 0 10px;
}
/*adds the word (external) after any link with this class. the text is styled in pink and italicized*/
.external-link::after {
    content: " (external)";
    color: pink;
    font-style: italic;
}

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

    img {
        display: none;
    }
    .image-row img {
        display: none;
    }
}