@import url(//db.onlinewebfonts.com/c/294afa63edf49dc293dd90373066b4d4?family=Whitney);
* {
  margin: 0;
  padding: 0;
  outline: 0;
  box-sizing: border-box;
}
html {
  background: #36393f;
  -webkit-font-smoothing: antialiased !important;
}

body,
input,
button,
textarea{
  font-family: "Whitney", sans-serif;
}

.content {
	width: 100%;
	display: flex;
	flex-direction: row;
}
.profilecard {
	width: 250px;
	margin: 30px auto 0 auto;
	border-radius: 4px;
	border: 1px solid #23262a;
	background: #2f3136;
	display: flex;
	flex-direction: column;
}

.profilecard .me {
	padding-top: 15px;
	margin: 0 auto;
	width: 100%;
	justify-content: center;
	align-items: center;
	background: #202225;
	color: #fff;
}

.profilecard .me .avatar {
	margin: 0 auto;
	border-radius: 50%;
	overflow: hidden;
	width: 80px;
	height: 80px;
}
.profilecard .me .avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#info {
  align-items: center;
  color: #fff;
  text-align: center;
  border-width: 12px;
  border: 15px 2px #fe9090;
}

.profilecard .me .username {
	margin: 15px auto 15px auto;
	text-align: center;
	font-weight: 100;
	font-size: 14px;
}
.profilecard .me .username strong {
	color: #fff;
}
.profilecard .me .username span {
	color: #72767d;
	letter-spacing: -1px;
}
.profilecard .role, .profilecard .note {
	padding: 0.5rem 0.5rem 2rem 0.5rem;
	color: #72767d;
	font-size: 10px;
	display: flex;
	flex-direction: column;
}
.profilecard .note .noteheader {
	padding-bottom: 0.5rem; 
}
.profilecard .note textarea {
	padding: 0.5rem;
	resize: none;
	background: transparent;
	border: 0;
	color: #72767d;
	font-size: 10px;
}
.profilecard .note textarea:hover {
	background: #202225;
}
.profilecard .message {
padding: 0.5rem;
border-top: 1px solid #23262a;
}

.profilecard .message input {
	width: 100%;
	border: 1px solid #23262a;
	background: #36393f;
	padding: 0.5rem;
	color: hsla(0,0%,100%,.7);
	font-size: 12px;
}

.profilecard .tip {
	font-size: 10px;
	padding: 0.2rem 0.5rem;
}
.profilecard .tip strong {
	color: rgb(67, 181, 129);
} 

.profilecard .tip span {
	color: #72767d;
}
/* Embed style */
        .embed {
            width: 400px;
            background-color: #36393f;
            border: 1px solid #2f3136;
            border-radius: 5px;
            padding: 10px;
            color: #ffffff;
        }

        .author {
            color: #7289da;
        }

        .title {
            font-weight: bold;
        }

        .description {
            margin-top: 5px;
        }

        .footer {
            font-size: 12px;
            margin-top: 10px;
        }
        .embed-image {
            margin-top: 10px;
            max-width: 100%;
            height: auto;
        }
        .color-bar {
            width: 8px; /* Adjust the width of the colored bar */
            height: 100%;
            background-color: #7289da; /* Change the color as desired */
            position: absolute;
            left: 0;
            top: 0;
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
        }

a {
  font-weight: bold;
  color: salmon;
}
a::pressed {
  font-weight: bold;
  color: #ff5542;