/* Kristen Glodich
   Course: ITWP 1050
   Assignment Homework 3 */

/*import google fonts (tangerine)*/
@import url('https://fonts.googleapis.com/css2?family=Tangerine:wght@400;700&display=swap');

/*gradient for the main, white to grey to silverish*/
body {
    background: linear-gradient(#d3d3d3, #a9a9a9, #808080, #505050);
    background-repeat: no-repeat;
    background-size: cover;

    /*fallback font & align text*/
    font-family: 'Arial', 'sans-serif';
    text-align: center;
}

/*gradient behind images from grey to steel to blue to black*/
.images {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 20px;
    margin-top: 30px;
    background: linear-gradient(#a9a9a9, #4682b4, #00008b, #000000);
    background-size: cover;
    background-position: center;
    height: 470px;
    padding: 20px;
    /*rounded corners*/
    border-radius: 10px;
}

/*image styling*/
.images img {
    max-width: 45%;
    border-radius: 10px;
    height: auto;

}

/*styling for h1*/
h1 {
    font-family: 'Tangerine', 'Arial', 'sans-serif';
    font-size: 3em;
    font-variant: small-caps;
    text-shadow: 2px 2px 4px grey;
    letter-spacing: 2px;
    white-space: nowrap;
    color: #000000;
    text-align: center;
    margin-top: 50px;
}

/*line height for paragraphs*/
p {
    line-height: 1.6;
}

/*responsive design*/
@media (max-width: 768px) {
    .images {
        flex-direction: column;
        align-items: center;
    }

    .images img {
        max-width: 80%;
    }
}

/*box for sources*/
.sources {
    width: 80%;
    max-width: 500px;
    height: 100px;
    background-color: #333333;
    color: #fff;
    border: 1px solid #fff;
    border-radius: 10px;
    margin: 30px auto;
}

/*styling for footer so its more readable, dark background with white text*/
footer {
    background-color: #333333;
    color: #fff;
    text-align: center;
    padding: 10px;
}

/*styling for links so they're more readable as well*/
a:link {
    color: #ADD8E6;
}

a:visited {
    color: #D8AADD;
}