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

/*variables to set primary text and border colors, background gradient colors, and transparencies. new variables added to change background, text, and border colors on smaller screens. variables in variables because i can.*/

:root {
    --primary-color:rgb(24, 24, 24);
    --secondary-color: rgb(54, 0, 81);

    --gradient-color-1: #fffdd3;
    --gradient-color-2: #ffe057;
    --gradient-color-3: #ffed63;

    --color-transparency: rgba(255, 248, 157, 0.3);
    --white-transparency: rgba(255, 255, 255, .4);

    --primary-gradient: linear-gradient(to bottom,var(--gradient-color-1) 6%, var(--gradient-color-2) 20%, var(--gradient-color-3) 80%, var(--gradient-color-1) 100%);
    --overlay-gradient: linear-gradient(to bottom, var(--color-transparency) 70%, var(--white-transparency) 100%);
    --overlay-gradient2: linear-gradient(to bottom, var(--color-transparency) 1%, var(--white-transparency) 100%);

    --media-background: rgb(255, 241, 251);
    --media-primary: black;
}

/*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: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 1em;
    text-align: center;
    line-height: 1.5;
    background: var(--primary-gradient);
}

/*centers content within the header element. adds background gradient and border styling.*/
header {
    background: var(--overlay-gradient);
    border:8px dashed var(--secondary-color);
    border-radius: 20px;
    
}

/*styles the main page title using my webfont, fallbacks, and a text shadow to improve readability. overflow hidden shortens the header and adds ellipses if the header becomes too narrow.*/
h1 {
    font-family: "Fleur De Leah", "Brush Script MT", cursive;
    font-weight: 400;
    font-size: 4.5em;
    font-style: normal;
    text-align: center;
    color: var(--secondary-color);
    text-shadow: 1px 1px 2px var(--gradient-color-1);
    letter-spacing: normal;
    font-variant: normal;
}

/*italicize all h2 section headings*/
h2 {
    color: var(--secondary-color);
    font-style: italic;
}

/* class changes font size for h2 subtitle */
.subtitle {
    font-size: 1.1rem;
}

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

/************************************************************/
/************ REQUIREMENTS FOR HOMEWORK 5 *******************/
/****************** (PART 1 OF 2) ***************************/
/************************************************************/

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

/*creates flex area for new layout*/
.layout {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/*assigns areas for flex layout. */
.a, .b, .d, .e {
    flex: 1 1 calc(50% - 1rem);
}

.c {
    flex: 1 1 100%;
}

/* changes text alignment for sources section to left */
.e {
    text-align: left;
}

/*******************************************************/
/****** REQUIREMENTS CONTINUED abt. LINE 170 ***********/
/*******************************************************/



/*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: 18px 1px 0;
}
/*adds the word (external) after any link with this class. the text is styled in pink and italicized*/
.external-link::after {
    content: " (external)";
    color: darkgreen;
    font-style: italic;
}



/************************************************************/
/************ REQUIREMENTS FOR HOMEWORK 5 *******************/
/****************** (PART 2 OF 2) ***************************/
/************************************************************/



/* media query that arranges the layout vertically and increases the body and h1 font size when the screen size is @ 800 pixels or lower */
@media only all and (max-width: 800px) {
    .layout {
        flex-direction: column;
    }
    .a, .b, .c, .d, .e {
        flex: 1 1 100%;
    }
    body {
        font-size: 110%;
    }
    h1 {
        font-size: 3.4em;
        color: black;
        text-shadow: 1px 1px 2px var(--gradient-color-1);
    }
}

/* media query that removes the header image and changes the background, border, and text colors using variables when the screen sizer is @ 600 pixels or lower */
@media only all and (max-width: 600px) {
    body {
        background: var(--media-background);
    }

    h2 {
        color: var(--media-primary);
    }

    div {
        background: var(--overlay-gradient2);
        border:6px dashed var(--media-primary);
    }
}

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

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