@charset "utf-8";
*, *:before, *:after {
  box-sizing: border-box;
}
html {
  background-image: url(assets/BKG.png);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
body { /*we always need a rule for the body to set the type styles for everything to follow. Then you can set other specific rules for headlines to give a display/decorative/bold font. We also want to set margins here to remove the space built into the edges of the body/browser window*/
    font-family: actor, andika, sans-serif;
    font-style: normal;
    font-weight: 400;
    color: #797878;
    font-size: 15pt;
    line-height: 25pt;
	margin: 0px;
	
}

/*the css here for the body needs to be applied to the #container. We can't apply a width to the body, but we can do that to the <div> within the body.
	body {
  		width: 960px;
  		margin: auto;
		}
*/

#container {
    width: 960px;
    margin-left: auto;
    margin-right: auto;
		}


header {
  text-align: center;
  padding-top: 30px;
  padding-bottom: 30px;
  border-bottom-color: rgba(165, 165, 165, 1.00);
  border-bottom-style: solid;
  bordar-bottom: 1px;
  margin-bottom: 30px;
  font-size: 18pt;
  color: #93E2C2;
  }
header h1 {
  font-family: 'Comic Neue', cursive;
  color: #93E2C2;
  text-shadow: 0pt 10px 5px #FFFFFF;
  font-size: 44pt;
}
header h2 {
  font-family: 'Open Sans', sans-serif;
  color: #9A9999;
  font-size: 20pt;
  text-transform: capitalize;
}
h1 {
  font-family: 'Comic Neue', cursive;
  color: #93E2C2;
  text-shadow: 0pt 10px 5px #FFFFFF;
}
.Pregnancy {
  border-bottom: 3px dotted #93E2C2;

}
.Pregnancy img {
	/*  margin-left: 280px; we will center it using the following three properties/values instead*/
	width: 400px;
	margin: 0 auto;
	display: block;
  border: 15px solid #FFF388;
  border-radius: 25px;
  border-collapse: separate;
}
.Pregnancy h1 {
  text-align: center;
  font-size: 28pt;
}
.Pregnancy p { /*this is to bring the text line lengths in*/
    margin-left: 140px;
    margin-right: 140px;
}
.parent { /*this is a new selector and it is applying to each section to set the properties for the sections, including for flex*/
    display: flex;
    margin-top: 50px;
    margin-bottom: 50px;
    border-bottom: 3px dotted #93E2C2;
    padding-bottom: 50px;
    justify-content: space-around;
}
/* I am moving these styles from .birthday, .firstyear, .secondyear, .thirdyear to .parent. These selectors should only be used for things that might be unique about the .Birthday, etc. sections

.Birthday {
    display: flex;
    margin-top: 50px;
    margin-bottom: 50px;
    border-bottom: 3px dotted #93E2C2;
    padding-bottom: 50px;
    justify-content: space-around;
}*/
.text {
    /* [disabled]margin-right: 60px;
	I am turning this off so that we can apply the space to the parent instead of the items */
    flex-basis: 60%;
    padding-top: 218px;
}

.text h1 {
    text-align: center;
}

.text p {
    /* I took these properties and applied them to the new rule for body, which is where paragraph type styling should be added
		font-family: actor, andika, sans-serif;
		font-style: normal;
		font-weight: 400;
		color: #797878;
		font-size: 15pt;
		line-height: 25pt;
		text-align: left;*/
		/* [disabled]margin-top: 80px; */
		/* [disabled]margin-right: 80px; */
		/* [disabled]margin-left: 80px; */
		/* [disabled]margin-bottom: 80px; */
}
	/*This rule no longer affects anything in the html as I moved the <img> from within .text to CSS instead. There are no img in .text any longer
		.text img {
		  margin-left: 250px;
		  margin-top: 140px;
	}*/
.graphics {
    /*I am doing this so that we can apply the spacing to the .parent box instead of to the individual "items"*/
	/* [disabled]margin-left: 60px; */
    /* [disabled]margin-top: 60px; */
 
}
.Birthday .graphics {
    background-image: url(assets/elefent.png);
    background-repeat: no-repeat;
    background-position: center top;
    padding-top: 211px;
    display: flex;
    align-self: center;
}
.Birthday .text {
    background-image: url(assets/blue-heart.png);
    background-repeat: no-repeat;
    background-position: 50% 16%;
}
.FirstYear .text {
    background-image: url(assets/yellowheart.png);
    background-repeat: no-repeat;
    background-position: 50% 16%;
}
.FirstYear .graphics {
    background-image: url(assets/lion.png);
    background-repeat: no-repeat;
    background-position: center top;
    padding-top: 211px;
    display: flex;
    align-self: center;
}
.SecondYear.parent .text {
    background-image: url(assets/lightblueheart.png);
    background-repeat: no-repeat;
    background-position: 50% 16%;
}
.SecondYear .graphics {
    background-image: url(assets/giraffe.png);
    background-repeat: no-repeat;
    background-position: center top;
    padding-top: 211px;
    display: flex;
    align-self: center;
}
.ThirdYear .text {
    background-image: url(assets/green-heart.png);
    background-repeat: no-repeat;
    background-position: 50% 16%;
}
.ThirdYear .graphics {
    background-image: url(assets/deer.png);
    background-repeat: no-repeat;
    background-position: center top;
    padding-top: 211px;
    display: flex;
    align-self: center;
}
/*None of the following are active now*/    
    /*I added some id to make some changes*/
        #first {
            /* [disabled]margin-right: 60px; */
        }
        /*I added some id to make some changes*/
        #third {
            /* [disabled]margin-right: 60px; */
        }
        #textflip img {
            /* [disabled]justify-content: center; */
            /* [disabled]margin-right: 250px; */
        }
.graphics img 
	/*I changed this to be for all images when they are in the .graphics box. Currently, there is only the picture of your son in each .graphics box as the animal illustrations are now added via CSS and not as <img>*/
{ 
    border-radius: 25px;
    border: 15px solid #FFF388;
    /* [disabled]padding-top: 0px; */
    /* [disabled]margin-left: 0px; */
}
/*.FirstYear {
    display: flex;
    margin-top: 50px;
    margin-bottom: 50px;
    border-bottom: 3px dotted #93E2C2;
    padding-bottom: 50px;*/
    /* [disabled]padding-right: 60px; 
}*/
/*.SecondYear {
  display: flex;
  margin-top: 50px;
  margin-bottom: 50px;
  border-bottom: 3px dotted #93E2C2;
  padding-bottom: 50px;
}*/
/*.ThirdYear {
  display: flex;
  margin-top: 50px;
  margin-bottom: 50px;
}*/
footer {
  padding-bottom: 30px;
  border-top-color: rgba(165, 165, 165, 1.00);
  border-top-style: solid;
  bordar-top: 1px;
}
footer p {
  font-family: actor, andika, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 15pt;
  text-align: center;
  margin-top: 50px;
}