/** home section layout **/

#banner {
    margin-top: 10%;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding-bottom: 10px;
}

#banner a {
    color: white;
    text-transform: capitalize;
}

#banner a i {
    padding-right: 10px;
}

.main-page-logo {
    background: radial-gradient(#f15729, transparent 60%);
}

@media (max-width: 400px) {
    .main-page-logo {
        width: 100px;
        margin: 20px;
        float: right;
    }
}

@media (min-width: 400px) {
    .main-page-logo {
        width: 200px;
        margin: 20px;
        float: right;
    }
}

/** name animation **/

.main-title {
    font-size: 40px;
    font-weight: 600;
    background-image: linear-gradient(66deg, #c11a2b, #f15729, #a621e3, #21ade3, #0278bd, #21ade3, #a621e3, #f15729, #c11a2b);
    font-family: arial black;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

@media (max-width: 400px) {
    .main-title {
        animation: rainbow-animation 3000s linear infinite;
    }
}

@media (min-width: 400px) {
    .main-title {
        animation: rainbow-animation 800s linear infinite;
    }
}

@keyframes rainbow-animation {
    to {
        background-position: 4500vh;
    }
}