@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,700&display=swap');

*{
    margin:0;
    padding:0;
    font-family:'Poppins', sans-serif;
}
.navigation{
    display:flex;
    justify-content: center;
    align-items:center;
    min-height:100vh;
    overflow:hidden;
}
.navigation ul{
    list-style-type: none;
    position:relative;
}
.navigation ul li{
    text-align:center;
    list-style:none;
}
.navigation ul li a{
    text-decoration:none;
    color:#333;
    font-size:3em;
    padding:5px 20px;
    display:inline-flex;
    font-weight:700;
    transition:.5s;
}
.navigation ul:hover li a{
    color:#0002;
}
.navigation ul li:hover a{
    color:#000;
    background:transparent;
}
.navigation ul li a:before{
    content:'';
    position:absolute;
    top:50%;
    left:40%;
    transform:translate(-50%, -50%);
    display:flex;
    justify-content: center;
    align-items:center;
    font-size:5em;
    color:rgba(0,0,0,.1);
    z-index:-1;
    opacity:0;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:500px;
    transition:letter-spacing 0.5s;
}
.navigation ul li a:hover:before{

    content: attr(data-text);
    opacity:1;
    left:50%;
    letter-spacing: 10px;
    width:1800px;
    height:1800px;
}
.navigation ul li:nth-child(5n+1) a:before{
    background: #81ecec;
}
.navigation ul li:nth-child(5n+2) a:before{
    background: #ff7675;
}
.navigation ul li:nth-child(5n+3) a:before{
    background: #55efc4;
}
.navigation ul li:nth-child(5n+4) a:before{
    background: #a29bfe;
}
.navigation ul li:nth-child(5n+5) a:before{
    background: #fd79a8;
}