style.css

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300&display=swap');

.navbar {
    background-color: rgba(90, 156, 255, 0.8);
    backdrop-filter: blur(5px);
}

.text-custom {
    color: #5cabff;
}

.bg-blue-white {
    background-color: #589eff18;
    border-radius: 50px;
}

.btn-custom {
    background-color: #1f73f1;
}

.idea-custom {
    background-color: #90c0ff;
    padding: 40px;
    border-radius: 5px 50px 50px 50px;
}

.container-fluid {
    font-family: 'DM Sans', sans-serif;
}

#img {
    transition: 0.3s;
    animation: changeShadow 10s ease infinite;
}

#img-dev {
    border-radius: 10px 10px 10px 100px;
}

.bg-custom {
    background-color: #90ceff;
}

#aboutMeText {
    padding: 50px;
    border-radius: 5px 100px 100px 100px;
}

@keyframes changeShadow {
    0%{
        box-shadow: 0 1px 5px 0px blue;
    }
    30%{
        box-shadow: 0 1px 5px 0px rgb(84, 84, 218);
    }
    60%{
        box-shadow: 0 1px 5px 0px rgb(128, 183, 255);
    }
    80%{
        box-shadow: 0 1px 5px 0px rgb(61, 193, 245);
    }
    100%{
        box-shadow: 0 1px 5px 0px blue;
    }
}

#btn{
    transition: 0.3s;
}

#btn:hover {
    box-shadow: 0px 10px 30px 5px #bdd8ff;
    -webkit-box-shadow: 0px 10px 30px 5px #bdd8ff;
    border: solid 100px white;
}

#colored-line{
    padding: 2px;
    background: linear-gradient(45deg, #00c6ff, #0072ff, #00c6ff);
    border-radius: 100px;
    border: 0px;
    margin-top: -5px;
}

#profesion{
    font-size: 2.00rem;
    background: linear-gradient(45deg, #00c6ff, #0072ff, #00c6ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: changeColor 10s linear infinite;
}

@keyframes changeColor {
    0% {
        color: #0088ff; 
    }
    20% {
        color: #a9ff8f; 
    }
    40% {
        color: #89ff5b; 
    }
    60% {
        color: #f58aff; 
    }
    80% {
        color: #db4aff; 
    }
    100% {
        color: #0088ff; 
    }
}