/* 
Jordan Winburn
ITWP-1050
Homework 3 **Modified for Homework 5!** 
I've chosen to write about Weezer's upcoming tour and new album.
*/

@font-face {
  font-family: specialH1;
  src: url(ArchivoBlack-Regular.ttf);
}

@font-face {
    font-family: specialBody;
    src: url(ComicRelief-Regular.ttf)
}

/*For devices with a viewport of 800 pixels or less, change the h1 and body tags' text size.*/
@media(max-width: 800px) {
    h1 {
        font-size: 8px;
    }
    body {
        font-size: 10px;
    }
    /*
    #textCont {

    }
    */
}

/*For devices with a viewport of 600px or less, change the background color. In our case, we will
shorten our gradient and change one of its colors!*/
@media(max-width: 600px) {
    html {
        background-image: linear-gradient(to bottom, white, gray);
    }
}

/*This will control our gradient.*/
html {
    background-image: linear-gradient(to bottom, white, white, black);
}

/*This will add some space all around the p elements, or our four separate paragraphs of text.*/
p {
    padding: 10px;
}

/*This will center the header and add the assignment-required properties.*/
h1 {
    font-family: specialH1, Impact, sans-serif;
    text-shadow: 2px 2px 30px black;
    letter-spacing: 5px;
    font-variant: small-caps;
    white-space: nowrap;
    text-align: center;
    /*Use the scale transformation to shortcut a larger header.
    We'll also use skew to give it a more interesting angled-look!*/
    transform: skew(20deg);
}

/*Change the body container's text properties, and add the assignment-required property.*/
body {
    font-family: specialBody, Arial, sans-serif;
    line-height: 35px;
}

/*Center-align the footer.*/
footer {
    font-family: Impact, Arial, sans-serif;
    text-align: center;
}

/*This will make the top image fit the way we'd like by resizing it and centering it.*/
#mainPic {
    /*We will comment out our original picture code in favor of the responsive additions.
    width: 800px;
    height: 400px;
    */
    display: block;
    margin: auto;
    /*Responsive additions*/
    max-width: 800px;
    height: auto;
}

#band {
    /*We will comment out our original picture code in favor of the responsive additions.
    width: 600px;
    height: 400px;
    */
    display: block;
    margin: auto;
    /*Responsive additions*/
    max-width: 600px;
    height: auto;
    /*Add transition speed to band photo in middle*/
    transition: 2s;
}

/*Give middle photo similar interactivity to Rivers, but less extreme.*/
#band:hover {
    transform: rotate(4deg) scale(110%);
    box-shadow: 5px 5px 30px 10px black;
}

/*This will center the picture of Rivers.*/
#rivers {
    /*We will comment out our original picture code in favor of the responsive additions.
    width: 400px;
    height: 200px;
    */
    display: block;
    margin: auto;
    /*Responsive additions*/
    max-width: 400px;
    height: auto;
/*Add a transition effect to the picture.*/
    transition: box-shadow, width, height, 2s;
}

/*To help our transition effect work, we create a hover condition for when the user mouses over the
picture of Rivers. When hovering over it, the property will allow us to (roughly) double the size of 
the image over two seconds, and instead of a background color like the module instructions say, 
we add a shadow effect.*/
#rivers:hover {
    box-shadow: 10px 10px 8px 10px black;
    transform: rotate(-2deg);
    /*
    width: 600px;
    height: 300px;
    */
}

/*This will add a stylish background image to the paragraphs.*/
#textCont {
    background-image: url(paperbackground.webp);
    /*We'll also make our paper background responsive.*/
    width: auto;
    height: auto;
}