/*
Author: William Bergler
Course ITWP 1050
File: styles.css
CSS external file for homework 3, to format paragraphs and an image
*/

/*imports font from fonts.google*/
@font-face {
    font-family: customFont;
    src: url(PlayfairDisplay-VariableFont_wght.ttf);
}
/*formats the font size and margins of homework 3 in the body*/
body{
    margin: 25px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    text-align: center;
    line-height: 30px;
    background-color: wheat;
}
/*Sets custom font to H1*/
h1{
    font-family: customFont, arial, sans-serif;
    text-shadow: 2px 2px 2px gray;
    letter-spacing: 3px;
    font-variant: small-caps;
    white-space: nowrap;
}
/*Sets global text color*/
* {
    color: rgb(0, 60, 0);
}
/*Sets the margins for the footer*/
footer{
    margin-top: 50px;
    margin-bottom: 50px;
}
/*Puts a black solid border around the image*/
img, p{
    border-style: solid;
    border-color: black;
    border-radius: 10px;
    margin: 5px;
    text-align: center;
}


/*Adds (external in red after the link*/
.external-link::after{
    content: ' (external)';
    color: red;
}
p{  
    padding: 5px;
    max-width: 500px;
}
/*Sets background color behing images*/
.imagebackground{
    background-image: linear-gradient(
        rgb(151,85,24) 10%,
        rgb(205,175,121) 50%,
        rgb(110,30,19) 90%,
        rgb(52,24,20) 100%
    );
}

/*Sets media breakpoint to change font sizes below 800pixels*/
@media screen and (max-width: 800px) {
    h1{
        font-size: 16px;
    }
    body{
        font-size: 12px;
    }
}

/*Sets media breakpoint to change background color when below 600px*/
@media screen and (max-width: 600px) {
    body{
        background-color: white;
    }
}

/*Makes the images responsive to the viewport*/
.responsive{
    max-width: 100%;
    height: auto;
}

/*Creates a flexible container for the test*/
.container{
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    margin: 5px;
}
/*changes h2 text size*/
h2{
    font-size: 16px;
}