*{
    padding:0;
    margin:0;
    box-sizing: border-box;
}
body{
    background-image: url('./images/bg.jpg');
    color:white;
    height:100vh;
    width:100vw;
    position: relative;
    overflow:hidden;
}
p{
    color:rgb(42, 122, 175);
}
img{
    background-repeat: no-repeat;
    background-size: cover;

}
.text{
    position:absolute;
    cursor:pointer;

}
.text span{
    position: absolute;
    background-color:white;
    transition: .5s;
}
 
.container-home{
    position:absolute;
    width: 100%;
    height:100%;
    top:0px;
    left:0px;
    /* background-color:#EEE; */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.title{
    font-size:4rem;
    padding:0.5rem 0;
    font-family: 'Barlow Semi Condensed', sans-serif;

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

.horizontal{
    width:100%;
    height:5px;
}
.horizontal.first{
    top:0px;
    left:0px;
}
.horizontal.second{
    right:0;
    bottom:0;
}
.text:hover  .horizontal.first{
    width: 0px;
    transform: translateX(-1000px);

}
.text:hover  .horizontal.second{
    width: 0px;
    transform: translateX(1000px);

}
.vertical{
    height:0%;
    width:6px;
}
.vertical.first{
    top:0px;
    left:0px;
    transform:translate(-0.75rem, -1000px);
}
.vertical.second{
    bottom:0;
    right:0; 
    transform:translate(0.75rem, 1000px);
}
.text:hover  .vertical.first{
     height:100%;
    transform: translate(-0.75rem, 0px);

}
.text:hover  .vertical.second{
     height:100%;
    transform: translate(0.75rem, 0px);

}