html {
    background-color: #623EDA;
    background-image: url('/assets/images/background.webp');
    background-size: cover;
    height: 100%;
}

body {
    background: none !important;
}

.content {
    border-radius: 5px;
    width: 400px;
    margin-top: 50px;
    padding: 10px;
}

#avatar {
    text-align: center;
}

#avatar>img {
    border-radius: 100px;
    border: 3px #FFFFFF solid;
    width: 100px;
    box-shadow: 0 0 11px 0 #391d95;
}

#about {
    text-align: center;
    color: #FFFFFF;
    font-size: 18px;
    padding: 20px 0;
}

.btn-primary {
    background-color: #4925c0;
    border: 3px #FFFFFF solid;
    border-radius: 25px;
    box-shadow: 0 0 11px 0 #391d95;
    margin-bottom: 13px;
    padding: 10px 0;
}

.btn-primary:hover {
    background-color: #623eda;
    border: 3px #FFFFFF solid;
}

.btn-primary:active {
    background-color: #623eda;
    border: 3px #FFFFFF solid;
}

.btn-primary:focus, .btn-primary:active:focus {
    background-color: #623eda;
    border: 3px #FFFFFF solid;
    box-shadow: none;  
}

#footer {
    text-align: center;
    color: #FFFFFF;
}