style.css

a{
    position: relative;
    top: 77%;
    left: 34%;
    font-size: 40px;
    color: rgb(204, 193, 173);
    font-family: Arial, Helvetica, sans-serif;
    animation-name: lucky;
    animation-duration: 4s;
    animation-iteration-count: infinite;

}
@keyframes lucky{
    30%{
        color:  green;

    }
    60%{
        color: rgb(17, 186, 192);

    }

    90%{
        color: rgb(235, 194, 189);

    }

}
.back{
    border: 2px solid white;
}
.feed{
    border: 2px solid white;

}
.home{
    margin: 0 100px 0 100px;

    border: 2px solid white;

}
.btn{
    /* padding: 4px ; */
    border: 2px solid white;
    position: relative;
    top: 82%;
    height: 30px;
    display: flex;
}
.gad{
    background-image: linear-gradient(rgb(146, 241, 146), rgb(243, 41, 41), rgb(27, 21, 21), black);

    position: relative;
    border: 2px solid white;
    height: 98%;
    padding: 9px 0 0 0;
    border-radius: 5px;
}
.ca{
    background-color: rgb(49, 35, 9);
    height: 13px;
    width: 12px;
    border-radius: 50%;
    margin-left: 45%;
}
.case{
    padding: 6px;
    height: 500px;
    background-color: black;
    width: 23%;
    border-radius: 20px;
    margin: 40px 0 0 450px;
    border: 6px dashed greenyellow;
    animation-name: phone;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}
@keyframes phone{
    0%{
        border: 6px dashed red;
    }
    20%{
        border: 6px dashed green;

    }
    40%{
        border: 6px dashed blue;

    }
    60%{
        border: 6px dashed red;

    }
    80%{
        border: 6px dashed yellow;
    
    }
    95%{
        border: 6px dashed blue;

    }

}