/* center elements */
.center {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* resize avatar and make it a circle */
.avatar {
    width: 40%;
    max-width: 150px;
    height: auto;
    border-radius: 50%;
    object-fit: cover;
    /* padding-bottom: 10px; */
}

/* centres the avatar 
   to the middle of the buttons */
   .btn-wrapper {
    text-align:center;
}


/* align input and
   control opacity and width */

input {
    text-align: center;
}

.input-group {
    opacity: .9;
    min-width: 225px;
    max-width: 300px;
    padding-top: 24px;
}


/* custom colours and font */
.form-control {
    color: #d1cdc7;
    border: #383d3f;
    background-color: #232627;
    font-family: 'Saira', sans-serif;
    font-weight: 400;
}

/* set the colours again on focus
   otherwise will default to white */
.form-control:focus {
    color: #d1cdc7;
    border: #383d3f;
    background-color: #232627;
    box-shadow: None;
}


/* override default btn colours  */
.btn {
    background-color: #1b1e1f;
    border: #383d3f;
    color: #d1cdc7;
}

/* change the colour of the icons
   define the size of them */
   
.icons {
    filter: invert(100%) sepia(44%) saturate(422%) hue-rotate(302deg) brightness(86%) contrast(89%);
    height: 1em;
    width: auto;
}

.wire {
    height: 1em;
    width: auto;
}