body {
	background-color: rgba(0,0,0,0);
}

.frame {
	background-color: #40444b;
	padding: 10vh;
	height: 60vh;
	width: 270vh;
	border-radius: 10vh;
	overflow: hidden;
	margin: 0px auto;
}

.avatar-div {
	height: 60vh;
	width: 60vh;
	position: relative;
	display: inline-block;
}
.avatar-img {
	height: 100%;
	width: 100%;
	border-radius: 50%;
	object-fit: contain;
}
.avatar-online .avatar-img {
	clip-path: url("#cutout");
}
.avatar-offline .avatar-img {
	clip-path: url("#cutout");
}
.avatar-dot {
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    position: absolute;
    z-index: 1000;
}
.avatar-online .avatar-dot {
    clip-path: url("#online");
    background-color: #43b581;
}
.avatar-offline .avatar-dot {
    clip-path: url("#offline");
    background-color: #747f8d;
}

.user-text {
	position: relative;
	display: inline-block;
	margin: 10vh 15vh;
	top: -10vh;
	font-family: Whitney,Helvetica Neue,Helvetica,Arial,sans-serif;
}
.user-name {
	position: relative;
	display: inline-block;
	color: #ffffff;
	font-size: calc(40vh * 3 / 5);
}
.user-tag {
	position: relative;
	display: inline-block;
	color: #b9bbbe;
	font-size: calc(40vh * 2 / 5);
}