/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––

- Rounded user avatars
- Buttons
- Brand Styles

*/


/* Rounded avatars
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Disable this if you don't want rounded avatars for users */
.rounded-avatar {
  border-radius: 50%;
  -webkit-box-shadow: 0px 0px 0px 3px #ffffff; 
  box-shadow: 0px 0px 0px 3px #ffffff;
  background-color: #ffffff !important;
  width: 150px;
  height: 150px;
}


/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */

:root {
  /* violet */
  --primary-color: 111, 76, 255;
  
  /* white */
  --text-color: 256, 256, 256;
}

.button {
  font-family: 'DM Sans', sans-serif;
  font-size: 18px;
  padding: 12px 32px;
  margin: 1rem;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.3s ease;
  border-radius: 50px;
  color: rgba(var(--text-color));
  border: 2px double transparent;
      background-image: linear-gradient(rgb(13, 14, 33), rgb(13, 14, 33)), radial-gradient(circle at left top, rgb(1, 110, 218), rgb(217, 0, 192));
  background-origin: border-box;
  background-clip: padding-box, border-box;
  max-width: 300px;
  width: 70%;
}

.button:hover {
  transition: all 0.3s ease;
  box-shadow: rgba(var(--primary-color), 0.5) 0px 0px 20px 0px;
  color: rgba(var(--text-color));
  opacity: 0.85;
}


/* Brand Icons
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.icon {
  padding: 0px 8px 3.5px 0px;
  /* position: absolute;
  left: 20px;
  top: 15px; */
  vertical-align: middle;
  width: 20px;
  height: 20px;
}