/* Table of contents
- Rounded user avatars
- Buttons
- Brand Styles
*/

/* Rounded avatars */
.rounded-avatar{
  border-radius:50%;
  box-shadow:0 0 0 3px var(--avatar-ring);
  background-color: var(--avatar-ring) !important;
  width:150px;
  height:150px;
}

.social-icon{
  font-size:32px;
  padding:10px;
  color:#fff;
}
.social-icon-div{ padding-bottom:30px; }

/* Buttons */
.button {
    /* Layout & Stacking */
    display: block;                  /* Ensures element occupies its own line */
    box-sizing: border-box;         /* Includes padding & border inside width */
    margin: 1rem auto;              /* Vertical spacing + horizontal centering */
    clear: both;                    /* Prevents overlap if floating elements exist nearby */

    /* Typography & Styling */
    font-family: var(--font-body);
    font-size: 18px;
    padding: 12px 32px;
    cursor: pointer;
    border-radius: 50px;
    transition: all 0.3s ease;
    color: rgba(var(--btn-text), 1);
    border: 2px double transparent;
    background-image: linear-gradient(var(--btn-inner), var(--btn-inner)),
    radial-gradient(circle at left top, var(--btn-grad-a), var(--btn-grad-b));
    background-origin: border-box;
    background-clip: padding-box, border-box;
    max-width: 300px;
    width: 70%;
}

.button:hover{
  box-shadow: rgba(var(--btn-glow), 0.5) 0 0 20px 0;
  color: rgba(var(--btn-text), 1);
  opacity:0.85;
}

/* Brand Icons */
.icon{
  padding:0 8px 3.5px 0;
  vertical-align:middle;
  width:20px;
  height:20px;
}