.contributer-profile-picture {
    position: relative;
    a {
        display: block;
        width: 200px;
        height: 200px;
        text-decoration: none;
        position: relative;
        margin-bottom: 10px;
        &:hover {
            text-decoration: none;
        }
        &:after {
            content: "edit";
            position: absolute;
            top: 10px;
            right: 10px;
            color: white;
        }
    }
    img {
        border: 5px solid black;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 100%;
    }
}

.contributer-profile-container {
    // max-width: 600px;
    /* value I set, we should let the user handle max-width, if you ask me */

    p {
        @include flexbox(column, wrap, space-between, flex-start);
        width: 100%;
    }

    textarea {
        height: 120px;
    }
    textarea,
    input[type="text"],
    input[type="password"] {
        // width: calc(100% - 160px);
    }
    input[type="submit"]{
        width: auto;
    }
    label {
        white-space: nowrap;
        width: 150px;
        &[for="mail"]:after, &[for="dn"]:after {
            content: "*";
            color: red;
        }
    }
}

.profile-image-container {
    width: 150px;
    height: 150px;
    position: relative;
}