.menu ul{
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: center;
    width: 100%;
}
.menu li.box{
    color: #EFEFEF;
    height: 350px;
    width: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    box-shadow: rgba(20, 20, 20, 0.7) 0px 8px 12px, 120px 0px 100px #3a3a3a inset;
    margin: 25px 25px;
    background: #3a3a3a;
    transform: rotate(0);
    border-radius: 8px;
    border: 1px solid transparent;
    transition:background ease-in-out 0.4s, box-shadow 0.4s ease-in-out, border 0.4s;
}
.menu li svg{
    height: 200px;
    width: 200px;
}
.menu li a {
    color:#EFEEEE;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.menu li p{
    padding-top: 20px;
    font-family: 'Oswald', sans-serif;
    font-size:1.875rem ;
}
.menu ul li.box svg.roll .st0{
    opacity: 0;
    transition: opacity 0.4s;
}
.menu ul li.box svg.roll .st2{
    opacity: 0.999;
    transition: opacity 0.4s;
}
.menu ul li.box:hover svg.roll .st0{
    opacity: 1;
}
.menu ul li.box:hover svg.roll .st2{
    opacity: 0.001;
}
.menu ul li.box:hover svg.deco .st1{
    opacity: 0.001;
    transition: opacity 0.4s;
}
.menu ul li.box:hover svg.deco .st2{
    opacity: 0.001;
    transition: opacity 0.4s;
}
.menu ul li.box:hover svg.deco .st3{
    opacity: 1;
}
.menu ul li.box:hover svg.deco .st4{
    opacity: 1;
}
.menu ul li.box svg.deco .st1{
    opacity: 0.999;
    transition: opacity 0.4s;
}
.menu ul li.box svg.deco .st2{
    opacity: 0.999;
    transition: opacity 0.4s;
}
.menu ul li.box svg.deco .st3{
    opacity: 0;
    transition: opacity 0.4s;
}
.menu ul li.box svg.deco .st4{
    opacity: 0;
    transition: opacity 0.4s;
}
.menu li.box:hover{
    background: #E6007D;
    /* box-shadow: white 0px 0px 20px, 120px 0px 100px #5b2582 inset; */
    box-shadow: rgb(255, 0, 183) 0px 0px 20px, 120px 0px 100px #5b2582 inset;
    cursor:pointer;
    border: 1px solid white;
    /* border: 1px solid rgb(255, 0, 183); */
}
.menu{
    padding-bottom: 200px;
}

@media screen and (max-width:800px) {
    .menu li.box{
        height: 200px;
        min-width:100%;
        margin: 0 0 20px 0;
        transform: none;
    }
    .menu li.box svg{
        height: 100px;
        width: 100px;
    }
    .menu li.box:hover{
        transform: none;
    }
    .menu ul {
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .menu a{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .menu {
        padding-bottom: 50px;
    }

}