/* 
	Name:Christopher Millen
	Course: ITWP 1050
	Description: This is the style sheet for the Great Gatsby Summary Page

 */

/*setup up for the web font on the site */
@font-face {
    font-family: 'Playfair Display';
    src: url('Fonts/PlayfairDisplay-Italic-VariableFont_wght.ttf') format('truetype');
    src: url('Fonts/PlayfairDisplay-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
}

/* Styling for the body of the page */
body{
	margin: 25px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    text-align: center;
    background: linear-gradient(20deg, #f3f4f7 0%, #e2e2e2 50%, #dcdcdc 100%);
}
    

/*Color for every element on the page via the univeral selector*/
*{
	color: #808080;
}

/*style for image */
img[alt="The Great Gatsby"] {
    transform: rotate(-3deg);
}


/* style for the page link when hovered */
.page_link:hover {
    display: inline-block; /* Required for transforms on inline elements */
    transform: scale(1.1);
}


/* styles for image*/
img[alt="F_Scott_Fitzgerald"] {
    transform: skewX(5deg);
}

/* Styling for heading */
h1 {
    font-family: 'Playfair Display', Arial, sans-serif;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    letter-spacing: 4px;
    font-variant: small-caps;
    white-space: nowrap;
    background: linear-gradient(to right, transparent, rgba(247, 207, 29, 0.2), transparent);
    padding: 20px;
    /* Shorthand: Rotate, Scale, and Translate the title */
    transform: rotate(1deg) scale(1.05) translateY(-5px);
}


/* class for interactive element */
.interactive-element {
    transition-property: background-color, transform;
    transition-duration: 0.5s;
    transition-delay: 0.1s;
    transition-timing-function: ease-in-out;
}

/* hover option for the interative element*/
.interactive-element:hover {
    background-color: #F7CF1D; /* Art Deco gold color */
    transform: translateY(-10px);
    color: #000;
}

/*Styling for the footer on the page */
footer{
	margin-top: 50px;
	margin-bottom: 50px;
}

/*Styling for the image on the page */
img{
	border: 1px solid black;
	border-radius: 10px;
	width: 300px;
	height: 300px;
}

/*Style for element after page link*/
.page_link::after{
	content: '(External)';
	color: #F7CF1D;
}


/*styling for paragraphs to increase line height */
p{
	line-height: 1.8;
}

/*Modify images to be responsive */
img, .responsive-img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/*styling for feature section*/
.gatsby-features {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 20px;
    background-color: rgba(247, 207, 29, 0.1); /* Subtle gold tint */
    margin: 20px 0;
}

/*styling for items in feature section*/
.feature-item {
    flex: 1 1 200px; /* Allows items to grow/shrink with a 200px base */
    margin: 10px;
    padding: 15px;
    background-color: #ffffff;
    border: 1px solid #dcdcdc;
    border-radius: 8px;
}

/*styling for heading in feature item */
.feature-item h2 {
    font-size: 1.2em;
    color: #333;
}

/*Media Query to change the font size in heading and body*/
@media screen and (max-width: 800px) {
    h1 {
        font-size: 1.5em; 
    }
    body {
        font-size: 0.9em; 
    }
}

/*Media Query to change the background and to change layout*/
@media screen and (max-width: 600px) {
    body {
        background: #e2e2e2; 
    }
    
    .feature-item {
        flex: 1 1 100%; 
    }
}