styles.css

body {
    background-color: rgb(244, 234, 255);
    font-family: 'roboto', sans-serif;
}

header {
    text-align: center;
    padding: 32px;
}

header h1 {
    font-size: 52px;
    color: rgb(88, 49, 196);
}

header img {
    width: 300px;
}

main {
    width: 700px;
    margin: 32px auto;
    color: rgb(248, 241, 255);
    background-color: rgb(122, 74, 218);
    padding: 32px;
    border-radius: 8px;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

li {
    margin: 14px 0;
    padding-left: 10px;
    border-left: 5px solid transparent;
}
.list-style {
    color: rgb(255, 237, 177);
    border-color: rgb(247, 209, 85);
}

.button {
    background-color: rgb(248, 248, 104);
    padding: 6px;
    border-radius: 6px;
    color: rgb(98, 12, 178);
    font-weight: bold;
    text-decoration: none;
}

.button:hover, .button:active{
    background-color: rgb(253, 253, 166);
}

footer {
    text-align: center;
}

footer a {
    background-color: rgb(255, 213, 0);
    padding: 12px 24px;
    border-radius: 6px;
    text-decoration: none;
    color: black;
    display: inline-block;
}

footer a:hover {
    background-color: rgb(255, 219, 37);
}