*{
  margin: 0;
  padding: 0;
  letter-spacing: 1.5px;
}

body{
  height: 100vh;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
  url("../images/index_img_back.jpg") center no-repeat;
background-size: cover;

z-index: -100;
}
.footer{
  width:80%;
  height:80px;
  background-color: #474646;
  position: absolute;
  bottom: 0;
  margin:auto 10%;
}

.line{
  height: 37px;
  width: 1.5px;
  background-color: white;
  display: inline-block;
  transform: translate(10px,5px);
  float: right;
}

.row-links{
  position: relative;
  margin: 2% 5%;
}
.row-links a{
  color: none;
  text-decoration: none;
}
.links{
  color: aliceblue;
  font-size: 1.6rem;
}
.intro{
  margin-top: 10%;

}
.intro-1st{
  color: aliceblue;
  font-size: 2rem;
}
.intro-2nd{
  color: white;
  font-size: 2.5rem;
}

.button{
  position: relative;
  display: inline-flex;
  width: 180px;
  height: 55px;
  margin: 5% 15px;
  perspective: 1000px;

}
.button a{
  font-size: 19px;
  letter-spacing: 1px;
  transform-style: preserve-3d;
  transform: translateZ(-25px);
  transition: transform .25s;
  font-family: 'Montserrat', sans-serif;
  
}

.button a:before{
  color: #000;
  background: #fff;
  transform: rotateY(0deg) translateZ(25px);
}
.button a:after{
  color: #fff;
  transform: rotateX(90deg) translateZ(25px);
}
.button a:hover{
  transform: translateZ(-25px) rotateX(-90deg);
}




@media screen and (max-width: 850px) {

.links{
 font-size: 1.2rem;
}
}
@media screen and (max-width: 550px) {
.footer{
  height: 90px;
}
.links{
font-size: 1rem;
}
.line{
height: 25px;
margin-bottom: 5px;
}
.intro-1st {

font-size: 1.5rem;
}
.intro-2nd {

font-size: 2rem;
}

}