/* 
Jordan Winburn
ITWP-1050
Homework 3 **Modified for Homework 4!** 
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)
}


/*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 {
    width: 800px;
    height: 400px;
    display: block;
    margin: auto;
}

#band {
    width: 600px;
    height: 400px;
    display: block;
    margin: 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 {
    width: 400px;
    height: 200px;
    display: block;
    margin: 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);
    /*Use scaling to make the website content appear more like it's on a held piece of paper.*/
    transform: scale(98%);
}