.profile { display: flex; flex-direction: column; flex-wrap: wrap; font-family: 'Open Sans', sans-serif; margin-bottom: 0.6rem; border-radius: 0.6rem; padding: 0.6rem } .profile *[class*="profile-info-"] { flex: 1; mix-blend-mode: difference } .profile-info { display: flex; flex-wrap: wrap; flex-direction: column } .profile-info-nickname { font-size: 1.3rem } .profile-info-tags { margin: unset } .profile-info-stats strong { margin-right: 5px } .profile-info-stats { margin-top: 0.6rem } .profile-avatar { max-width: 4rem; min-width: 3rem; width: 100%; height: auto; margin-right: 5px; border-radius: 2px } .section-widget { display: flex; flex-direction: column; border-radius: 0.6rem; margin-bottom: 1.3rem } .section-widget hr { margin-bottom: 0.6rem } .section-widget-padded { padding: 0.6rem } .section-title { font-size: 1.3rem; font-weight: 700; margin: 0 } .section-widget-button-like { border-radius: 0.6rem; padding: 6px 10px; margin-top: 6px; cursor: pointer; float: right; align-self: end; font-family: 'Open Sans', sans-serif; font-weight: 700 } .section-title-details { font-size: 1.3rem; font-weight: 700; border-radius: 0.6rem; padding: 6px 10px 6px 10px } .section-title-details[open] svg { transform: rotate(180deg); animation: fadeOut 200ms cubic-bezier(0, 0.55, 0.45, 1) } .section-title-details:not([open]) svg { transform: initial; animation: fadeIn 200ms cubic-bezier(0, 0.55, 0.45, 1) } .section-title-summary { display: flex; justify-content: space-between } .section-form { display: flex; flex-direction: column; padding: 0.6rem } .section-form-legend { margin-top: unset; margin-bottom: 10px; font-weight: bold; font-size: 1.62rem } .form-group { all: unset; display: flex; flex-direction: column; margin-bottom: 6px } .form-group textarea { height: 7rem; max-height: 100% } .help-block { margin-bottom: 6px } .help-text { font-style: italic; font-size: 1rem; margin-bottom: 6px } .help-block>.list-unstyled, .alert, .alert-danger { display: inline-block; border: solid 2px #FF6347; background-color: #FF634733; border-radius: 0.6rem; padding: 2px 6px; margin-top: 6px; margin-bottom: 6px } .section-widget { display: flex; flex-direction: column; border-radius: 0.6rem; margin-bottom: 1.3rem } .section-widget hr { margin-bottom: 0.6rem } .section-widget-padded { padding: 0.6rem } .section-title { font-size: 1.3rem; font-weight: 700; margin: 0 } .section-widget-button-like { border-radius: 0.6rem; padding: 6px 10px; margin-top: 6px; cursor: pointer; float: right; align-self: end; font-family: 'Open Sans', sans-serif; font-weight: 700 } .section-title-details { font-size: 1.3rem; font-weight: 700; border-radius: 0.6rem; padding: 6px 10px 6px 10px } .section-title-details[open] svg { transform: rotate(180deg); animation: fadeOut 200ms cubic-bezier(0, 0.55, 0.45, 1) } .section-title-details:not([open]) svg { transform: initial; animation: fadeIn 200ms cubic-bezier(0, 0.55, 0.45, 1) } .section-title-summary { display: flex; justify-content: space-between } .section-form { display: flex; flex-direction: column; padding: 0.6rem } .section-form-legend { margin-top: unset; margin-bottom: 10px; font-weight: bold; font-size: 1.62rem } .form-group { all: unset; display: flex; flex-direction: column; margin-bottom: 6px } .form-group textarea { height: 7rem; max-height: 100% } .help-block { margin-bottom: 6px } .help-text { font-style: italic; font-size: 1rem; margin-bottom: 6px } .help-block>.list-unstyled, .alert, .alert-danger { display: inline-block; border: solid 2px #FF6347; background-color: #FF634733; border-radius: 0.6rem; padding: 2px 6px; margin-top: 6px; margin-bottom: 6px }