/*This controls the header.*/
.your_name{
  width: 100%;
  color: white;
  background: #5499C7;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
}

/*This controls the box of projects*/
.box_of_projects{
  width: 80%;
  margin-top: 20pt;
  box-sizing: border-box;
  display: flex;
  justify-content: space-around;
}

/*This controls the profile image.*/
.img-circle {
    border-radius: 50%;
    width: 120pt;
    height: 120pt;
    margin-left: 15%;
}

/*This controls the Contact Information text.*/
.title1 > p {
  line-height: 5pt;
}

/*This controls The Basics box.*/
.title1 {
  margin-left: 80pt;
}

/*This controls The Story and content.*/
.title2{
  width: 30%;
}

/*This controls the story.*/
.title2 > h2 {
  margin-left: 8%;
  padding-left: 8%;
}

/*This controls the story text.*/
.title2 > p {
  border-left: 2px solid #C8C8C8;
  margin-left: 8%;
  padding-left: 8%;
  line-height: 15pt;
}

/*This controls the resume position*/
.title2 > a {
  margin-left: 8%;
  padding-left: 8%;
}

/*This holds the three items.*/
.box_of_three{
  width: 80%;
  margin-top: 20pt;
  box-sizing: border-box;
  display: flex;
  justify-content: space-around;
}

/*This controls the link text*/
a {
  text-decoration: none;
  color: #5499C7;
}
/*This controls the link text when hovered over*/
a:hover {
    color: #8E44AD;
}

/*This controls each button container.*/
.project_example{
  background-color: #CCD1D1;
  border-radius: 10%;
  margin:10pt;
  padding: 10pt;
  width: 140pt;
  height: 140pt;
  border: 1pt solid #D6EAF8;
}

/*This controls the buttons' appearance.*/
.search_button{
  /* border : solid 5px #bfdfff; */
	border-radius : 9px;
	moz-border-radius : 9px;
	/* -webkit-box-shadow : 2px 4px 4px rgba(0,0,0,0.9); */
	/* -moz-box-shadow : 2px 4px 4px rgba(0,0,0,0.9); */
	box-shadow : 2px 4px 4px rgba(0,0,0,0.9);
	font-size : 1em;
	color : #ffffff;
	padding : 3px 11px;
	background : #5499C7;
	/* background : -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3b79f5), color-stop(100%,#7aa824));
	background : -moz-linear-gradient(top, #3b79f5 0%, #7aa824 100%);
	background : -webkit-linear-gradient(top, #3b79f5 0%, #7aa824 100%);
	background : -o-linear-gradient(top, #3b79f5 0%, #7aa824 100%);
	background : -ms-linear-gradient(top, #3b79f5 0%, #7aa824 100%);
	background : linear-gradient(top, #3b79f5 0%, #7aa824 100%); */
	/* filter : progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b79f5', endColorstr='#7aa824',GradientType=0 ); */
}

/*This controls the box of links.*/
.box_of_links{
  margin-top: 20pt;
  margin-left: -5%;
  position: relative;
  background-color: #CCD1D1;
  height: 70px;
  /* width: 110%; */
  box-sizing: border-box;
  display: flex;
  justify-content: space-around;
}

/*This controls the linked in icon.*/
.linked_in {
  margin-top: 10px;
  margin: 10px;
  height: 50px;
}

/*This makes some text white.*/
.white-text {
  color: white;
}

/* For tablet css */
@media only screen and (max-width: 1100px) {
  .my_projects{
    color: white;
    margin-left: 1em;
    font-size: 12pt;
  }
}

/* For mobile css (inside only  changes for small screens)*/
@media only screen and (max-width: 780px) {
  /*This controls the header on mobile.*/
  .your_name{
    width: 100%;
    color: white;
    background: #5499C7;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    font-size: 8pt;
  }

  /*This controls the profile image on mobile.*/
  .img-circle {
      margin-top: -5pt;
      border-radius: 50%;
      width: 120pt;
      height: 120pt;
      margin-left: 25%;
  }

  /*This holds the three items on mobile*/
  .box_of_three{
    width: 100%;
    margin-top: 20pt;
    box-sizing: border-box;
    display: inline-block;
    justify-content: space-around;
  }

  /*This controls The Basics box on mobile*/
  .title1 {
    margin-left: 20%;
  }

  /*This controls The Story and content on mobile*/
  .title2{
    width: 30%;
    margin-left: 20%;
  }

  /*This controls the story text.*/
  .title2 > p {
    border-left: 0px solid #C8C8C8;
    margin-left: 0%;
    padding-left: 0%;
    line-height: 15pt;
    width: 180%;
  }

  /*This controls the box of projects on mobile*/
  .box_of_projects{
    width: 100%;
    margin-top: 20pt;
    box-sizing: border-box;
    display: inline-grid;
  }

  /* This move the word 'About' */
  .title2 > h2 {
    margin-left: 0%;
    padding-left: 0%;
  }

  /* This moves my resume */
  .title2 > a {
      margin-left: 0%;
      padding-left: 0%;
  }

  /* This changes the hr margin on mobile */
  hr {
      margin: 20pt;
      margin-bottom: -15pt;
  }

  /* This decreases the gap between boxes on mobile. */
  .white-text {
    font-size: 0pt;
  }

  /* This changes the margin for 'My Projects' */
  .my_projects{
    color: black;
    margin-left: 1em;
    font-size: 18pt;
  }

}