/* CSS Document used for the homework2 assignment
Author: Grace Trombley
Course: ITWP 1050
File: styles.css
Assignment: Use the rotation, scale, skew, and transform properties
*/

/*rotation function: on the web source link*/
.source-link {
    transform: rotate(10deg);
  }

/*scale function: on the paragraphs*/
p {
    transform: scale(0.9, 0.9);
  }

/*skew function: on the images*/
img {
    transform: skew(20deg, 0deg);
  }

/*transition properties: on the page heading*/
h1 {
    text-align: center;
    width: 1000px;
    height: 30px;
    background-color: #ff6568; 
    transition-property: width, height; 
    transition-duration: 4s; 
    transition-delay: 0.2s; 
  }
  /*the transition of changing the h1 background size*/
 h1:hover {
    width: 1000px;
    height: 50px;
 }

/*this section makes a gradient background, and specifies line height and text alignment*/
body {
    text-align: center;
    background-image: linear-gradient(180deg, #FCB2B3, white);
    line-height: 20px;
}

/*i found this font on the Google Font link provided by the homework pdf*/
@font-face {
    font-family: MyFont;
    src: url(static/PlayfairDisplay-Medium.ttf);
}

/*this section gives special design to the header of the site, giving it a different font and a test shadow*/
h1 {
    text-align: center;
    font-family: MyFont, Arial, sans-serif;
    text-shadow: 2px 2px;
    letter-spacing: 2px;
    font-variant: small-caps;
    white-space: nowrap;
}