/* box model fix */
/* uncomment follow to fix the box model */

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}


body {
  font-family: "arial", "arial black";
  background: #FFFACD;
}

header, footer {
  background: #2B2D42;
  color: #8D99AE;
}

h1, h2 {
  color: purple;
}
h1 {
  font-family: 'Shadows Into Light', cursive;
  font-size: 4rem;
}
h2 {
  font-family: 'Righteous', cursive;
  font-size: 2.5rem;
}
a {
    text-decoration: none ;
    color: #EF233C;
    background: lightblue;
}
a:hover
{
   color: green;
   text-decoration: none;
   cursor: pointer;
}
dt {
  color: #D2691E;
}

.my-middle {
  text-align: center;
}

.my-inline-display {
  display:inline;
  margin-bottom: 600px;
}
.interestsblk {
  display: inline-block;
  width: 300px;
  padding: 20px;
  background: #FFF0F5; /*lavenderbush*/
  border: 1px solid black;
}
.interestsimage {
  text-align: center;
}

/* this style use border-radius property to set the profile image as circular*/
/* uncomment the style for .profile-image here */

.profile-image {
  width: 600px;
  border-radius: 50%;
  margin-right: 30px;
}


/* this float the visionary-image, which allows the text below the image float around the image */
/* uncomment the style to float the image to the left, and text will wrap around this image */

.visionary-image {
  width: 200px;
  float: left;
  margin-right: 30px;
  margin-bottom: 30px;
}



/* the float needs to be cleared, you will need to clear the image container, which is #whoami */
/* uncomment this out to clear the float from the wrapper of the image, #whoami */

#whoami {
  overflow: hidden;
}



/* this uses position property "position: fixed;" and "top: 0;" to stick the navigation on the top (the distance to top is 0) */
/* uncomment the style for navigation */

nav {
  position: fixed;
  top: 0;
  width: 100%;
}



/* adding padding to each section so that it does not overlap with the navigation */
/* uncomment out the following code to fix the section overlaps navigation issue */

.section-wrapper {
  padding-top: 10px;
}



/* this code use linear-gradient function to add a background image to the Timeline section */
/* uncomment following code to add the home-depot.jpg image to the background for #mytimeline section */

#mytimeline {
  background: linear-gradient(rgba(141, 153, 174, 0.9), rgba(141, 153, 174, 0.7)),
              url(../images/home-depot.jpg) no-repeat fixed;
  background-size: cover;
}


/* following code add different style for screen size over 800px and less than 799px */
/* try to drag the brower wider and narrower to see the difference */
/* uncomment the following code to style the contents according to the screen size*/

@media (max-width: 799px) {
  .col-narrow {
    width: 30%;
    float: left;
  }
  .col-wide {
    width: 70%;
    float: left;
    padding-left: 20px;
  }
}
@media (min-width: 800px) {
  .visionary-image {
    width: 200px;
  }
}




/* following code use transition property to move the .goose. */
/* when you hove your mouse over the .goose, the goose start move to the right ane height increase. */
/* uncomment this out to define the style of the .goose, so that you can use transtion to hover and goose move */

.goose {
  height: 200px;
  display: inline-block;
  padding: 20px;
  background: white;
  margin-left 0;
  transition: all 2s ease-out 1s;
}

.goose:hover {
  height: 300px;
  background: black;
  margin-left: 600px;
}