body {
  margin: 0;
  padding: 0;
  background-image: url(../images/houndstooth-pattern.png);
  height: 100vh;
}

li {
  list-style: none;
}

i {
  margin: 5px;
}

h2, h3, h4 {
  font-family: 'Coiny', cursive;
  color: #1e3799;
}

header {
  background-color: #6a89cc;
  color: white;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0 10px;
}

header ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

header ul a {
  text-decoration: none;
  color: white;
  padding: 10px;
}

header ul a:hover {
  background-color: #4c75ce;
}

header h1 {
  font-size: 1rem;
  font-family: 'Coiny', cursive;
}

main h2 {
  text-align: center;
  color: #1e3799;
  margin: 0;
  padding: 40px 0;
}

main article {
  background-color: white;
  width: 1000px;
  margin: auto;
  padding: 20px;
  margin-bottom: 50px;
  border-radius: 10px;
  -webkit-box-shadow: 5px 5px 14px 2px rgba(0, 0, 0, 0.75);
  box-shadow: 5px 5px 14px 2px rgba(0, 0, 0, 0.75);
}
.homeCard img{
  width:400px;
  height:100px;
}
.homeCard p{
  width: 400px;
  padding:10px;
}

main article h3 {
  padding-top: 40px;
  font-size: 1.2rem;
}

main article div#images {
  /*display: -webkit-box;*/
 /* display: -ms-flexbox;*/
  /*display: flex;*/
  display: block;
  margin-left:30px;
  
  color: #1e3799;
}

main article div#images img {
  border: 4px solid #1e3799;
  border-radius: 50%;
   -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}

main article div#images img:hover {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}

main section {
  display: -webkit-box;
  /*display: -ms-flexbox;*/
  /*display: flex;*/
  display: block;
  
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

main section iframe {
  margin-top: 20px;
  border: 5px solid #1e3799;
  width: 450px;
  height: 350px;
}

main section form input {
  border-radius: 5px;
  padding: 5px;
}

main section form [type="submit"] {
  color: white;
  background-color: #1e3799;
  border: none;
}

footer {
  background-color: #6a89cc;
  color: white;
  text-align: right;
}

footer h5 {
  margin: 0;
  padding: 10px;
}
/*# sourceMappingURL=style.css.map */

#animalCard{
  display: block;
 
}
#commentBox{
  width:300px;
  height:80px;
}
.modal-title{
  font-family: 'Coiny', cursive;
  color: #1e3799;
}

 /*Desktop version*/

 @media screen and (min-width: 980px) {
 /*- (1 point) Rehome format changed to flex as per Desktop version*/
 .homeCard{
   display: flex;
 }
 .homeCard img{
   height: 300px;
   width: 350px;
 }
 .homeCard p{
  width: 500px;
  padding:20px;

 }

 /*- (1 point) Species format changed to flex as per Desktop version*/
 main article div#images{
  display: -ms-flexbox;
  display: flex;
  
}
main article div#images img{
  margin:20px;
}
#animalCard{
  display: flex;
  flex-wrap: wrap;
 
  
  
}

/*- (1 point) Animals*/
#animalCard img{
  width:18rem;
  column-count: 3;
  column-gap: 3px;
}

/*- (1 point) Contact format changed to flex as per Desktop version*/

.flex{
  display: flex;
}

#submitButton{
  display: block;
  margin-top:10px;
}
header{
 
}

 }