*{
  margin: 0;
  padding: 0;
  border: 0;
}
body{
  background-image: url(../imgs/backgrounds/tea-time.jpg);
  height: 100vh;
  width: 100%;
  background-position: center;
  background-size: cover;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
body:before{
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background: #000;
  opacity: .6;
}
.content{
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
img{
  position: relative;
  width: 15%;
  height: auto;
  filter: brightness(.7);

}
h1{
  position: relative;
  font-size: 40px;
  color: #fff;
  text-align: center;
}
p{
  padding-top: 3%;
  font-size: 20px;
  position: relative;
  font-family: 'Raleway', sans-serif;
  width: 60%;
  color: #fff;
  text-align: center;
}
.links{
  width: 100%;
  height: auto;
  margin-top: 2vw;
}
.links .links-conten{
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.links-conten .link{
  z-index:100;
  height: auto;
  margin: 2vw;;
}
.link i{
  font-size: 70px;
  transition: .5s;
}
.link i:hover{
  filter: brightness(1.5);
}
#insta{
    color: #ff2db7;
}
#face{
    color: #0185ff;
}
@media screen and (max-width: 800px){
    body{
        background-image: url(../imgs/backgrounds/tea-time_v.jpg);
    }
    h1{
        font-size: 25px;
    }
    p{
        font-size: 15px;
        width: 80%;
    }
    .link i{
        font-size: 9vw;
    }
}
@media screen and (max-device-width: 800px){
    body{
        background-image: url(../imgs/backgrounds/tea-time_v.jpg);
    }
    h1{
        font-size: 25px;
    }
    p{
        font-size: 15px;
        width: 80%;
    }
    .link i{
        font-size: 50px;
    }
}