body {
    color: #3B254D;
    background-color: #eee;
    background-image: url(assets/img/bg.png);
    background-size: cover;
}
main {
    background-color: white;
    margin: 50% 20px;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
h1 {
    color: #b68cd2;
    font-weight: bold;
    text-align: center;
}
h2 {
    color: #84c6ff;
    font-weight: bold;
    text-align: center;
}
h3 {
    text-align: center;
}
a {
    color: #b68cd2;
}
a:hover {
    color: #8855ab;
    text-decoration: none;
}
.pfp {
    border-radius: 100%;
}
.btn-primary {
    color: #ffffff;
    background-color: #b68cd2;
    border: #b68cd2;
}
.btn-primary:hover,.btn-primary:focus,.btn-primary:active,.btn-primary.active{
    background-color: #8855ab !important;
    border: #8855ab;
}
.btn-secondary {
    color: #ffffff;
    background-color: #aaa;
    border: #aaa;
}
.btn-secondary:hover,.btn-secondary:focus,.btn-secondary:active,.btn-secondary.active{
    background-color: #888 !important;
    border: #888;
}
.badge {
    background-color: #c6e2fa !important;
    color: #4886bb !important;
    border: none;      
}
.list-group-item.active {
    background-color: #c6e2fa !important;
    border-color: #c6e2fa !important;
    color: #4886bb !important;
}
.list-group-item.active h5, .list-group-item.active small, .list-group-item.active div {
    color: #4886bb !important;
}
.bg-primary {
    background-color: #c6e2fa !important;
    border-color: #c6e2fa !important;
    color: #4886bb !important;
}

@media (min-width: 768px) {
    main {
        max-width: 600px;
        margin: 20px auto;
        margin-top: 10%; /* Quería intentar centrarlo verticalmente y no pude */
    }
}