/* CSS Document used for the homework 5 assignment
Author: Ahmed Rokeeb
Course: ITWP 1050
File: styles.css
*/

/* Adding the @font-face rule to include a web font */
/* latin */
@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: local('Playfair Display'), local('PlayfairDisplay-Bold.ttf'), url(https://fonts.gstatic.com/s/playfairdisplay/v37/nuFiD-vYSZviVYUb_rj3ij__anPXDTzYgA.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Body styling */
body {
    margin: 25px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    text-align: center;
    /* Darker gradient for a gothic atmosphere */
    background: linear-gradient(to right, rgba(34, 34, 34, 1), rgba(0, 0, 0, 0.8), rgba(60, 0, 60, 0.7), rgba(0, 0, 0, 0.9));
    /* Setting all text to white for better contrast */
    color: white;
}

/* Universal selector being used to set text color */
* {
    color: white; /* Ensures all text elements are white */
}

/* Footer styling setting the margins and background */
footer {
    margin-top: 50px;
    margin-bottom: 50px;
    /* Dark gradient with hints of purple */
    background: linear-gradient(to bottom, rgba(50, 0, 50, 0.6), rgba(0, 0, 0, 0.9));
}

/* Image styling */
img {
    border: 1px solid white; /* White border for better visibility */
    border-radius: 10px;
}

/* External link pseudo-element */
.external-link::after {
    content: '(external)';
    color: #32CD32; /* Brighter lime green */
}

/* H1 styling */
h1 {
    font-family: 'Playfair Display', Arial, sans-serif;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    letter-spacing: 2px;
    font-variant: small-caps;
    white-space: nowrap;
    color:white
}

/* Flex container for the responsive section */
.container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    background: linear-gradient(to right, rgba(34, 34, 34, 1), rgba(0, 0, 0, 0.8), rgba(60, 0, 60, 0.7), rgba(0, 0, 0, 0.9)); /* Gradient matching page */
    padding: 0.25rem;
    width: 55%;
    max-width: 900px;
    margin: 0 auto; 
}

/* Flex item styling */
.item {
    background: #444;
    color: white;
    text-align: center;
    margin: 0.5rem;
    font-size: 1rem;
    padding: 0.25rem;
    border-radius: 8px;
    flex: 1 1 100px; 
    max-width: 150px;
}

/* For wide items */
.wide {
    width: 100%;
    flex: 1 1 150px;
    max-width: 175px;
}

/* Adjust font size for smaller screens */
@media screen and (max-width: 800px) {
    .item {
        font-size: 0.9rem;
    }
}

/* Adjust layout on very small screens */
@media screen and (max-width: 600px) {
    .container {
        background: #2b2b2b;
    }
    .item {
        font-size: 0.8rem;
        flex: 1 1 75px;
    }
}