.title { margin-top: 40px; }
.profile-box { width: 560px; margin: 0 auto; padding: 40px 80px; background: var(--back-primary); border: 1px solid var(--border-secondary); box-shadow: 0 0 5px 1px #00000011; }
.profile-avatar { position: relative; width: 200px; height: 200px; margin: 20px auto; border: 1px solid var(--border-secondary); border-radius: 100px; }
.profile-image  { max-width: 100%; width: 100%; max-height: 100%; height: 100%; border-radius: 100px; }
.profile-info { text-align: center; margin-bottom: 20px; }
.profile-info h1 { margin: 10px 0; font-size: 24px; }
.profile-info h3 { margin: 5px 0; color: var(--color-secondary); font-weight: normal; }
.profile-info li { list-style: none; margin: 10px 0; }
.profile-data { margin: 40px 0; text-align: left; }
.profile-data li { margin: 8px 0; }
.profile-data label { display: inline-block; width: 150px; font-weight: bold; color: var(--color-primary); }

.input-file { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; z-index: 2; cursor: pointer; }
.preview { width: 200px; height: 100% }

#profile-grant-box { margin-bottom: 50px; }
#profile-grant { width: 250px; margin-bottom: 10px; padding: 8px 30px; background-color: #ad00e8; color: #fff; border-radius: 4px; border: none; letter-spacing: 1.5px; font-size: 100%; outline: none; cursor: pointer; }

#profile-save { width: 250px; padding: 15px 30px; background-color: #00ade8; color: #fff; border-radius: 4px; border: none; letter-spacing: 1.5px; font-size: 100%; outline: none; cursor: pointer; }
#profile-save:disabled { background-color: #aaaaaa; color: #333; }

.blank { line-height: 1em; height: 1em; }
input[type=text] { width: 400px; padding: 10px 2px 2px 2px; font-size: 100%; color: var(--color-primary); background-color: var(--back-primary); border: none; border-bottom: 1px solid var(--border-secondary); outline: none; }
input[type=text]:focus { background-color: var(--back-alternate); }
input[type=text]:disabled { background-color: transparent; color: var(--color-secondary); }