body{
  margin: 0;
  padding: 0;
  background: url(mobile.jpg) no-repeat;
  background-size: cover; 
  background-attachment: fixed;
}
.body{
  text-align: center;
}
.box{
  width:auto;
  background: rgba(0, 0, 0, 0.5);
  padding: 40px;
  text-align: center;
  margin:2.5vh;
  color: white;
  font-family: 'Century Gothic',sans-serif;
}
.box-img{
  border-radius: 50%;
  width: 200px;
  height: 200px;
}
.box h1{
  font-size: 30px;
  letter-spacing:1.5px;
  font-weight:  4000;
  margin:0px;
  padding: 0px;
  margin-bottom:20px;
}
.box h5{
  margin:10;
  padding:0;
  font-size: 15px;
  letter-spacing: 3px;
  font-weight: 1000;
}
.box p{
  text-align: justify;
}
ul{
  margin: 0;
  padding: 0;
}
.box li{
  display: inline-block;
  margin: 6px;
  list-style: none;
}
.box li a{
  color: white;
  text-decoration: none;
  font-size: 60px;
  transition: all ease-in-out 250ms;
}
.box-img{
  color: white;
}
.icon li a img{
  height: 50px;
  width: 50px;
  fill: white;
  filter: contrast(0%) saturate(100%) invert(100%);
}
.i a:link, a:visited {
  background-color: transparent;
  border: 2px solid green;
  padding: 5px 10px;
  display:inline-block;
}
.i a:hover,a:active{
  background-color:green;
  color:white;
}
.info ul{
  align-content: center;
  box-align: center;
}
.info1{
  list-style-type: none;
  text-align:left;
  text-decoration:none;
  line-height:2;
}
.info1 li{
  margin: 0;
  padding: 0;
  display: block;
}
.info1 li img{
  filter: contrast(0%) saturate(100%) invert(100%)
}
@media screen and (min-width:500px){

  .box{
    width:450px;
    margin:auto;
    margin-top: 5%;
  }
}