/* Setup the background of my website */

/* background-color: blueviolet; */
body{
    /* background-image: url("Assets/Images/MilkyWay.jpg"); */
    /* background-image: url("Assets/Images/mural.jpg"); */
    background-image: url("../Assets/Images/aia.jpg");
    background-repeat: yes; 
    background-size: cover; 
    background-position: center;
    font-family: 'Kalam', cursive;
    width: 105%
}

/* Resume CSS - not used at this time*/
.resume{
    font-family: 'Kalam', cursive;
}

#resumeH2{
    text-align: center;
    width: 100%;
}

.resumeHeader{
    text-decoration: underline;
    padding-top: 25px;
    padding-bottom: 25px;
}

li.borderless {
    border-top: 0 none;
  }

#address{
    width:50%;
}

#contact{
    float: right;
    text-align: right;
    width: 50%;
}

.companyDiv{
    width: 50%;
}

.company{
    text-decoration: underline;   
}

.yearsOfService{
    float: right;
    text-align: right;
    width: 50%;
}

.career{
    font-weight: bold;
}
/* End Resume CSS - not used at this time*/

/* set the background color of the navbar */
.navbar {
    background-color: #990099;
}

/* formatting for 'full stack developer' */
#fullstack {
    font-size: x-large;
    text-align: center;
}

/* Set up the formatting of the Navbar for my Name */
.navbar-brand{
    padding-left: 25px;
    padding-right: 25px;
    margin-top:-7px; 
    margin-bottom:-7px;
    width:"300px";
    color:white;
    font-weight: bold;
    font-size: xx-large;
    background-color: #990099;
    font-family: 'Kalam', cursive;
}

/* contact icons in index page size */
.indexImages{
    padding-bottom: 15px;
}

/* Make the contact icons highlight when hovered over */
#emailImage:hover {
    filter: grayscale(100%);
    -webkit-filter: brightness(1.50);
}

#githubImage:hover {
    filter: grayscale(100%);
    -webkit-filter: brightness(1.50);   
}

#fileImage:hover {
    filter: grayscale(100%);
    -webkit-filter: brightness(1.50); 
}

#linkedinImage:hover {
    filter: grayscale(100%);
    -webkit-filter: brightness(1.50); 
}

/* Set the color of the font for the site to Purple */
div{
    color: #990099;
    font-family: 'Kalam', cursive;
}

/* Setup the width of the form */
.form-control{
    width: 100%;
}

/* Setup the height of the message box */
#formGroupExampleInput3{
    height: 300px;
}

/* Setup the details of the straight line on Contact and Portfolio page */
#straight-line{
    border-bottom: grey;
    border-bottom: solid;
}

/* add padding so text is not at top of screen */
#dafs{
 padding-top: 50px;
}

/* Details of the button on the contact page */
.btn{
    background-color: #990099;
    text-align: left;
    color: white;
    left: 25px;
}

/* Make anchors align center on portfolio page */
.anchor{
    display: flex;
    justify-content: center;
    font-size: small;
    padding-top: 5px;
    /* text-align: center; */
}

/* Wrapper css makes images on portfolio same size */
.wrapper {
    position: relative;
    overflow: hidden;
  }
  
  .wrapper:after {
    content: '';
    display: block;
    padding-top: 100%;
  }
  
  .wrapper img {
    width: auto;
    height: 100%;
    max-width: none;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
  }

/* Image of self on index page align properly and have padding at top of image */
.img-fix {
    padding-top: 25px;
    text-align: center;
}

/* Container needed padding for proper view in smaller screens */
.container {
    padding-top: 25px;
    padding-right: 30px;
}

/* Make links look like buttons */
.button {
    display: block;
    width: 115px;
    height: 20px;
    background: white;
    text-align: center;
    border-radius: 5px;
    color: #990099;
    line-height: 25px;
}

/* Adjust the sizes of the images on the portfolio page */
#portfolio  img {
    width: 100%;
  }

/* Adjust the height and width of the image on the index page and location */
.img-responsive{
      width: 220px;
      height: 275px;
  }

  /* Set the format of the text on the portfolio page */
.text{
    text-align: center;
    width: 100%;
    background-color: #990099;
    color:white;
    font-size: small;
}

/* Media query to mage image on index page align properly at diferent sizes */
@media (min-width: 768px) {
    .img-responsive {float: left;}
}

/* Media query to mage personalized text on index page align properly at diferent sizes */
@media (min-width: 576px) {
    .deeann {display: inline;}
}

/* Make I am Dee Ann align center */
h1, .contactInfo {
    text-align: center;
}

  /* Setup position of first image */
/* .box1{
    position: relative;
    top: 25px;
    bottom: 50px;

} */

 /* Setup position of second image */
/* .box2{
    position: relative;
    top: 25px;
    bottom: 50px;
} */

 /* Setup position of third image */
/* .box3{
    position :relative;
    top: 50px;
}  */

 /* Setup position of fourth image */
/* .box4{
    position: relative;
    top: 50px;
} */
/* Setup position of fifth image */
/* .box5{
    position: relative;
    top: 75px;
} */
/* Setup position of sixth image */
/* .box6{
    position: relative;
    top: 75px;
} */

/* Setup text positioning of first image */


 /* .box1 #anchor1 {
    text-align: center;
    bottom: -15px;
    font-size: small;
} */

/* .box1 #anchor2{
    text-align: center;
    bottom: -155px;
    font-size: small;
}

/* Setup text positioning of second image */
/* .box2 .text{
    position: absolute;
    text-align: center;
    width: 100%;
    bottom: 15px;
    background-color: #990099;
    color:white;
    font-size: small;
}

.box2 #anchor3{
    text-align: center;
    bottom: -15px;
    font-size: small;
} */ 

/* .box2 #anchor4{
    text-align: center;
    bottom: -155px;
    font-size: small;
}
/* Setup text positioning of third image */
/* .box3 .text{
    position: absolute;
    text-align: center;
    width: 100%;
    bottom: 15px;
    background-color: #990099;
    color:white;
    font-size: small;
} */ 

/* .box3 #anchor5{
    text-align: center;
    bottom: -15px;
    font-size: small;
}

.box3 #anchor6{
    text-align: center;
    bottom: -155px;
    font-size: small;
}

/* Setup text positioning of fourth image */
/* .box4 .text{
    position: absolute;
    text-align: center;
    width: 100%;
    bottom: 15px;
    background-color: #990099;
    color:white;
    font-size: small;
} */ 

/* .box4 #anchor7{
    text-align: center;
    bottom: -15px;
    font-size: small;
}

.box4 #anchor8{
    text-align: center;
    bottom: -155px;
    font-size: small;
}

/* Setup text positioning of fifth image */
/* .box5 .text{
    position: absolute;
    text-align: center;
    width: 100%;
    bottom: 15px;
    background-color: #990099;
    color:white;
    font-size: small;
}

.box5 #anchor9{
    text-align: center;
    bottom: -15px;
    font-size: small;
}

.box5 #anchor10{
    text-align: center;
    bottom: -155px;
    font-size: small;
} */ 

/* Setup text positioning of sixth image */
/* .box6 .text{
    position: absolute;
    text-align: center;
    width: 100%;
    bottom: 15px;
    background-color: #990099;
    color:white;
    font-size: small;
}

.box6 #anchor11{
    text-align: center;
    bottom: -15px;
    font-size: small;
}

.box6 #anchor12{
    text-align: center;
    bottom: -155px;
    font-size: small;
} */