4-styles.css

/*
font-family: 'Oswald', sans-serif;
font-family: 'Parisienne', cursive;
*/
body {
    background-color: #1c4150bb;
}
.logo {
    border-radius: 20px;
    margin-right: 10px;
}
#navbarSupportedContent {
    margin-left: 10px;
}
article {
    background-color: #d8f0fc;
    padding: 15px;
    margin-bottom: 35px;
    border-radius: 5px;
}
p {
    column-count: 2;
    column-gap: 60px;
}
ul {
    width: 30em;
}
/**/
#ulu {
    display: flex;
    justify-content: center;
    text-align: center;
    flex-wrap: wrap;
    cursor: context-menu;
    width: 100%;
}
#lil {
    display: inline-block;
    list-style-type: none;
    margin-right: 15px;
    background-color: #ff8b80cc;
    width: 10em;
    height: 3.5em;
    border-radius: 50px 10px;
    text-align: center;
    padding: auto;
    margin: 15px;
    font-size: 110%;
    color: black;
    animation: peri 3s infinite ease-out;
}
@keyframes peri { 
    0%{
        background-color: rgba(100, 52, 233, 0.9);
    }
    17%{
        background-color: rgb(44, 124, 229, 0.9);
    }
    33%{
        background-color: rgb(73, 204, 92, 0.9);
    }
    50%{
        background-color: rgb(248, 196, 33, 0.9);
    }
    66%{
        background-color: rgb(251, 102, 64, 0.9);
    }
    83%{
        background-color: rgb(248, 37, 83, 0.9);
    }
    100%{
        background-color: rgb(226, 2, 6, 0.9);
    }
}
#lil:hover {
    font-weight: bold;
    font-style: italic;
    font-family: 'Oswald', sans-serif;
    animation: brunva 3s infinite ease-in-out;
}
@keyframes brunva {
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}
/**/
h2 {
    margin: 40px;
    text-align: center;
    font-size: 65px;
    font-family: 'Parisienne', cursive;
    font-weight: bolder;
    color: aliceblue;
}
h3 {
    margin: 25px;
    margin-top: 15px;
    text-align: center;
    font-family: 'Parisienne', cursive;
    font-size: 45px;
    font-weight: bolder;
}
h4 {
    font-style: italic;
    font-family: 'Oswald', sans-serif;
    font-size: 25px;
}

/**/
.card-img-top {
    height: 500px;
    object-fit: cover;
}
.card {
    text-align: center;
}
span {
    font-size: 20px;
    font-family: 'Satisfy', cursive;
}
#img1 {
    float: left;
}

.footer {
    width: 1000px;
}
.footer ul {
    background-color: papayawhip;
}
/**/
footer {
    position: relative;
    bottom: 0px;
    width: 100%;
    background-color: rgb(26, 24, 24);
    color: whitesmoke;
    padding: 10px;
    font-style: oblique;
    margin-top: 10px;
}
@media only screen and (max-width: 768px) {
    p {
        column-count: 1;
    }
}