body {
   font-size: 20px;
   font-family: 'Libre Franklin', sans-serif;
   text-align: center;
}
header {
   padding: 50px 0 30px;
}
.topText {
   font-size: 40px;
}
.greyText {
   color: hsl(0, 0%, 59%);
}
.topText p {
   display: inline;
}
.topText strong {
   display: inline;
}
#myEmail {
   width: 300px;
   height: 8px;
   padding: 15px;
   border-radius: 20px;
   border: 1px solid hsl(223, 100%, 88%);
   margin-right: 5px;
   opacity: 0.9;
}

button {
   width: 150px;
   height: 40px;
   border-style: none;
   border-radius: 20px;
   color: white;
   background-color: hsl(223, 87%, 63%);
   cursor: pointer;
   box-shadow: 0px 4px 5px hsl(223, 100%, 88%);
}
.formcontainer {
   display: flex;
   justify-content: center;
}

button:hover {
   background-color: hsl(223, 100%, 88%);
}
#demo {
   color: hsl(354, 100%, 66%);
   font-size: 15px;
   margin-block-start: 5px;
   font-style: italic;

}
.image-section {
   width: 500px;
   margin: 50px auto;
}
.image {
   width: 100%;
}

.fa {
   padding: 5px;
   font-size: 20px;
   width: 20px;
   text-align: center;
   text-decoration: none;
   margin: 5px;
   border: 0.15px solid hsl(223, 100%, 88%);
   border-radius: 50%;
   color:hsl(223, 87%, 63%);
 }
 
 .fa:hover {
     background-color: hsl(223, 87%, 63%);
     color: white;
 }
 footer .greyText {
    font-size: 11px;
 }

.attribution { 
   padding-top: 20px;
   font-size: 11px;
   text-align: center;
}
.attribution a { 
   color: hsl(228, 45%, 44%);
}

@media screen and (max-width: 500px) {
  .logo {
     width: 70px;
  }
  .topText {
     font-size: 30px;
  }
  #myEmail {
   width: 300px;
   height: 8px;
   padding: 15px;
   margin-right: 0px;
   }

   button {
      width: 330px;
      padding: 15px;
      margin-top: 10px;
   }
   .formcontainer {
      flex-direction: column;
   } 
   .image-section {
      width: 95%;
   }
}