/* CSS Document used for the homework 3 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
}