* {
  margin     : 0;
  padding    : 0;
  box-sizing : border-box;
  color      : #334e64;
  scale:     : 0.4;
  font-family: 'Raleway', sans-serif;
}

body {
  min-height     : 100vh;
  width          : 100%;
  display        : flex;
  justify-content: center;
  align-items    : center;
  background     : linear-gradient(20deg, #f39c12, #58d68d);
}

.profile-container {
  position        : relative;
  background-color: rgb(39, 37, 39);
  width           : 450px;
  padding         : 100px 50px 40px;
  border-radius   : 12px;
  display         : flex;
  flex-direction  : column;
  justify-content : center;
  align-items     : center;
  transition      : 0.5s;
}

.img-container {
  width        : 130px;
  height       : 130px;
  overflow     : hidden;
  border       : linear-gradient(45deg, #38fddc, #6a0499);
  border-radius: 50%;
  box-shadow   : 0 8px 55px #008cffa4;
  position     : absolute;
  top          : 0;
  left         : 50%;
  transform    : translate(-50%, -50%);
}

.img-container img {
  width    : 100%;
  max-width: 100%;
  transform: scale(1.1);
}

.info {
  margin-bottom: 12px;
  font-weight: 300;
  font-size: 15px;
  color: #ffffff;
}

.info i {
  margin-right: 8px;
}

.place {
  margin-bottom: 40px;
}

.full-name {
  font-size     : 1.4em;
  font-weight   : 700;
  letter-spacing: 1px;
  color         : #658eff;
}

.posts-info {
  width          : 100%;
  display        : flex;
  justify-content: space-around;
  align-items    : center;
  font-size      : 1.1em;
  letter-spacing : 0.5px;
  margin-bottom  : 30px;
  text-align     : center;
}

.posts-info span {
  display      : block;
  font-weight  : bold;
  margin-bottom: 4px;
}

.social-container {
  width          : 100%;
  display        : flex;
  justify-content: space-around;
  align-items    : center;
  margin-bottom  : 20px;
}

.social-container i {
  color: #fff;
}

.social-container button {
  border          : none;
  outline         : none;
  width           : 64px;
  height          : 64px;
  border-radius   : 12px;
  font-size       : 15px;
  cursor          : pointer;
  box-shadow      : 0px 5px 25px rgba(0, 0, 0, 0.15);
  transition      : transform 0.75s;
  font-family     : 'Poppins', sans-serif;
  font-weight     : 100;

}

.social-container button:hover {
  transform: scale(1.3);
}

/* Social colors */

.social-container button.youtube {
  background: linear-gradient(45deg, #ffffffad, #ffffff);
}
.social-container button.github {
  background: linear-gradient(45deg, #33333388, #333333);
}
.social-container button.lbpp {
  background: linear-gradient(45deg, #5436ff88, #056eac);
}
.social-container button.discord {
  background: linear-gradient(45deg, #6145ff88, #3e7edd);
}

.profile-container:hover {
  transition      : 0.5s;
  box-shadow      : 0 0 30px 10px rgba(0, 0, 0, 0.507);
}

.logo {
  width           : 32px;
  height          : 32px;
  box-shadow: black;
}

.top-right-buttons {
  position: absolute;
  top: 20px;
  right: 20px;
}

.top-button {
  background-color: #007bff;
  color: #fff;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  margin-left: 10px;
}

.top-button:hover {
  background-color: #0056b3;
}


.logo-discord {
  width           : 32px;
  height          : 24px;
}

.discordcatto {
  border-radius: 15px;
  width: 410;
  border: linear-gradient(45deg, #38fddc, #6a0499);
}

.music {
  border-radius: 12px;
  width: 152;
  border: linear-gradient(45deg, #38fddc, #6a0499);
}