xssbook/public/css/profile.css

body {
    background-color: var(--secondary);
    max-width: 100%;
}

.spacer {
    margin-bottom: 3.5em;
}

#top {
    background-color: var(--primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .05);
}

#banner {
    background-image: linear-gradient(var(--banner), var(--primary), var(--primary));
    height: 30em;
    width: 100%;
    display: flex;
    justify-content: center;
}

#banner .bg, #banner img {
    width: 80em;
    max-width: 100%;
    height: inherit;
    background-color: var(--hover);
    border-radius: 0px 0px 20px 20px;
}

#info {
    width: 80em;
    max-width: 100%;
    display: flex;
    flex-direction: row;
}

.face {
    background-color: var(--hover);
    height: 12em;
    width: 12em;
    border-radius: 7em;
    border: solid 5px var(--primary);
    margin-top: -2em;
    margin-left: 2em;
    margin-right: 2em;
}

.face img {
    height: 12em;
    width: 12em;
    border-radius: 7em;
}

.changeavatar, .changebanner {
    all: unset;
    position: absolute;
    width: 3em;
    height: 3em;
    margin-left: -3em;
    margin-top: 9em;
    border-radius: 3em;
    background-color: var(--secondary);
    z-index: 10000 !important;
    text-align: center;
    background-image:  url('data:image/png;base64,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/TwzbKRT88RhYqHQxnIbs6KhEk8TRxRVo3x/xmWF8xZntVxlzXvyF4Zy2soy12kNIYFFLEGEABlVlFCGhSjtGikmUnQe9/APOn6RXDK5SmDkWEAFKiTHD/4Hv2dr5qcm3aRQHOh8se2PESC4CzRqtv19bNuNEyDwDFxpLX+lDsx+kl5raZEjoHcbuLhuafIecLkDDDzpkiE5UoCWP58H3s/om7JA3y3QvebOrXmO0wcgTbNK3gAHh8BogbLXPd7d1T63f3ua8/sBAv9y4GhT1LwAAA14aVRYdFhNTDpjb20uYWRvYmUueG1wAAAAAAA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/Pgo8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJYTVAgQ29yZSA0LjQuMC1FeGl2MiI+CiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiCiAgICB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIKICAgIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiCiAgICB4bWxuczpHSU1QPSJodHRwOi8vd3d3LmdpbXAub3JnL3htcC8iCiAgICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iCiAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyIKICAgIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIKICAgeG1wTU06RG9jdW1lbnRJRD0iZ2ltcDpkb2NpZDpnaW1wOjNlYWM4M2MyLTUzMjctNDE5ZS1iMjJlLWU2YjE5M2M2ZTc2NiIKICAgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0MTNkODIxZC1jMDE1LTQ1ZGQtYTAwNS04MTA2OGY3ZTg1YjEiCiAgIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo4ZGRkOGY2My1iODAwLTQ1MDQtYWE3Yi1iNzAwOTRiOTg5YTgiCiAgIEdJTVA6QVBJPSIyLjAiCiAgIEdJTVA6UGxhdGZvcm09IkxpbnV4IgogICBHSU1QOlRpbWVTdGFtcD0iMTY3NTIwNTQzNTkyMzY1NCIKICAgR0lNUDpWZXJzaW9uPSIyLjEwLjMyIgogICBkYzpGb3JtYXQ9ImltYWdlL3BuZyIKICAgdGlmZjpPcmllbnRhdGlvbj0iMSIKICAgeG1wOkNyZWF0b3JUb29sPSJHSU1QIDIuMTAiCiAgIHhtcDpNZXRhZGF0YURhdGU9IjIwMjM6MDE6MzFUMTc6NTA6MzUtMDU6MDAiCiAgIHhtcDpNb2RpZnlEYXRlPSIyMDIzO
    cursor: pointer;
}

.changebanner {
    position: relative;
    margin-left: -4em;
    margin-top: 26em;
}

.infodata {
    margin-top: 2em;
    display: flex;
    flex-direction: column;
}

.infodata span {
    margin-bottom: .5em;
}

.profilebuttons {
    width: 80em;
    max-width: 100%;
    height: 3em;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.profilebuttons button {
    all: unset;
    font-family: sfprobold;
    padding: 0px 50px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--medium);
    cursor: pointer;
    flex: 0;
}

.profilebuttons button:hover {
    background-color: var(--mild);
}

.selected {
    color: var(--logo) !important;
    border-bottom: 3px solid var(--logo) !important;
}

#about {
    margin-top: 2em;
    align-self: center;
    padding: 0;
    display: flex;
    flex-direction: row;
}

#posts {
    max-width: 100%;
    margin-top: 2em;
}

#about .ltext {
    border-right: 2px solid var(--mild);
    padding: 10px;
    padding-right: 3em;
    max-width: 100%;
}

#about .data {
    display: flex;
    flex-direction: column;
    padding: 10px;
    padding-left: 20px;
    padding-top: 15px;
    max-width: 100%;
}

#about .data span {
    margin-bottom: 10px;
    width: 28em;
    margin-bottom: 5px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: 100%;
}

.logout {
    flex: 1;
}