@font-face {
    font-family: 'Roboto', sans-serif;
    src: url(https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap)
}

@media only screen and (max-device-width: 480px) {
    iframe {
        width: 80%;
    }
}

body {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    font-family: 'Roboto', sans-serif;
}

a {
    text-decoration: none;
    color: black;
    font-weight: 600;
}

.name {
    text-align: center;
}

.links {
    font-size: 20px;
    word-spacing: 5px;
}

.text-color{
    background-color: #FF0000;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 100%;
    background-image: linear-gradient(
        45deg,
        #FF0000 33%,
        #FF4500 33%,
        #FF4500 40%,
        #FFFF00 40%,
        #FFFF00 47%,
        #008000 47%,
        #008000 54%,
        #00BFFF 54%,
        #00BFFF 61%,
        #0000FF 61%,
        #0000FF 68%,
        #800080 68%);
    animation: text-animate-rev 0.75s ease forwards;

}

.text-color:hover{
    animation: text-animate 0.5s ease-in forwards;
}

@keyframes text-animate-rev {
    0% {
        background-size: 650%;
    }
    40% {
        background-size: 650%;
    }
    100% {
        background-size: 100%;
    }
}

@keyframes text-animate {
    0% {
        background-size: 100%;
    }
    80% {
        background-size: 650%;
    }
    100% {
        background-size: 650%;
    }
}