/* Joshua McBratnie
ITWP1050
assignment description:
Create a page with an image title and 4 paragraphs
 and style it using a styles.css file.  */

/* --------------------------------------------------- */

body {
    margin: 25px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    text-align: center;

}
* {
    color: black;
}
footer {
    margin: 50px 0px 50px 0px;
}
img {
    border: 1px solid black;
    border-radius: 10px;
    width: 700px;
    height: 500px;

}
 p { /*this made it so i could not go less wide on the card object. not sure how this will look on smaller screens with the margin 500px? */
    margin-left: 500px;
    margin-right: 500px;
}

.external-link::after {
    content: "(External)";
    color: #C71585;
}

/* extra CSS */
/* creates a container to directly edit and create a reusable card object */
.card-object {
    display: flex;
    flex-direction: column; /*tells the flex box to display any elemnts within the card object in a column */
    align-items: center;
    margin: 0 10%;
    border: 2px solid rgba(0, 0, 0, 0.24);
    border-radius: 5px;
    background-color: rgba(133, 147, 147, 0.2);
    box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.3);
}    
.card-object img { /*calling on the img element inside of the .card-object class */
        box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.3);
        margin: 5px 5px;
        
    }