/*
	Charls Sebastian
	ITWP 1050
	Homework 6 - CSS File
*/
/* Class that styles paragragphs */
.chocolate-background-text {
    color:chocolate;
  }
html,body{margin:0;padding:0}
/* Styles the background */
body{font: 76% arial,sans-serif;text-align:center;background-color: rgb(188, 184, 179);}
/* ID that styles Orgins Heading */
#Origins {
    color: blueviolet;
}
/* ID that styles Family Heading */
#Family {
    color: rgb(214, 96, 214)
}
/* ID that styles Time Passing By Heading */
#Time {
    color: rgb(119, 30, 119)
}
/* ID that styles Religion Heading */
#Religion {
    color: palevioletred
}
/* Setting page margin */
p{margin:0 10px 10px}
/* Class that styles contact info */
.midnightblue-background-text {
    color:midnightblue
} 
/*ID that aligns left class homepage */
#container {
    text-align: left;
}

/* Setting spacing of letters for headers */
h1 {
    letter-spacing: 3px;
    word-spacing: 1px;
    line-height: normal;
    text-transform: uppercase;
    text-shadow: 2px 2px;
  /* Transforming the header 1 with colors & transition */
    background: linear-gradient(to left, #008cff, #b300ff);
    transition-property: background-color;
  /*time for color transition*/
    transition-duration: 2s;
    transition-timing-function: ease-in-out;
  }
  
  h2 {
    letter-spacing: 2px;
    word-spacing: 1px;
    line-height: normal;
    text-transform: uppercase;
/*2d transformation of header 2*/
    transform: translate(5px, 5px) skew(5deg);
  }
  
  div{line-height: 15px
    ;}
  
  p{line-height: 15px;
/*2d transformation of paragraph selector*/
    transform: translate(6px, 6px) skew(6deg);
  }
  /*3d transformation of image*/
  img { 
    transform: perspective(900px) rotateY(5deg) translateX(100px)
  }