body{
  background: #ddd;
  font-family: lunch;
  height: 100vh;
  padding: 20px;
  color:#333;
  font-size: 18px;
  line-height: 1.2em;
  background: linear-gradient(to bottom, #6bb4d7 , rgb(66, 179, 126)); /* Standard syntax */
  background-attachment: fixed;

}
main{
  margin:10vh auto;
  padding:40px 20px 20px 20px;
  background: white;
  display: flex;
  max-width: 650px;
  border-radius: 5px;
  align-content: center;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: baseline;
  background: rgba(255, 255, 255, 0.3);
  /*background: url(../bg.jpg) no-repeat center center;*/
  box-shadow: 0 0 5px rgb(116, 117, 122);
}
footer,
header{
  text-align: center;
}
h1{
  color:white;
  letter-spacing: 2px;
  margin: 20px 0;
  display: block;
  font-weight: bold;
  font-size: 50px;
}
footer p,
header p{
  color:#355578;
  max-width: 40ch;
  margin: auto;
}
.app{
  width:100px;
  text-align: center;
  transition: all .2s ease;
  margin:0px 15px 20px 15px;
  text-shadow: 1px 1px 1px white;
  color:#333;
}
.app h2{
  margin-top:5px;
}
.app:hover{
  transform:scale(1.1);
}
.app img{
  width:100%;
  border-radius:10px;

}
a{
  color:white;
  text-decoration: none;
}

@media only screen and (max-width: 400px) {
  .main{
    width:80%;
  }
}